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
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
980
Databricks向けJupyter Kernelでデータサイエンティストの開発環境をAI-Readyにする / Data+AI World Tour Tokyo After Party
Avatar for GENDA genda
1
520
Reinforcement Fine-tuning 基礎〜実践まで
Avatar for Morita ch6noota
0
190
AI駆動開発における設計思想 認知負荷を下げるフロントエンドアーキテクチャ/ 20251211 Teppei Hanai
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
420
re:Inventで気になったサービスを10分でいけるところまでお話しします
Avatar for Yuuki Yamashita yama3133
1
120
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
360
AWSを使う上で最低限知っておきたいセキュリティ研修を社内で実施した話 ~みんなでやるセキュリティ~
Avatar for maimyyym maimyyym
2
1.7k
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
Avatar for hawky the miscellaneous hawkymisc
2
200
コミューンのデータ分析AIエージェント「Community Sage」の紹介
Avatar for Yusuke Fukasawa fufufukakaka
0
510
学習データって増やせばいいんですか？
Avatar for fumihiko takahashi ftakahashi
2
460
大企業でもできる！ボトムアップで拡大させるプラットフォームの作り方
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
1
820
打 造 A I 驅 動 的 G i t H u b ⾃ 動 化 ⼯ 作 流 程
Avatar for Bo-Yi Wu appleboy
0
350

Featured

See All Featured
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
13k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
286
14k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
76
5.2k

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!