Roll Your Own CSS Framework

How to customize or create your own CSS framework. Presented at Geekfest on May 7, 2013.

Transcript

1. Ro You 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!