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
240
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
97
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
330
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
590
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
290

Other Decks in Technology

See All in Technology
自作お家AIエージェントｽﾀｯｸﾁｬﾝFWで困っている所紹介
Avatar for 74th(Atsushi Morimoto) 74th
0
130
When Platform Engineering Meets GenAI
Avatar for suci sucitw
0
200
AWS Security Hub CSPMの成功・失敗体験
Avatar for cm-usuda-keisuke cmusudakeisuke
0
590
AWS Summit 2026で見えたSIerにとっての Amazon Quickの位置づけ
Avatar for まふりる maf_0521
0
110
技術・能力を向上する原理原則 #きのこセッションa #きのこ2026
Avatar for bash0C7 bash0c7
0
140
OTel × Datadog で 「AI活用」を計測し、改善に繋げる
Avatar for Yuki Shiho shihochan
2
1.1k
「軸足」は 固定しなくていい - 熱量と強みで描く、しなやかなキャリアの形
Avatar for KAKEHASHI kakehashi
PRO
1
280
いまさら聞けない「仕様駆動開発入門」 〜AI活用時代の開発プロセスを考える〜
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
2
230
初めてのDatabricks勉強会
Avatar for Takaaki Yayoi taka_aki
2
190
どうして今サーバーサイドKotlinを選択したのか
Avatar for Nealle nealle
0
100
攻撃者がいなくてもAIエージェントはインシデントを起こす
Avatar for Nomizo Nomizo nomizone
0
140
スタートアップにAmazon EKSは早すぎる？ マルチプロダクト戦略を加速する Platform Engineeringの実践 / Is Amazon EKS Too Soon for Startups? Practical Platform Engineering to Accelerate a Multi-Product Strategy
Avatar for elmo elmodev09
1
1.9k

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
240
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
7k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.3k
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
220
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
980
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.6k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
210
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
150
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
220
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
220

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!