Roll Your Own
CSS FRAMEWORK
Mike Aparicio
User Interface Engineer, Groupon
maparicio@groupon.com
@peruvianidol
DESIGNERS?
DEVELOPERS?
FREE FOOD?
Has this ever happened to you?
font-family?
border-radius?
font-size?
line-height?
margin?
linear-gradient?
text-shadow?
box-shadow?
width?
height?
I’m out!
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
http://www.appfeed.net/
http://fontcustom.com/
http://fiveaday.co/
http://lovebootstrap.com/
CSS PREPROCESSORS
•SASS (http://sass-lang.com/)
•LESS (http://lesscss.org/)
•Stylus (http://learnboost.github.io/stylus/)
CSS PREPROCESSORS
•Variables
•Operations
•Mixins
•Nesting
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/)
http://smacss.com/
http://necolas.github.io/normalize.css/
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
http://www.gridlover.net/
http://losttype.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://www.csszengarden.com/
NOT US
US
Mike Aparicio
@peruvianidol
maparicio@groupon.com
http://idol.pe/ryo-css
THANK YOU!

Roll Your Own CSS Framework