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
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
290
クラウド食堂とは?
hiyanger
0
120
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
200
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
620
OPENLOGI Company Profile
hr01
0
60k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
IAMのマニアックな話2025
nrinetcom
PRO
4
650
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
290
Active Directory攻防
cryptopeg
PRO
8
5.5k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Site-Speed That Sticks
csswizardry
4
410
The Invisible Side of Design
smashingmag
299
50k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cult of Friendly URLs
andyhume
78
6.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Music & Morning Musume
bryan
46
6.4k
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!