A quick tour on Furatto, basic usage, examples and more.
Furatto is developed in Sass, which is a CSS meta-language that helps you write cleaner and more elegant CSS so that is easier to maintain over time without the headaches of pure CSS. On top of the styling, we've written some Javascript plugins, developed in Coffeescript so that is easier to read and mantain along the way, and which are going to improve user interactions on multiple screen sizes.
Many changes were made from version 1, but don't worry we still have support for it. You can view the old documentation or download it as a package.
Once you've downloaded and unzip the compressed folder, you should see something like this:
furatto/
├── css/
│ ├── furatto.css
│ ├── font-awesome.css
│ ├── docs.css
│ ├── examples.css
│ ├── normalize.css
├── examples /
│ ├── basic_setup.html
│ ├── carousel.html
│ ├── landing.html
│ ├── login.html
│ ├── thumbnails.html
│ ├── assets /
├── js/
│ ├── furatto.js
│ ├── furatto.min.js
│ ├── furatto-demo.js
│ ├── jquery.js
│ ├── shell-rainbow.min.js
├── scss /
│ ├── docs.scss
│ ├── font-awesome.scss
│ ├── furatto.scss
│ ├── normalize.scss
│ ├── furatto /
├── img/
│ ├── 1.png
│ ├── ...
└── fonts/
├── meteocons-webfont.eot
├── meteocons-webfont.svg
├── meteocons-webfont.ttf
├── meteocons-webfont.woff
└── fontawesome
├── fontawesome-webfont.eot
├── fontawesome-webfont.svg
├── fontawesome-webfont.ttf
├── fontawesome-webfont.woff
└── FontAwesome.otf
This is the basic structure of Furatto: it contains the compiled versions of css(furatto.*.css) and javascript(furatto.*.js) for a quick drop-in to almost any web project. Fonts Awesome is included by default in the css file.
jQuery based plugins
Note that all the furatto plugins require jQuery to be included. It is included by default.
You can copy and paste the HTML below to get started:
<!DOCTYPE html>
<html>
<head>
Furatto
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/furatto.min.css" />
</head>
<body>
<div class="panels">
<div class="panel panel-inverse panel-left">
</div>
</div>
<div class="panel-content">
Hello Furatto!
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/furatto.min.js"></script>
</body>
</html>
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.
We included the normalize.css and furatto.min.css in the head tag. You can use wheter the minified or full version of the compiled CSS.
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.
The layout is built using two main absolute elements panels and panel-content in order to provide the left drawer slide effect on small devices.
The javascript plugins provided by Furatto use jQuery, so it is necessary for you to include jQuery in your layout. jQuery v2.0.2 is located under the assets/js directory.
An assets directory with the necessary css, js, fonts and images is included in the furatto.zip file you downloaded.
IE caveats
Some CSS3 properties may not display correctly(border-radius), as well as hardware acceleration CSS transitions.
1. Add the compass-rails gem to the Gemfile
group :assets do
gem 'compass-rails'
end
2. After including the compass-rails gem, you need to add the furatto gem to your application's Gemfile
gem 'compass-rails'
3. Run the bundle command to install it
bundle install
4. Add Furatto to your asset pipeline
app/assets/stylesheets/application.css
*= require furatto
app/assets/javascripts/application.js
//= require furatto
The license section style was based on the one on Bootstrap.