SASS Named Breakpoints

grid.sass

// Simple Responsive Grid
// based on Chris Eppstein's SASS responsive layouts
// http://chriseppstein.github.com/blog/2011/08/21/responsive-layouts-with-sass/

// -------------------------------------------------------------- //
// DESKTOP - LARGE - %desktop-large ----------------------------- //
// -------------------------------------------------------------- //
// 1024px and up to 1280px at which it becomes fixed

@media all and (min-width: 1024px)
  %desktop-large-column
    float: left
    // border: 1px solid blue
  
  @for $grid from 1 through 12
    %desktop-large-#{$grid}
      @extend %desktop-large-column
      width: 8% * $grid




// -------------------------------------------------------------- //
// DESKTOP SMALL / HORIZ iPAD - %desktop-small------------------- //
// -------------------------------------------------------------- //
// 640px to 1024px

@media all and (min-width: 640px) and (max-width: 1024px)
  %desktop-small-column
    float: left
    // border: 1px solid red
  
  @for $grid from 1 through 12
    %desktop-small-#{$grid}
      @extend %desktop-small-column
      width: 8% * $grid




// -------------------------------------------------------------- //
// VERTICAL iPAD / LARGE MOBILE - %mobile-half  ----------------- //
// -------------------------------------------------------------- //
// 520px to 768px - still 2 col but twice as large column width

//@media all and (min-width: 520px) and (max-width: 768px)
@media all and (max-width: 768px)
  %mobile-half
    float: left
    // border: 1px solid green

  @for $grid from 1 through 12
    %mobile-half-#{$grid}
      @extend %mobile-half
      width: 16% * $grid



// -------------------------------------------------------------- //
// ALL MOBILE - %mobile-full ------------------------------------ //
// -------------------------------------------------------------- //
// 0 to 520px - full width, no columns
@media all and (max-width: 520px)
  %mobile-full
    float: none
    width: 100%
    // border: 1px solid purple

mediaqueries.sass

// -------------------------------------------------------------- //
// MEDIA QUERIES  ----------------------------------------------- //
// -------------------------------------------------------------- //

// Where a class needs to be edited based on a breakpoint, include:
// @include breakpoint(large/medium/small/tiny) and pick the size you want to edit
// then indent a line after that and put whatever edited styles.
// see .grid_container below for example.

@mixin breakpoint($point)

    @if $point == large
        @media (max-width: 1280px)
            @content

    @if $point == medium
        @media (max-width: 1024px)
            @content

    @if $point == small
        @media (max-width: 768px)
            @content

    @else if $point == tiny
        @media (max-width: 520px)
            @content

structure.sass

// -------------------------------------------------------------- //
// SIDEBAR ------------------------------------------------------ //
// -------------------------------------------------------------- //


#sidebar
    @extend %desktop-large-3
	@extend %desktop-small-3
	@extend %mobile-half-3
	@extend %mobile-full
	padding: 27px 0 4% 0
	@include grid-margin-right(4%)


// -------------------------------------------------------------- //
// MAIN CONTENT ------------------------------------------------- //
// -------------------------------------------------------------- //
#main_content
    @extend %desktop-large-9
	@extend %desktop-small-9
	@extend %mobile-half-3
	@extend %mobile-full
	padding: 50px 0 4% 0

// full_width class for when there is no sidebar
#main_content.full_width
	@extend %desktop-large-12
	@extend %desktop-small-12
	@extend %mobile-half-6
	@extend %mobile-full


// etc etc etc