Overview

Get into Furatto bare bones structure, including the Mobile First approach we took.

HTML 5 doctype

Motivated by the mobile first approach as well as some HTML elements and CSS may not work as expected, it is highly recommended that you use the HTML5 doctype.

            
  <!DOCTYPE html>
  <html lang="en">
  ...
  </html>

Mobile First

In order to add responsiveness on your web site, you must add the correct meta tag inside the <head> of each of your HTML files.

            
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

You can disable the zooming capabilities on mobile devices by adding maximun-scale=1 and user-scalable=no, this way your site will feel a bit more like a native application. Use it with care, as it is not always the best approach.

            
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximun-scale=1, user-scalable=no" />

Global settings

Furatto applies some basic global settings for, typography, links, and body itself. Some of these:

Remove margin and padding on body.
Set a default background to the body.
Set a base font face (Open Sans), font size and base line height.
Reset default link behavior via setting a color and apply underline on :hover.

Check out the _typography.scss and _base.scss files for more information.

Normalize

In order to improve cross-browser rendering, we use Normalize.css which is an open-source project by Nicolas Gallagher and Jonathan Neal as an alternative for HTML 5 resets.

Google Maps support

We provide a small solution for you when integrating Furatto and Google Maps, just by adding the gmap class to the div element you are applying the map and you should be ready to go.

Check out the solution at Github

Search for documentation