How to customize or create your own CSS framework. Presented at Geekfest on May 7, 2013.
Ro You OwnCSS FRAMEWORKMike AparicioUser Interface Engineer, Groupon[email protected]@peruvianidol
View Slide
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 FRAMEWORKSTwitter 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 morehttp://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
CodeKitMac - $25(http://incident57.com/codekit/)PreprosWin - Open Source(http://alphapixels.com/prepros/)KoalaMac/Win/Linux - Open Source(http://koala-app.com/)ScoutMac/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[email protected]http://idol.pe/ryo-cssTHANK YOU!