SASS port of Contao responsive Grid

responsive.scss

/**
 * 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;
	}
}