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

Roll Your Own CSS Framework

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
100
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
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
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
家のリアーキテクト・リファクタリング
Avatar for Suguru Oki / スー suguruooki
0
150
越境するなら専門用語を使うな高校校歌 / If you wanna cross border, you shouldn't use jargon
Avatar for VTRyo vtryo
0
130
銀行勘定系システムにおける開発プロセス刷新×AIによる環境モダナイゼーション / Development Process Transformation and AI-Driven Environment Modernization
Avatar for 三菱UFJインフォメーションテクノロジー株式会社 muit
0
1.7k
品質と信頼性を地続きにする
Avatar for gr1m0h grimoh
0
230
おい、エージェントを使って終わらせろ
Avatar for nwiizo nwiizo
0
200
GoにおけるFFIのこれまでとこれから
Avatar for Masaaki Goshima goccy
5
2.9k
データ界隈LT祭 第1回LT登壇
Avatar for タロウ taromatsui_cccmkhd
1
1.3k
Genieを崇めよ
Avatar for camay kameitomohiro
0
120
Snowflakeで実現する全社横断の顧客の声（VOC）分析・活用基盤@Snowflake World Tour Tokyo 2026
Avatar for yuto16 yuto16
0
210
10分で知る最近のOmarchy
Avatar for komagata komagata
0
310
Spring BootからQuarkusへの移行
Avatar for Tatsuya Miyazaki tatsuya1bm
2
110
アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App
Avatar for matsuji matsuji
1
840

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Amusing Abliteration
Avatar for ianozsvald ianozsvald
1
300
It's Worth the Effort
Avatar for 3n 3n
188
29k
The B2B funnel & how to create a winning content strategy
Avatar for Katarina Dahlin katarinadahlin
PRO
1
520
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
230
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
320
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Paper Plane (Part 1)
Avatar for Katie Cordina Lindsey katiecoart
PRO
1
11k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
12k

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!