About armazon.css

armazon.css is a lightweight and super simple CSS3 Boilerplate Micro Framework built using the LESS CSS Preprocessor that will fit your needs if you consider any of the HTML5 Reset Stylesheets are not enough as they require a lot of tedious 'after-reset' work to restyle every HTML element, and you think CSS Frameworks are too much for your project as they come with a big time consuming documentation and a lot of bloating components that you are probably never going to use.

The basic principle of armazon.css is simplicity, easy to learn with a minimal learning curve and also easy to extend. Its main purpose is to provide an improved CSS basis starting point with a much nicer default CSS style sheet in order to help you speed up the responsive development and design of your web application.

The primary armazon.css features are :

• An adaptive and responsive grid system with customizable margins and space between columns.
• New look and proper cross-browser consistency for the standard HTML elements display by overwriting the default ugly looking browser style sheets.
• An easy to remember small group of useful classes.
• A little set of LESS variables, so you can fully customize the CSS output of armazon.css.
• It's bilingual, armazon speaks both English and Spanish through the use of alias classes.

Quick Start

Installation & Getting Started

armazon.css will make a lot easier to kick start your responsive web application and the fastest way to have it up and running on your site is by using the armazon precompiled and minified version, to do so, just follow these simple steps:

1. Include the armazon.min.css file onto your web document. You have three different options :
   • Install it via bower with the following command : $ bower install armazon.css
   • Using a downloaded copy of armazon.css, you can get the precompiled and minified file from the armazon.css project main repository on GitHub : armazon.min.css @GitHub
   • Or by consuming the hosted file on the CDN kindly provided by rawgit.com : armazon.min.css @RawGit CDN

   <!-- Installed via Bower or using a downloaded copy: -->
   <link rel="stylesheet" type="text/css" href="path/to/your/armazon.min.css" />
   <!-- Using CDN's hosted file: -->
   <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alterebro/armazon.css/v0.3.1/armazon/armazon.min.css" />
   

2. Set the viewport meta tag inside the head of your document so you can control how your web app is displayed on mobile devices:

   <meta name="viewport" content="width=device-width, initial-scale=1" />
   
   <!-- You can also add these two optional metatags below -->
   <meta name="HandheldFriendly" content="True" />
   <meta name="MobileOptimized" content="320" />
   

3. Done, that's all. Now, you can start your development, here's a simple HTML template to help you get started.

To work directly with the armazon source, you may want to use all the development files which are located on the main project repository at GitHub: armazon.css repository @github and probably know more about how to hack and develop with the source files on the next section:

Working with the .less file & Output Customization

Working with the armazon.less file

If you prefer to work with the non compiled .less version of armazon so you can fully customize the CSS output of your styles here's a little guide to help you about how to do it.
Basically you need to have the lessc compiler installed on your computer and include somehow the armazon.less file onto your workflow. ( More info about how to make less work on your machine is available on the lesscss.org website ) Once you have a less-ready environment, you can start to play around with the armazon code :

1. Working inside the armazon.less file :
   You can create your styles on the same armazon.less file including them just at the bottom of the code, where the following code is located at the end of the file :

   // armazon.css eof
   // --------------------------------------------
   // --------------------------------------------
   // Author's custom styles :
   
   // here you can start writing your css / less rules...
   .rule {
       property : value;
       ...
   }

2. Working outside the armazon.less file :
   You may also create your own .less style sheet, in that case you'll have to include the armazon less file as follows

   @import 'path/to/your/file/armazon.less';

Output Customization. Setting Up the armazon variables

Either way described above, you'll have access to the armazon defined variables that reside on armazon.less and are located at the top of the file. You can change them and assign them the desired values to fit your needs.
These are the set of available less variables :

You can assign different values to the following variables that reside on the armazon.less file :

/* --------------------------------------------
// Variables @less
// ----------------------------------------- */
@armazon-mobile-breakpoint  : 580; /* width to filter mobile devices */
@armazon-desktop-breakpoint : 960; /* width to fire desktop layout filtering */

@armazon-margin                 : 3rem;     /* Global margin */
@armazon-columns-margin         : 3.5;      /* Amount of percent margin on Grid Columns ( Percentual Value ) */
@armazon-columns-tablet-margin  : 2;        /* Percent margin when breaking into Tablet Mode */

@armazon-color-background : #fafbfc; /* Global Background Color */
@armazon-color-foreground : #262524; /* Global Foreground & Text Color */
@armazon-color-primary    : #229def; /* Links and Buttons Color */
@armazon-color-neutral    : #a0a0a0; /* Neutral Grey */

Understanding The Grid

The armazon responsive fluid grid system is based on a 6 columns layout that will shrink and resize itself as the browser or device viewport size changes. The size of the margin between columns can be controled on the armazon.less as stated on the previous section, the variable names called @armazon-columns-margin and @armazon-columns-tablet-margin will set the percentage of the viewport assigned to the space between columns.

Adaptive Grid System

<!-- Two columns, each one is half wide  -->
<div class="row">
	<div class="column-one-half">one-half</div>
	<div class="column-one-half">one-half</div>
</div>

Offsetting

<!-- One column, with a 1/3 left offset.  -->
<div class="row">
    <div class="column-one-third shift-one-third">
        ...
    </div>
</div>

Code Examples

Grid Examples

<!-- armazon grid code examples -->
<div class="row">
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
</div>
<div class="row">
    <div class="column-one-third">one-third</div>
    <div class="column-two-thirds">two-thirds</div>
</div>
<div class="row">
    <div class="column-one-fourth">one-fourth</div>
    <div class="column-three-fourths">three fourths</div>
</div>
<div class="row">
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-third">one-third</div>
</div>
<div class="row">
    <div class="column-five-sixths">five-sixths</div>
    <div class="column-one-sixth">one-sixth</div>
</div>
<div class="row">
    <div class="column-one-fourth">one-fourth</div>
    <div class="column-one-sixth">one-sixth</div>
    <div class="column-one-third">one-third</div>
    <div class="column-one-fourth">one-fourth</div>
</div>

Offset Examples

<div class="row"><div class="column-five-sixths shift-one-sixth">by 1/6</div></div>
<div class="row"><div class="column-three-fourths shift-one-fourth">by 1/4</div></div>
<div class="row"><div class="column-two-thirds shift-one-third">by 1/3</div></div>
<div class="row"><div class="column-one-half shift-one-half">by 1/2</div></div>
<div class="row"><div class="column-one-third shift-two-thirds">by 2/3</div></div>
<div class="row"><div class="column-one-fourth shift-three-fourths">by 3/4</div></div>
<div class="row"><div class="column-one-sixth shift-five-sixths">by 5/6</div></div>

Helper Classes

CSS Classes

Apart of the basic structural grid classes defined on the previous section Understanding The Grid, there's a small set of helper classes :

Media Query Variables

Those have to be used along the CSS @media rule. The best way to structure the use of media queries on a mobile first approach is to create the queries close to the relevant code (which should be the ones used on mobile devices by default). For example, if you want to change the styles for buttons on big devices, paste the non-mobile query code up in the buttons section and style it there :

.button {
    // Common rules for all media
    color: #c00;
    height: 30px;
    font-size: 14px;

    @media @non-mobile {
        // Targeting non-mobile devices
        height: 40px;
        font-size: 18px;
    }
}

The less media queries are located at the top of the armazon.less. You can modify and extend them as you wish.

@mobile     : ~"all and (max-width: @{armazon-mobile-breakpoint}px)";   // Default
@non-mobile : ~"all and (min-width: @{armazon-mobile-breakpoint}px)";   // Matchs both @tablet and @desktop
@tablet     : ~"all and (min-width: @{armazon-mobile-breakpoint}px) and (max-width: @{armazon-desktop-breakpoint}px)";
@desktop    : ~"all and (min-width: @{armazon-desktop-breakpoint}px)";