How to customize or create your own CSS framework.

1. Roll Your Own
CSS FRAMEWORK
Mike Aparicio
User Interface Engineer, Groupon
maparicio@groupon.com
@peruvianidol

2. DESIGNERS?

3. DEVELOPERS?

4. FREE FOOD?

5. Has this ever happened to you?

7. font-family?
border-radius?
font-size?
line-height?
margin?
linear-gradient?
text-shadow?
box-shadow?
width?
height?

8. I’m out!

9. CSS FRAMEWORKS
Twitter Bootstrap
(http://twitter.github.io/bootstrap/)
Zurb Foundation
(http://foundation.zurb.com/)
Gumby Framework
(http://gumbyframework.com/)
Inuit
(http://inuitcss.com/)
Yaml
(http://www.yaml.de/)
Kube
(http://imperavi.com/kube/)
Groundworks
(http://groundwork.sidereel.com/)
Skeleton
(http://www.getskeleton.com/)
Workless
(http://workless.ikreativ.com/)
... and many more
http://usablica.github.io/front-end-frameworks/compare.html

10. http://www.appfeed.net/

11. http://fontcustom.com/

12. http://fiveaday.co/

17. http://lovebootstrap.com/

29. CSS PREPROCESSORS
•SASS (http://sass-lang.com/)
•LESS (http://lesscss.org/)
•Stylus (http://learnboost.github.io/stylus/)

30. CSS PREPROCESSORS
•Variables
•Operations
•Mixins
•Nesting

31. CodeKit
Mac - $25
(http://incident57.com/codekit/)
Prepros
Win - Open Source
(http://alphapixels.com/prepros/)
Koala
Mac/Win/Linux - Open Source
(http://koala-app.com/)
Scout
Mac/Win - Open Source
(http://mhs.github.io/scout-app/)

32. http://smacss.com/

35. http://necolas.github.io/normalize.css/

36. http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1

37. http://www.gridlover.net/

38. http://losttype.com/

39. http://www.fontsquirrel.com/tools/webfont-generator

56. http://www.csszengarden.com/

59. NOT US

60. US

61. Mike Aparicio
@peruvianidol
maparicio@groupon.com
http://idol.pe/ryo-css
THANK YOU!