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
20
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
250
CSS Layout and Responsive Design
peruvianidol
0
230
Intro to HTML and CSS
peruvianidol
2
220
Designing for the Web in a Multi-Device World
peruvianidol
2
120
Road to Responsive
peruvianidol
4
360
Fun with Flexbox
peruvianidol
4
510
Prototyping with HTML and CSS
peruvianidol
2
220
Building a Dream Team
peruvianidol
0
170
Other Decks in Technology
See All in Technology
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
240
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
180
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
840
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.5k
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
170
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
120
On Your Data を超えていく!
hirotomotaguchi
2
660
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
1
110
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
440
Databricks における 『MLOps』
databricksjapan
2
170
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Faster Mobile Websites
deanohume
299
30k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Scaling GitHub
holman
457
140k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
How GitHub (no longer) Works
holman
304
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
The Invisible Side of Design
smashingmag
294
49k
Become a Pro
speakerdeck
PRO
11
4.5k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Practical Orchestrator
shlominoach
182
9.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!