Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Roll Your Own CSS Framework
Search
Mike Aparicio
May 07, 2013
Technology
4
210
Roll Your Own CSS Framework
How to customize or create your own CSS framework. Presented at Geekfest on May 7, 2013.
Mike Aparicio
May 07, 2013
Tweet
Share
More Decks by Mike Aparicio
See All by Mike Aparicio
Templating: Eleventy's Superpower
peruvianidol
0
31
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
260
CSS Layout and Responsive Design
peruvianidol
0
240
Intro to HTML and CSS
peruvianidol
2
230
Designing for the Web in a Multi-Device World
peruvianidol
2
130
Road to Responsive
peruvianidol
4
360
Fun with Flexbox
peruvianidol
4
530
Prototyping with HTML and CSS
peruvianidol
2
230
Building a Dream Team
peruvianidol
0
220
Other Decks in Technology
See All in Technology
開発組織を進化させる!AWSで実践するチームトポロジー
iwamot
2
500
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
790
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
540
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
210
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
IoTシステム開発の複雑さを低減するための統合的アーキテクチャ
kentaro
1
130
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.5k
LINE NEWSにおけるバックエンド開発
lycorptech_jp
PRO
0
340
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.5k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
400
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Building an army of robots
kneath
303
45k
It's Worth the Effort
3n
184
28k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
176
9.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
Ro You Own CSS FRAMEWORK Mike Aparicio User Interface Engineer,
Groupon maparicio@groupon.com @peruvianidol
DESIGNERS?
DEVELOPERS?
FREE FOOD?
Has this ever happened to you?
None
font-family? border-radius? font-size? line-height? margin? linear-gradient? text-shadow? box-shadow? width? height?
I’m out!
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
http://www.appfeed.net/
http://fontcustom.com/
http://fiveaday.co/
None
None
None
None
http://lovebootstrap.com/
None
None
None
None
None
None
None
None
None
None
None
CSS PREPROCESSORS •SASS (http://sass-lang.com/) •LESS (http://lesscss.org/) •Stylus (http://learnboost.github.io/stylus/)
CSS PREPROCESSORS •Variables •Operations •Mixins •Nesting
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/)
http://smacss.com/
None
None
http://necolas.github.io/normalize.css/
http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1
http://www.gridlover.net/
http://losttype.com/
http://www.fontsquirrel.com/tools/webfont-generator
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
None
http://www.csszengarden.com/
None
None
NOT US
US
Mike Aparicio @peruvianidol maparicio@groupon.com http://idol.pe/ryo-css THANK YOU!