Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Roll Your Own CSS Framework

Avatar for Mike Aparicio Mike Aparicio
May 07, 2013
Technology
250
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
110
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
340
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
300
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
300
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
410
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
600
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
280
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
300

Other Decks in Technology

See All in Technology
E2Eってつらくないですか？E2Eの管理コストを下げる手段とその実践
Avatar for Kosei Akaboshi (akaboshinit) akaboshinit
6
2.8k
re:Invent の去年のスケジュールを公開します！
Avatar for Kazuki Miura miu_crescent
PRO
0
120
AI秘書と毎日働くのはもう当たり前。開発以外の業務に足りない機能をどう埋める？
Avatar for みのるん minorun365
PRO
4
2k
日本AIベンチャーレポート2026
Avatar for KentaroFujii kentarofujii
0
260
AI Search (Foundry IQ) におけるRAGデータの準備と配置
Avatar for Ryoma Nagata ryomaru0825
1
100
"計画的無茶振り"を通してAIネイティブ世代の新人を育てる
Avatar for subroh_0508 subroh0508
1
130
書き手が人でもAIでも正しくなる道、 SREを埋め込んだDeveloper Platform / tech drivers day8
Avatar for mekka chmikata
4
850
あなたのDartコードは丸見えかもしれない ～reFlutterで暴くFlutterアプリの中身と多層防御～
Avatar for ZOZO Developers zozotech
PRO
0
710
「作れる」と「リリースできる」の間にあったもの── PdMを外して見えた、PdMがやるべき仕事/Buildable ≠ Shippable: What Removing the PM Taught Me About the PM’s Job
Avatar for Yappli Developers yappli_developers
0
390
素人でもできた！AIを使った短編小説創作入門
Avatar for delhi09 delhi09
PRO
0
250
今から始めるAWS環境の暗号移行 - ポスト量子時代に備える
Avatar for sato4mi sato4mi
0
130
アクセラレーターで実現するServiceNow活用の高速化 / ServiceNow World Forum 2026
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
100

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.5k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.8k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
230
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.2k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
450
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
460
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
510
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
7.1k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
210k

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!