Getting Started

Whether you are using Scss or CSS, it is really easy to start a project and get things done in no time. Seriously no time...

Download Furatto Install via Bower

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. It also integrates Compass to provide a cleaner set of CSS3 rules.

This is the easiest way to go to get started. The CSS version will get you right into the hacking and start coding wheter is a simple or a complex site.

As Rails developers, at Icalia Labs we build our front end on top of Furatto. To make life easier we provide a gem that integrates perfectly with Rails. You can follow the guide here. We are working on building starter kits in different frameworks.

Try Furatto at codepen

Want to take Furatto for a quick spin?, we have provided an example at codepen with the most basic elements for you to give it a try.

Take me there!

What's inside?

Within the download, Furatto comes with a dist, examples and src directories based on a logical common pattern which makes the acces faster and easier for you to start hacking right away.

Precompiled Furatto

The dist directory from your download, includes the compiled versions of Furatto in 2 versions, production and development, for a quick drop-in to almost any web project.

Follow the source

We also provide a src directory on which you have access to the sass files for an advance configuration. This will let you compile your own version of Furatto and take it to the next level.

Components and Structure

Navigation

Web is all about following links. Navigation is essential when building a website, in Furatto there are many ways to accomplish this, a navigation bar, off screen navigation and many more..

Kick ass Grid

Simple and neat grid to help you build your next mobile web application. Furatto provides support for nested columns and stacked them on small devices.

Buttons

Yeah we know plain links are bored, so we made them awesome with buttons. We include color variations, differente sizes, and powerful mixins to bring your own to life, you little Frankenstein.

Responsive utilities

Hidding things on small devices is important to improve user experience. Furatto provides class names to hide or show the elements you want for different screen sizes.

...and there is more...much more

Sassy examples...

Psst! here are few examples of what you can do with Furatto in no time, seriously!

App kits

We are making great efforts to provide starting app kits for different frameworks such as Rails, Nodejs and more. If you want to help us make this you can always do it through a pull request. We'll be happy to include it.

Check the kits

Was this starting guide helpful?

We are always improving not just the core of Furatto, but good and high quality documentation is important. We appreciate all the feedback we receive on how to make it better and more understandable.

We can make this better, so we are building a forum where you can post your doubts about the framework, or if you have any trouble with the documentation. For now you can open an issue at Github.

Let me know when the forum is ready

License

It requires you to:

Include the license and copyright notice in your works

It allows you to:

Freely download and use Furatto, in whole or in part, for personal, private, company internal, or commercial purposes
Use Furatto in packages or distributions that you create
Modify the source code
Grant a sublicense to modify and distribute Furatto to third parties not included in the license

You cannot:

Hold the authors and license owners liable for damages as Furatto is provided without warranty
Redistribute any piece of Furatto without proper attribution
Hold the creators or copyright holders of Furatto liable

The full Furatto license is located in the project repository for more information.

Search for documentation