Grid

Furatto comes with fully responsive fluid system which scales up to 12 columns. It is generated using predefined classes for more semantic layouts, as well as mixins. Below 767px viewports, the columns become fluid and stack vertically.

The twelve columns are distributed with a equitable width and margin, which make it very easy to build dashboard. It is important to put the columns on a row div class element.

          
  

    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
    
col-1
  
  

    
col-2
    
col-4
    
col-1
    
col-3
    
col-2
  
          
          

Building the markup

For a simple three column layout just add the row class name and add the correct number of col-* columns. The col-* class name for the columns comes from the 1 to the 12 as is a 12 column grid.

                
  

    
...
    
...
    
...
  
                
              

Nesting columns

When comes to nesting Furatto helps you add multiple column div elements. You just have to add a row class into an existing col-* column. The nested rows should also match 12 columns, you can see it as if is another row element.

              
  

    

      
I'm a col-9 class column
      

        

          I'm a col-6 column 
        
        

          I'm a col-6 column 
        
      
    
    

      
I'm a col-3 class column
    
  
             
            

Typography

To keep Furatto as clean and extensible as possible, we did not add any typographic styles over what's on Normalize. This means that you get many elements, such as headings, lists, which style is easy to override.

Headings

Headings from 1 to 6. Font size decreases from ~44px to ~13px.

              
  
...
  
...
  
...
  
...
  
...
  
...
              
            

Body copy

Furatto comes with global default settings font-size is 16px with a line-height of 20px. In addition to that the body receives a 10px margin-bottom.

                 
  <p>...</p>
                 
               

Light body copy

In order to hightlight a text

                 
  
...
                 
              

Sassy

It is really easy to change this default settings, which are setup on _variables.scss as $base-font-size and $base-line-height. We play around with these two values to set other values around the Furatto backbone, so you can customize them and see how the framework adapts.

Small text

For small inline texts or block of texts, you can use the <small> tag, which is 85% the size of the parent.

                 
  This is a small text, probably a good use is to highlight text.
                 
              

Bold text

To give a bold to a text, you can use the <strong>.

                 
  This is a snippet to bold this chunk of text.
                 
              

Italic text

To emphasize text you should use the em tag.

                 
  This is a snippet to emphasize a text.
                 
              

Alignment classes

In Furatto is really easy to align text with the alignment classes.

                 
  
Left text
  
Center text
  
Right text
                 
              

Emphasis classes

Convenient emphasis classes for a more meaningful end.

                 
  
Lorem ipsum dolor sit amet, consectetur adipisicing eli.
  
Lorem ipsum dolor sit amet, consectetur adipisicing eli.
  
Lorem ipsum dolor sit amet, consectetur adipisicing eli.
  
Lorem ipsum dolor sit amet, consectetur adipisicing eli.
  
Lorem ipsum dolor sit amet, consectetur adipisicing eli.
                 
              

Lists

List comes in many flavors, ordered lists, unordered lists. Thanks to Normalize all these elements have a basic styling and cross-browser consistency. you can extend them in your application.

Unordered

                 
  

    
...
  
                 
              

Ordered

                 
  

    
...
  
                 
              

Unstyled

Remove the list-style and the left margin.

                 
  

     
...
  
                 
              

Inline

Place all list items into a single line with display: inline-block and some padding added.

                 
  

     
...
  
                 
              

Definition lists

A list of terms with their associated descriptions.

                 
  

    
...
    
...
  
                 
              

Blockquotes

For quoting content you can use use the blockquoute with the content-quote class name.

                 
  

    
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            
  
          
                 
              

Tables

To style an HTML table, just add the table class name. The class normalizes the table and makes it look very clean. The reason to add the class name, is to prevent other plugins such as calendars and date pickers to break.

Condensed table

A condensed table just look a little bit smaller by just reducing the padding on the headers a table data tags. Just add the table-condensed class name.

Striped table

Large tables are easier to read when some rows are more visible than others. To do so just add the 'table-striped' classname to the table. Just add the table-striped.

Bordered table

In order to add vertical and horizontal borders to all cells in a table, just add the table-bordered class name.

Responsive tables

Thanks to the Zurb guys we have responsive tables ready to rock, just add the responsive classname to the table

Emphasis classes

You can have colorful table rows by adding the correct class name to the tr element. Just a gotcha, don't add the table-striped class name.

Forms

Every elemento on a form receives a default behavior. All input, textarea with a input-block have a 100% with. Wrap labels and inputs in a form-fields class name for btter spacing.

              
  

    

      Email:
      
    
    

      Password:
      
    
    

      
        Check me out!
      
    
    

      Select
      
        Choose the languaue
        Ruby
        Python
        NodeJS
      
    
    
  
              
              

Inline form

To get an inline form, it is as simple as call inline-form. Probably you want to use this as a search form for example.

Horizontal form

To get an horizontal form, it is as simple as call horizontal-form.

              
  
  
    

      Email:
      
    
    

      Password:
      
    
    

      
    
  
              
              

Inputs

All native support for inputs are included in Furatto, including for all the HTML 5 types: datetime, datetime-local, date, month, month, time, week, number, email, url, search, tel, color.

Input states

Furatto includes several input states to use them in the right cases.

Input focus

The outline styles are removed and a blue border is applied in its place for :focus

Input disabled

For disableing and input or make it not editable just add the disabled attribute.

Validation states

Furatto comes with validation styles, for error, warning, and success input forms. Any label, input or hint text will get the validation style.

              
  

    

      Success!
      
      This is correct!
    
  
  

    

      Warning!
      
      This is a warning!
    
  
  

    

      Error!
      
      This is a error!
    
  
              
              

Textarea

You can add the input-block class name to make the text area be 100% width and just change the rows attribute as necessary.

Input sizes

To change the width for an input, we added helpful class names for you to play around. The width of the input is limited by the parent container.

Help text

Block level help text for inputs.

 
                
  
  This is a helping block for an input, which breaks into a new line.
                
              

Buttons

It is really simple to create a button, just add the btn class name to any a or button element.

You can use any of the buttons flavors furatto provides.

                
  Button 
  Button 
  Button 
  Button 
  Button 
  Button 
  Button 
  Button 
  Link 
                
              

Button sizes

Need bigger or smaller buttons?, Furatto comes with 5 different sizes to meet your needs.

                
  Mini
  Small
  Large
  Extra large
  Extra extra large
                
              

Block level buttons

                
  Block level button
  Block level button
                
              

Disable buttons

You can mark a button as disabled just by adding the btn-disabled class or the disabled attribute.

                
  Disabled button
  Disabled button
                
              

Alpha buttons

Furatto provides an alpha version for each button, like the one you see in the landing. It is necessary to add a background color on the button container. Just hover the buttons to see the effect running.

  Alpha default button
  Alpha success button
  Alpha info button
  Alpha funky button
  Alpha danger button
  Alpha warning button
  Alpha highlight button
              

Buttons with icons

 
              
  
     
     Checkout
   
   
     
     Settings
   
              
             

Images

Images become responsive by just adding the img class name. Just keep in mind the rounded corners on IE 8.

iOS devices

Whenever you want the circular image to be also polaroid, you will have to wrap the img element into a div with class name of img-frame and add img-circular to this element.

Helpful classes

Simple and functional classes on behavior tweaks.

.pull-left

Floats an element to the left.

              
  
...
              
            

.pull-right

Floats an element to the right.

              
  
...
              
            

.clearfix

Clears the float on any element.

              
  
...
              
            

.text-uppercase

Transforms the text to uppercase.

              
  
...
              
            

Responsive utilities

Furatto provides class names to accelerate the mobile-friendly development, by showing or hiding the content by device managed by media queries.

Available classes

Furatto provides some responsive utilities for you to hide or show content depending on the screen size is rendering. Credits go to Bootstrap.