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

Roll Your Own CSS Framework

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
86
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
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
400
Fun with Flexbox
Avatar for Mike Aparicio peruvianidol
4
580
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
270
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
270

Other Decks in Technology

See All in Technology
セキュリティ対策、何からはじめる？ CloudNative環境の脅威モデリングと リスク評価実践入門 #cloudnativekaigi
Avatar for varu3 varu3
5
1k
ESP32 IoTを動かしながらメモリ使用量を観測してみた話
Avatar for ZOZO Developers zozotech
PRO
0
150
障害対応のRunbookは作った、でも本当に動くの？ AWS FIS で EKS の AZ 障害を再現してみた
Avatar for Hiroki Takatsuka tk3fftk
0
110
JaSSTに関わることで変わった人生観 #jasstnano
Avatar for Makky makky_tyuyan
0
140
R&D 祭 2024 UE5で絵コンテ・作画の制作支援ツールをつくる話
Avatar for OLM Digital R&D olmdrd
PRO
0
190
Cortex(Code) を ML モデルの 精度改善サイクルに組み込む.pdf
Avatar for Yuki Fushinuki oimo23
0
210
"うちにはまだ早い"は本当？ ─ 小さく始めるPlatform Engineering入門
Avatar for Haruka Sakihara harukasakihara
7
640
生成AI時代に信頼性をどう保ち続けるか - Policy as Code の実践
Avatar for akitok akitok_
1
500
インプロセスQAのための要因から捉えるプロジェクトリスクマネジメントnano #1 開発リソース効率状態への対処 #jasstnano
Avatar for barus_qa_dev barus_qa
0
190
全社統制を維持しながら現場負担をどう減らすか〜プラットフォームチームとセキュリティチームで進めたSecurity Hub活用によるAWS統制の見直し〜/secjaws-security-hub-custom-insights
Avatar for みずほリサーチ&テクノロジーズ株式会社 先端技術研究部 mhrtech
1
590
RedmineをAIで効率的に使う検証
Avatar for Takayuki Yoshioka yoshiokacb
0
150
Directions Asia 2026 | Beyond Buildable AI Agents: Let’s Visualize Partner Value in the AI Era
Avatar for Dynamics Ryo ryoheig0405
0
110

Featured

See All Featured
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
140
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
24k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Visualization
Avatar for Eitan Lees eitanlees
151
17k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.1k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
1
2.6k

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!