Furatto – A Flat Front-end Framework

Furatto is a very simple, flat, fast and powerful front-end framework made for rapid web development. Furatto is created and maintained by Abraham Kuri from Icalia Labs. It is based on Twitter Bootstrap & Foundation.

furatto-framework

Features

Furatto 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 also included by default.

Here is the basic structure of Furatto below:

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

Browser Support

  • Chrome (Mac, Windows, iOS, and Android)
  • Safari (Mac, iOS)
  • FireFox (Mac, Windows, and Android)
  • Internet Explorer (Some issues may present)
  • Opera (Mac, Windows)

Basic Usage

You can kick-start your project with this basic markup:

<!DOCTYPE html>
  <html>
    <head>
      <title>Furatto</title>
      <link rel="stylesheet" href="assets/css/normalize.css" />
      <link rel="stylesheet" href="assets/css/furatto.min.css" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
    </head>
    <body>
      <!-- You better not move this -->
      <div class="panels">
        <div class="panel panel-inverse panel-left">
        </div>
      </div>
      <!-- Seriously don't move the code above -->
      <div class="panel-content">
        <!-- All your content goes here -->
        <h1>Hello Furatto!</h1>
      </div>
      <script src="assets/js/jquery.js"></script>
      <script src="assets/js/furatto.min.js"></script>
    </body>
  </html>