Roll Your Own CSS Framework
Upcoming SlideShare
Loading in...5
×
 

Roll Your Own CSS Framework

on

  • 1,301 views

How to customize or create your own CSS framework.

How to customize or create your own CSS framework.

Statistics

Views

Total Views
1,301
Views on SlideShare
1,279
Embed Views
22

Actions

Likes
0
Downloads
7
Comments
0

3 Embeds 22

https://twitter.com 15
https://www.linkedin.com 5
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Roll Your Own CSS Framework Roll Your Own CSS Framework Presentation Transcript

  • Roll Your OwnCSS FRAMEWORKMike AparicioUser Interface Engineer, Grouponmaparicio@groupon.com@peruvianidol
  • DESIGNERS?
  • DEVELOPERS?
  • FREE FOOD?
  • Has this ever happened to you?
  • font-family?border-radius?font-size?line-height?margin?linear-gradient?text-shadow?box-shadow?width?height?
  • I’m out!
  • CSS FRAMEWORKSTwitter 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 morehttp://usablica.github.io/front-end-frameworks/compare.html
  • http://www.appfeed.net/
  • http://fontcustom.com/
  • http://fiveaday.co/
  • http://lovebootstrap.com/
  • CSS PREPROCESSORS•SASS (http://sass-lang.com/)•LESS (http://lesscss.org/)•Stylus (http://learnboost.github.io/stylus/)
  • CSS PREPROCESSORS•Variables•Operations•Mixins•Nesting
  • CodeKitMac - $25(http://incident57.com/codekit/)PreprosWin - Open Source(http://alphapixels.com/prepros/)KoalaMac/Win/Linux - Open Source(http://koala-app.com/)ScoutMac/Win - Open Source(http://mhs.github.io/scout-app/)
  • http://smacss.com/
  • 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
  • http://www.csszengarden.com/
  • NOT US
  • US
  • Mike Aparicio@peruvianidolmaparicio@groupon.comhttp://idol.pe/ryo-cssTHANK YOU!