Skip to content

Instantly share code, notes, and snippets.

@christophengelmayer
Created March 18, 2013 15:24
Show Gist options
  • Save christophengelmayer/5187960 to your computer and use it in GitHub Desktop.
Save christophengelmayer/5187960 to your computer and use it in GitHub Desktop.
SASS port of Contao responsive Grid
/**
* Contao Open Source CMS
*
* Copyright (C) 2005-2013 Leo Feyer
*
* Sass port by Christoph Engelmayer
*
* @package Core
* @link https://contao.org
* @license http://www.gnu.org/licenses/lgpl-3.0.html LGPL
*/
/**
* SASS variables
*/
$gridColumns: 12;
$gridMargin: 10px;
$wrapperWidthDesktop: 960px;
$min-widthDesktop: 980px;
$wrapperWidthTablet: 744px;
$min-widthTablet: 768px;
/**
* Make the wrapping container 960 pixel wide
*/
#wrapper {
width: $wrapperWidthDesktop;
margin:0 auto;
}
/**
* Set the default margin of the grid columns
*/
*[class*="grid"] {
float:left;
display:inline;
margin-right: $gridMargin;
margin-left: $gridMargin;
}
/**
* Add a default margin to all content elements, so they align with the floatet
* ones (otherwise you would have to add "grid12" to every element)
*/
.mod_article>* {
margin-left: $gridMargin;
margin-right: $gridMargin;
}
/**
* Remove the margin from floated articles, because the margin is already
* applied to its content elements (see above)
*/
$mod_article-grids: ();
@for $i from 1 through $gridColumns{
$mod_article-grids: join($mod_article-grids, unquote(".mod_article.grid#{$i} "), comma);
}
#{$mod_article-grids}{
margin-left:0;
margin-right:0;
}
/**
* Automatically clear the floats in the main column, so you do not have to add
* a clearing div to each article
*/
#main .inside {
overflow:hidden;
}
/**
* Grid column widths
*/
@for $i from 1 through $gridColumns{
.grid#{$i} { width:( $wrapperWidthDesktop/$gridColumns)*$i - 2*$gridMargin; }
}
/**
* Floated articles can be 20 pixel wider (no margin)
*/
@for $i from 1 through $gridColumns{
.mod_article.grid#{$i} { width:( $wrapperWidthDesktop/$gridColumns)*$i; }
}
/**
* Default offset widths
*/
@for $i from 1 through $gridColumns{
.offset#{$i} { margin-left:( $wrapperWidthDesktop/$gridColumns)*$i + $gridMargin; }
}
/**
* Reduce the overall width and the width of the grid columns if the screen
* width is less than 980px (e.g. on a portrait tablet)
*/
@media (min-width:$min-widthTablet) and (max-width: $min-widthDesktop - 1)
{
/**
* Reduce the overall width
*/
#wrapper {
width:$wrapperWidthTablet;
}
/**
* Reduce the grid column widths
*/
@for $i from 1 through $gridColumns{
.grid#{$i} { width: ($wrapperWidthTablet/$gridColumns)*$i - 2 * $gridMargin }
}
/**
* Floated articles can be 20 pixel wider (no margin)
*/
@for $i from 1 through $gridColumns{
.mod_article.gird#{$i} { width: ($wrapperWidthTablet/$gridColumns)*$i }
}
/**
* Reduce the offset widths
*/
@for $i from 1 through $gridColumns{
.offset#{$i} { margin-left:( $wrapperWidthTablet/$gridColumns)*$i + $gridMargin }
}
}
/**
* Remove all floats and fixed widths if the screen width is less than 768
* pixel (e.g. on a mobile phone)
*/
@media (max-width: $min-widthTablet - 1)
{
/**
* Remove the overall width
*/
#wrapper {
width:auto;
}
/**
* Show all columns underneath each other
*/
*[class*="grid"],.inside>*[class*="grid"] {
float:none;
display:block;
width:auto;
margin:0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment