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
4
220

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
42
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
270
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
250
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
140
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
370
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
530
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
230

Other Decks in Technology

See All in Technology
RubyOnRailsOnDevin+α / DevinMeetupJapan#2
Avatar for ginkouno ginkouno
0
370
比起獨自升級 我更喜歡 DevOps 文化 <3
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
160
(非公式) AWS Summit Japan と 海浜幕張 の歩き方 2025年版
Avatar for Kosuke ENOMOTO coosuke
PRO
1
240
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
Avatar for MADOX madoxten
13
7.6k
キャディでのApache Iceberg, Trino採用事例　-Apache Iceberg and Trino Usecase in CADDi--
Avatar for recruiting@caddi.jp caddi_eng
0
110
Workflows から Agents へ ~ 生成 AI アプリの成長過程とアプローチ~
Avatar for Belong inc. belongadmin
3
150
ObsidianをMCP連携させてみる
Avatar for ttnyt8701 ttnyt8701
2
110
AIにどこまで任せる？実務で使える(かもしれない)AIエージェント設計の考え方
Avatar for Har1101 har1101
3
1.1k
VCpp Link and Library - C++ breaktime 2025 Summer
Avatar for Akiko Kawai harukasao
0
160
Snowflake Intelligenceで 実現できるノーコードAI活用
Avatar for tak takumimukaiyama
1
220
Javalinの紹介
Avatar for Nobuhiro Oto notoh
0
100
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
330

Featured

See All Featured
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Done Done
Avatar for chrislema chrislema
184
16k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.3k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.8k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
41
7.3k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k

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!