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
230
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
73
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
320
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
280
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
260
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
390
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
570
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
260

Other Decks in Technology

See All in Technology
Cortex Codeでデータの仕事を全部Agenticにやりきろう！
Avatar for harry gappy50
0
350
"まず試す"ためのDatabricks Apps活用法 / Databricks Apps for Early Experiments and Validation
Avatar for NTT docomo Business nttcom
1
230
AgentCore RuntimeからS3 Filesをマウントしてみる
Avatar for Har1101 har1101
3
400
New CBs New Challenges
Avatar for Yosuke Suzuki ysuzuki
1
170
さくらのクラウドでつくるCloudNative Daysのオブザーバビリティ基盤
Avatar for Taisuke Okamoto a.k.a BigBaBy b1gb4by
0
150
生成AI時代のエンジニア育成 変わる時代と変わらないコト
Avatar for starfish719 starfish719
0
500
Cortex Code君、今日から内製化支援担当ね。
Avatar for あべ coco_se
0
320
【PHPカンファレンス小田原2026】Webアプリケーションエンジニアにも知ってほしい オブザーバビリティ の本質
Avatar for Futoshi Endo fendo181
0
550
Oracle Cloud Infrastructure(OCI)：Onboarding Session(はじめてのOCI/Oracle Supportご利⽤ガイド)
Avatar for oracle4engineer oracle4engineer
PRO
2
17k
AI時代に新卒採用、はじめました/junior-engineer-never-die
Avatar for dmnlk dmnlk
0
230
Databricksで構築するログ検索基盤とアーキテクチャ設計
Avatar for サイバーセキュリティクラウド cscengineer
0
130
AI前提とはどういうことか
Avatar for どすこい daisuketakeda
0
170

Featured

See All Featured
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
53k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
Navigating Weather and Climate Data
Avatar for Ryan Abernathey rabernat
0
160
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
14k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
870
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
440
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k

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!