Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Roll Your Own CSS Framework

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

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

More Decks by Mike Aparicio

See All by Mike Aparicio
Templating: Eleventy's Superpower
Avatar for Mike Aparicio peruvianidol
0
100
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
330
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
290
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
170
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
400
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
590
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
290

Other Decks in Technology

See All in Technology
トヨタ⽣産⽅式(TPS)⼊⾨
Avatar for Recruit recruitengineers
PRO
3
660
グローバル基準のSREは、運用現場でどう機能したか：成熟度アセスメントの実践 ／ SRE NEXT 2026
Avatar for sorawatanabe sorawatanabe
0
140
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
4
24k
[ChatGPT Work LT]事務作業が苦手な人のための バックオフィスの「半」自動化
Avatar for chimaki chimaki_iot
0
250
Flutterをカメラで動かしたかった話
Avatar for ソニー株式会社 sony
1
130
サイバー捜査員研修（後半）
Avatar for Nomizo Nomizo nomizone
1
820
QAエンジニア起点で進める、SmartHRにおける信頼性向上について
Avatar for kaomi kaomi_wombat
1
120
Issue設計から始める仕様駆動開発 / 20260731 Mizuki Hirata
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
150
AI駆動開発は個人技からチーム戦へ：組織でAIを使いこなすための実践設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
480
Webアクセシビリティ入門 2026
Avatar for Recruit recruitengineers
PRO
3
470
新しい SLO が良い感じにハマっている話
Avatar for kaita z63d
5
2.2k
【CEDEC2026】『GRANBLUE FANTASY: Relink - Endless Ragnarok』のバトル制作事例 ～最高のキャラゲーを目指して～
Avatar for Cygames, Inc. cygames
PRO
0
230

Featured

See All Featured
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
340
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
260
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
360
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.5k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
240
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
290
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
480
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
470
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k

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!