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
220
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
48
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
280
CSS Layout and Responsive Design
peruvianidol
0
260
Intro to HTML and CSS
peruvianidol
2
240
Designing for the Web in a Multi-Device World
peruvianidol
2
140
Road to Responsive
peruvianidol
4
370
Fun with Flexbox
peruvianidol
4
540
Prototyping with HTML and CSS
peruvianidol
2
240
Building a Dream Team
peruvianidol
0
240
Other Decks in Technology
See All in Technology
Findy Team+のSOC2取得までの道のり
rvirus0817
0
350
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
450
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
190
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
310
SOC2取得の全体像
shonansurvivors
1
400
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
120
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.9k
How to achieve interoperable digital identity across Asian countries
fujie
0
120
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
940
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
270
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
How to Think Like a Performance Engineer
csswizardry
27
2k
Making Projects Easy
brettharned
119
6.4k
Facilitating Awesome Meetings
lara
56
6.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Rails Girls Zürich Keynote
gr2m
95
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Transcript
Ro You Own CSS FRAMEWORK Mike Aparicio User Interface Engineer,
Groupon
[email protected]
@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
[email protected]
http://idol.pe/ryo-css THANK YOU!