Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Roll Your Own CSS Framework

Avatar for Mike Aparicio Mike Aparicio
May 07, 2013
Technology
4
230

Roll Your Own CSS Framework

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

Avatar for Mike Aparicio

Mike Aparicio

May 07, 2013
Tweet

More Decks by Mike Aparicio

See All by Mike Aparicio
Templating: Eleventy's Superpower
Avatar for Mike Aparicio peruvianidol
0
56
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
300
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
270
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
250
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
150
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
380
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
550
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
250
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
240

Other Decks in Technology

See All in Technology
Jakarta Agentic AI Specification - Status and Future
Avatar for Reza Rahman reza_rahman
0
110
Database イノベーショントークを振り返る/reinvent-2025-database-innovation-talk-recap
Avatar for emi emiki
0
230
障害対応訓練、その前に
Avatar for coconala_engineer coconala_engineer
0
100
たまに起きる外部サービスの障害に備えたり備えなかったりする話
Avatar for Sohei Iwahori egmc
0
290
20251218_AIを活用した開発生産性向上の全社的な取り組みの進め方について / How to proceed with company-wide initiatives to improve development productivity using AI
Avatar for yayoi_dd yayoi_dd
0
140
Kiro を用いたペアプロのススメ
Avatar for Taiki Sugawara taikis
1
420
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
1
1.6k
1人1サービス開発しているチームでのClaudeCodeの使い方
Avatar for おーしろ noayaoshiro
2
430
ChatGPTで論⽂は読めるのか
Avatar for Spatial AI Network spatial_ai_network
11
29k
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
Avatar for hoshi7_n hoshi7_n
1
400
寫​了​幾年​ Code，​然後​呢？​軟體​工程師​必須重新​認識​的​ DevOps
Avatar for Cheng-Wei Chen cheng_wei_chen
1
1.5k
生成AI時代におけるグローバル戦略思考
Avatar for Takaaki Yayoi taka_aki
0
200

Featured

See All Featured
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
0
9
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
77
5.2k
Lessons Learnt from Crawling 1000+ Websites
Avatar for Charles Meaden charlesmeaden
0
930
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
2
57
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
13
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
1k

Transcript

  1. Ro You Own CSS FRAMEWORK Mike Aparicio User Interface Engineer,

    Groupon [email protected] @peruvianidol

  2. DESIGNERS?

  3. DEVELOPERS?

  4. FREE FOOD?

  5. Has this ever happened to you?

  6. None

  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/

  13. None
  14. None
  15. None
  16. None

  17. http://lovebootstrap.com/

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None

  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/

  33. None
  34. None

  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

  40. None
  41. None
  42. None
  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. None
  52. None
  53. None
  54. None
  55. None

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

  57. None
  58. None

  59. NOT US

  60. US

  61. Mike Aparicio @peruvianidol [email protected] http://idol.pe/ryo-css THANK YOU!