Introduction to the mobile first framework called furatto.

1. Furatto
A GUIDE FOR BETTER DEVELOPMENT
@kurenn

2. Responsive websites today
are hard to develop, is like…

4. We build for many screen sizes…

5. 480px240px
540px 600px
320px
900px768px 960px
1024px 1280px
∞px

6. And then we have the tech stack and
many solutions…

7. GitSASS
HAML LESS
VIM
BoilerplateBrowser CSS
Coffeescript HTML
jQuery

8. There is just much out there….

9. That’s why I built my own framework…
Furatto
http://icalialabs.github.io/furatto/

10. It’s just a start point to…
You are the one who craft the software

11. Just out of the box…
A reset for your html markup
A set of common elements, buttons, navigation…
A small, neat grid…
Edge features for the wild people…

12. So what’s the big deal…

13. +
DEVELOP & BUILD

14. Gives you the flexibility to easily extend !
functionality as much as you desire

16. Before you start coding…

17. Use it with SASS

18. Setup an automated workflow
http://gruntjs.com/

19. Read the f%&$* manual
http://icalialabs.github.io/furatto/

20. A bit of best practices…

21. Don’t go crazy and add a !
.button class to a div

22. Use the columns inside rows

23. Don’t use col-12 inside a row, it is not
really necessary

24. Use rows to separate content

25. Don’t use <br> tags

26. Follow the source

27. Don’t bend Furatto, extend it

28. ThankYou

29. http://icalialabs.github.io/furatto/
http://sass-lang.com/
http://compass-style.org/
http://gruntjs.com/