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
26
Lessons From the Coupon Factory: Design Systems at Scale
peruvianidol
3
260
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
520
Prototyping with HTML and CSS
peruvianidol
2
230
Building a Dream Team
peruvianidol
0
200
Other Decks in Technology
See All in Technology
入門 KRR
donkomura
0
110
O'Reilly Superstream: Building a RAG App to Chat with Your Data
pamelafox
0
120
KubeVirt Networking ONIC 2024
orimanabu
3
420
LeSSはスクラムではない!?LeSSにおけるスクラムマスターの振る舞い方とは / Scrum Master Behavior in LeSS
toma_sm
0
200
【shownet.conf_】放送局とShowNetが共創する、未来の放送システム ~Media over IP 特別企画の裏側~
shownet
PRO
0
350
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
2
240
軽いノリで"自動化"に取り組んではいけないという話
tetsuyaooooo
1
490
プロダクト開発の貢献をアピールするための目標設計や認知活動 / Goal design and recognition activities to promote product development contributions.
oomatomo
5
810
リスクから学ぶKubernetesコンテナセキュリティ/k8s-risk-and-security
mochizuki875
1
320
All your memory are belong to… whom?
ennael
PRO
0
660
入門 バックアップ
ryuichi1208
18
6.7k
入社半年(合計1年)でGoogle Cloud 認定を全冠した秘訣🤫
risatube
1
180
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
Designing for Performance
lara
604
68k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Testing 201, or: Great Expectations
jmmastey
38
7k
GitHub's CSS Performance
jonrohan
1030
450k
Visualization
eitanlees
143
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
31
2.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
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!