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
45
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
270
CSS Layout and Responsive Design
peruvianidol
0
250
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
230
Other Decks in Technology
See All in Technology
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
220
Lakebaseを使ったAIエージェントを実装してみる
kameitomohiro
0
140
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
AI専用のリンターを作る #yumemi_patch
bengo4com
6
4.3k
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
200
What’s new in Android development tools
yanzm
0
320
OSSのSNSツール「Misskey」をさわってみよう(右下ワイプで私のOSCの20年を振り返ります) / 20250705-osc2025-do
akkiesoft
0
170
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
170
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Speed Design
sergeychernyshev
32
1k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Faster Mobile Websites
deanohume
307
31k
Automating Front-end Workflow
addyosmani
1370
200k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
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!