search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Additional Styles #9

Closed wbprice closed 11 years ago

wbprice commented 11 years ago

Hi, I'd like to use unsemantic for a mobile site and have a beginner question regarding where to put additional styles. Having used other projects like Bones and Skeleton, which provided the frameworks of SASS files for each size breaking point to be filled out, I'd expect to do the same here.

To sum it up, should I be creating my own SASS/CSS files, or should I be filling out the existing SASS files? If the latter, where do I need to be making the changes? Again, totally a beginner question, but would appreciate some guidance.

nathansmith commented 11 years ago

You could do something like this (in your own Sass partial)…

$media-mobile: 767px !default
$media-desktop: 1025px !default

@media screen and (max-width: $media-mobile)
  // Styles for mobile here

@media screen and (min-width: $media-mobile) and (max-width: $media-desktop)
  // Styles for tablet here

@media screen and (min-width: $media-desktop)
  // Styles for desktop here

These are the same breakpoints that Unsemantic uses…

https://github.com/nathansmith/unsemantic/blob/master/assets/sass/partials/_unsemantic-grid-responsive-tablet.sass

wbprice commented 11 years ago

Awesome, up and running. Thanks for your help.