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
49
Lessons From the Coupon Factory: Design Systems at Scale
Avatar for Mike Aparicio peruvianidol
3
290
CSS Layout and Responsive Design
Avatar for Mike Aparicio peruvianidol
0
260
Intro to HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
250
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
540
Prototyping with HTML and CSS
Avatar for Mike Aparicio peruvianidol
2
240
Building a Dream Team
Avatar for Mike Aparicio peruvianidol
0
240

Other Decks in Technology

See All in Technology
JAWS UG AI／ML #32 Amazon BedrockモデルのライフサイクルとEOL対応/How Amazon Bedrock Model Lifecycle Works
Avatar for quiver quiver
1
110
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
Avatar for okiyuki okiyuki99
6
1.4k
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
Avatar for Preferred Networks pfn
PRO
4
890
オブザーバビリティが育むシステム理解と好奇心
Avatar for maru maruloop
3
1.6k
アノテーション作業書作成のGood Practice
Avatar for Cierpa & Company cierpa0905
PRO
0
260
AWS DMS で SQL Server を移行してみた/aws-dms-sql-server-migration
Avatar for emi emiki
0
260
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
Avatar for Makky makky_tyuyan
0
140
Amazon Athena で JSON・Parquet・Iceberg のデータを検索し、性能を比較してみた
Avatar for ShigeruOda shigeruoda
1
200
DMMの検索システムをSolrからElasticCloudに移行した話
Avatar for 小山凌太 hmaa_ryo
0
230
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
Avatar for Jumpei Sakatsu saka2jp
0
120
GPUをつかってベクトル検索を 扱う手法のお話し ~NVIDIA cuVSとCAGRA~
Avatar for fshuhe fshuhe
0
220
AIを使ってテストを楽にする
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
260

Featured

See All Featured
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1032
470k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
140
34k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.1k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k

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!