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
45
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
540
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
DatabricksにOLTPデータベース『Lakebase』がやってきた！
Avatar for Takeru Ino inoutk
0
110
Sansanのデータプロダクトマネジメントのアプローチ
Avatar for SansanTech sansantech
PRO
0
160
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
Avatar for jackal5647 aaguide
0
210
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
Avatar for 株式会社カオナビ kaonavi
10
4.7k
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
27k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
Avatar for iwamot iwamot
PRO
2
150
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
Avatar for yut yu_kod
1
280
Operating Operator
Avatar for Jun Kokatsu shhnjk
1
590
Zero Data Loss Autonomous Recovery Service サービス概要
Avatar for oracle4engineer oracle4engineer
PRO
2
7.8k
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
Avatar for Takashi Kawasaki espresso3389
0
130
What’s new in Android development tools
Avatar for Yuki Anzai yanzm
0
320
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
Avatar for ar_tama ar_tama
7
1.1k

Featured

See All Featured
Embracing the Ebb and Flow
Avatar for Simon Collison colly
86
4.7k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
95
6.1k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
656
60k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
34
3.1k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.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!