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

Roll Your Own CSS Framework

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
62
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
310
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
160
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
380
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
560
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
260
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
250

Other Decks in Technology

See All in Technology
[CV勉強会@関東 World Model 読み会] Orbis: Overcoming Challenges of Long-Horizon Prediction in Driving World Models (Mousakhan+, NeurIPS 2025)
Avatar for abemii_ abemii
0
110
GSIが複数キー対応したことで、俺達はいったい何が嬉しいのか？
Avatar for Makky12 smt7174
3
150
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
210
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
220
Cosmos World Foundation Model Platform for Physical AI
Avatar for Takuya MINAGAWA takmin
0
800
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
320
AI駆動開発を事業のコアに置く
Avatar for 鬼澤輔 tasukuonizawa
1
140
広告の効果検証を題材にした因果推論の精度検証について
Avatar for ZOZO Developers zozotech
PRO
0
160
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
110
生成AIを活用した音声文字起こしシステムの2つの構築パターンについて
Avatar for Kazuki Miura miu_crescent
PRO
2
180
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
Avatar for みのるん minorun365
4
180
We Built for Predictability; The Workloads Didn’t Care
Avatar for Michael Stahnke stahnma
0
140

Featured

See All Featured
Between Models and Reality
Avatar for mayunak mayunak
1
180
Leo the Paperboy
Avatar for Maya Tellez mayatellez
4
1.4k
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
320
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
Avatar for Sara Fernández Carmona sarafernandez
1
1.3k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
200
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
140
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
140
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
68
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k

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!