Basic Setup
Our markup layout is pretty straight forward, and the example below shows a basic HTML template for you to start. We encourage you to go to the examples or the app starter kits section and look at some starting points.
<!DOCTYPE html>
<html lang="en">
<head>
<!--includes meta tags, title and more header definitions-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<title>A page title</title>
<!-- Furatto core CSS -->
<link href="/dist/css/furatto.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello Furatto</h1>
<!--includes javascript at the bottom so the page loads faster-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="/dist/js/furatto.js"></script>
</body>
</html>
Meta Viewport tag
This is used to make sure smaller devices use the correct width as the viewporth width, as well as it prevents the zoom in/out gesture. Also includes edge IE support.
CSS
We included the normalize.css and furatto.css in the head tag. You can use wheter the minified or full version of the compiled CSS.
Javascript
The JS is linked up before the closing tag , in order to improve performance, as well as it contains all the necessary plugins and initializers to get up and running.
Plugins
The javascript plugins provided by Furatto use jQuery, so it is necessary for you to include jQuery in your layout. We invoke it through the google CDN.
Font
The default font family for Furatto is Open Sans which we included on the <head> tag of the document in order to allow parallel downloads of the assets. And you should too.