Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Roll Your Own CSS Framework

Avatar for Mike Aparicio Mike Aparicio
May 07, 2013
Technology
4
220

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
43
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
270
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
250
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Designing for the Web in a Multi-Device World
Avatar for Mike Aparicio peruvianidol
2
140
Road to Responsive
Avatar for Mike Aparicio peruvianidol
4
370
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
530
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
230

Other Decks in Technology

See All in Technology
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
Avatar for Toru Makabe torumakabe
1
200
成立するElixirの再束縛（再代入）可という選択
Avatar for kubell kubell_hr
0
850
キャディでのApache Iceberg, Trino採用事例　-Apache Iceberg and Trino Usecase in CADDi--
Avatar for recruiting@caddi.jp caddi_eng
0
170
活きてなかったデータを活かしてみた話 / Shirokane Kougyou vol 19
Avatar for Sansan R&D sansan_randd
1
410
AIエージェントの継続的改善のためオブザーバビリティ
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
1.4k
Observability infrastructure behind the trillion-messages scale Kafka platform
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
130
doda開発 生成AI元年宣言！自家製AIエージェントから始める生産性改革 / doda Development Declaration of the First Year of Generated AI! Productivity Reforms Starting with Home-grown AI Agents
Avatar for techtekt techtekt
0
200
“社内”だけで完結していた私が、AWS Community Builder になるまで
Avatar for nagisa_53 nagisa53
1
160
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
Avatar for Cygames cygames
0
840
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
Avatar for Yuya Takeyama yuyatakeyama
2
1k
TerraformをSaaSで使うとAzureの運用がこんなに楽ちん！HCP Terraformって何？
Avatar for Minoru Nakabayashi mnakabayashi
0
300
実践！ AIエージェント導入記
Avatar for 森本タカヒロ 1mono2prod
0
140

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.6k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
31
1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
8
660
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
245
12k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.4k

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!