Git Product home page Git Product logo

furatto's Introduction

Gitter Code Climate Issue Count

Furatto is a lightweight & friendly front-end framework got get the job done, created and maintained by Abraham Kuri from Icalia Labs.

To get started, checkout:

Table of contents

Quick start

Using Furatto is extremely easy, we've provided three quick start options:

We recommend you read the Getting started guide for information about the contents, caveats and more.

Bug tracker & feature request

Have a bug or a feature request? Please open a new issue. Before opening any issue, please search for existing issues.

We recommend you to read the version milestiones if you feel like want to collaborate.

Documentation

Furatto's documentation is built using Jekyll and publish thorugh Github pages at http://icalialabs.github.io/furatto/. You should be able to run them locally.

Running documentation locally

  1. You need to install Jekyll or run bundle install
  2. From the root of the project furatto/ run jekyll serve --watch from the command line, this way if you change any file jekyll will generate that for you.
  3. Open http://localhost:9001/furatto and you are good to go.

Jekyll is a great way to work with static pages, we definitely recommend you take a look at the documentation.

Old documentation

We still provide support for version 1 and 2 as it is a big change from one to another, you can visit the old docs V1 and V2.

We encourage you to migrate to version 3 as is a more stable, friendly and extendable version.

Compiling CSS and JavaScript

Furatto V3 now uses Grunt to compile all the Sass code and start working with the framework. Before getting started you need to add the necessary dependencies:

Installing Grunt

From the command line:

  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /furatto directory, then run npm install. npm will look at package.json and automatically install the necessary local dependencies listed there.

If you need to install npm, or you are not quite sure what it is, here is a quick link for you to get started. NPM

Available Grunt tasks

Some of the grunt tasks are:

Build - grunt

This task will build the whole framework, which means, sass compilation, coffeescript compilation, dist directory creation, compression of files and more.

Workflow

We have a very useful workflow to work with Furatto and Grunt:

  1. Run jekyll serve --watch from the command line on the root folder furatto/
  2. In another terminal run grunt watch, which will be pending of any change on any coffeescript or sass file. It will compile everything up and deliver it to Jekyll, which by receiving the change will regenerate the necessary files.

We also include livereload to reload when the watch task is over, for more info refer to the our Gruntfile

Using Rails?

A gem to integrate with Furatto is well maintain by @kurenn, this will help you start coding your front end right away. Here is the gem

Contributing

Please submit all pull requests against a separate branch. Please follow the standard for naming the variables, mixins, etc.

In case you are wondering what to attack, we hnow have a milestone with the version to work, some fixes and refactors. Feel free to start one.

Thanks!

Community

Keep track of new feautres, development issues and community news.

Using Furatto?

We will love to hear wheter you are using Furatto for testing, prototyping or online sites, checkout who is in already here

Heroes

Abraham Kuri

Copyright and license

Code and documentation copyright 2013-2014 Icalia Labs. Code released under the MIT license.

furatto's People

Contributors

gitter-badger avatar jnajera avatar jpillora avatar kurenn avatar redtachyons avatar vic avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

furatto's Issues

SCSS Compile error on Windows

When i try to compile on Sublime Text i have this message error...

error docs.scss (Line 251 of _variables.scss: Invalid CSS after "$screen-xs-max": expected selector or at-rule, was ":              ...")
identical docs.css 
    error font-awesome.scss (Line 251 of _variables.scss: Invalid CSS after "$screen-xs-max": expected selector or at-rule, was ":              ...")
identical font-awesome.css 
    error furatto.scss (Line 251 of _variables.scss: Invalid CSS after "$screen-xs-max": expected selector or at-rule, was ":              ...")
identical furatto.css 
unchanged normalize.scss
[Finished in 1.1s with exit code 1]

Dropdown and divider color

The problem is that the background color of the drowpdown is the same as the divider when I use "$navigation-bar-background", so if I try to use a divider on the dropdown it will not be shown because it is the same color as the background.

It would be cool if you could use separate variables for both things.

DatePicker auto focus

once I click the date input and click clear,then I view another page,when back to the demo page, the DatePicker auto popup.

jPanel

Noticed that if jPanel is active, and you try to re-size the window. The side bar does not close (automatically) causing some ugliness with the nav-bar.

I was able to quick fix this using this code:

$(window).resize(function() {
  if ($(window).width() > 979) {
    jPM.close();
  }
});

Rather than that, thanks for this repo!

Multiple Slider

I want to add 3 sliders in the home site but only one run. How do I run the 3 sliders?

Dropdown interaction

I think the navbar dropdown interaction is better as a click instead of hover, just like Facebook, or Twitter have it. It would be cool if is that way or at least to have an option to choose from hover or click.

The hover also gives a weird experience for mobile users

Static grids doesn't works properly

Hi all,
centered layout with fixed width with may not work properly with the Furatto grid.
I read that this is the same than Bootstrap but it looks buggy.

What i need : A centered 960px layout, width fixed container and spans (row > span*). Responsive or not. [Here is the example from bootstrap]http://getbootstrap.com/2.3.2/examples/hero.html)

See pen :
http://codepen.io/philippebarbosa/full/FehDC
(copy pasted example html from Bootstrap)

Thanks for your help !

Provide a settings file for configuring furatto variables

Here is a quick example:

//Furatto variables

/*=========================================*/

/*$body-background-color: #FFF !default;*/
/*$base-font-color: #333 !default;*/
/*$base-link-color: #0088cc !default;*/
/*$base-font-weight: normal !default;*/
/*$base-font-size: px-to-rems(16) !default;*/
/*$base-font-family: 'Open Sans', 'Helvetica Neue' !default;*/
/*$base-line-height: 1 !default;*/

/*=========================================*/

Waiting for the add on document.

  • Pagination
  • CheckBox and RadioButtons
  • Better select tags
  • Expanding Image Previews
  • Image thumbnails with hover caption effects
  • Icon hover effects
  • Loading Effects
    These are what I need, waiting for the docs. Thanks for your bravo work.

hi

hi i know that the classes for the icons are within the file furatto.css but there are some images for these icons in order to see how the icon is

Button with :active state?

Just my personal opinion.
an active state for buttons may give a better UX
the site will seem more responsive, and it's alive!

When click the button,
people will actually know that the button has been pressed,
so they won't click again.

for your reference
Great framework 👍

FF double scroll bar

Looking at the Furatto site via SpeckyBoy tweet and am interested. But am wondering why I'm seeing 2 vertical scrollbars in FireFox 22 / Windows XP? Slightly disconcerting.

License issues

Twitter holds the attribution?

Copyright and license

Copyright 2012 Twitter, Inc.

Fix the accessibility issue on the checkboxes and radio buttons

falta un poco de consideracion respecto a accessibilidad, los select boxes son imposibles de accesar sin mouse o screen reader, y si no tengo mouse, tambien me es imposible saber si estoy seleccionando un checkbox/radio button por que le quitaron la propiedad de outline y no tiene ningun tipo de cambio en :active. De hecho creoq ue tampoco pude accesar a lso radio buttons sin mouse...

Ajax driven modal

It would be nice to have modals that makes ajax requests from remote urls. Just like what Twitter boostrap has.

If a remote URL is provided, content will be loaded via jQuery's load method and injected into the root of the modal element. If you're using the data api, you may alternatively use the href attribute to specify the remote source. An example of this is shown below:

<a data-toggle="modal" href="remote.html" data-target="#modal">Click me</a>

Provide better text alignment mobile first

It is important to add more alignment classes for names with a mobile first approach by just adding class names, like:

<p class="text-right md-text-center sm-text-center">...</p>

This is a better experience for mobile users and easiers for developers

About the Versions and Forms

Thanks for the Release of V3, but V1,V2 and V3 have too many differences from each other and can not be seamlessly upgraded. Can V3 be upgraded to higher versions seamlessly?
And it seemed that inline forms are removed? How can we create inline forms easily? Thanks.

hi about the licence

hi , my question is that if i can use furatto in a web proyect wich is gonna be on internet

about scripts

hi i was able to notice that u don´t set the script furato.js whitin you website
but you set another file .js

i just need furato.js
or i have to include all these files

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.