/*

# A Simple Responsive CSS Grid Based on Creatix CSS

May 2016  
Edwardson Tan

## Acknowledgement ##
[Creatix CSS](http://www.creatix.org/creatix-css/) is by Karin Soika and Ralph Soika. They've made [their stylesheets](https://github.com/laluluny/creatix-css/) available on a Creative Commons Share Alike license [CC BY-SA](http://creativecommons.org/licenses/by-sa/4.0/)

[Normalize.css](https://necolas.github.io/normalize.css/) is by Nicolas Gallagher and Jonathan Neal. Their stylesheet is provided on an [MIT License](https://opensource.org/licenses/MIT).

## Features ##
* All columns widths are specified as percentages.
* Multi-column layout automatically changes to a single column for small viewport devices and resized broswers on desktops.
* Coded in SCSS with gutter margin defined as a variable and is therefore adjustable to suit page/site requirements.

## Requirements ##
[Sass](http://sass-lang.com/) compiler is necessary to create the CSS. (I use [Koala](http://koala-app.com/).)

## Procedure ##
Download normalize.css into css folder/directory. Compile scss file and import normalize.css and any other css files and then minify the combined css. [Koala](http://koala-app.com/) does the scss compilation, import of external files, and css minfication automatically when configured correctly.

## References ##
* [Yet Another CSS Grid System](https://github.col-om/sans0r/yacgs)
* [Understanding CSS Grid Systems from the Ground Up](https://www.sitepoint.com/understanding-css-grid-systems/)

## License ##
[CC BY-SA](http://creativecommons.org/licenses/by-sa/4.0/) or [MIT License](https://opensource.org/licenses/MIT), whichever is the appropriate one (hey, I'm no legal eagle)

*/

@import url(et-init.css);

/*! Responsive grid CSS based on https://github.com/laluluny/creatix-css/ */

/* it is essential to use <div class='row'> to encapsulate elements with class='col-x' in order to terminate css float */
.row {
	display: block;
	width: 100%;
	clear: both;
	&:after {
		display: block;
		margin: 0;
		padding: 0;
		clear: both;
		content: " ";
		font-size: 0;
	}
}


/* Change this gutter size as required. Must be specified as percentage. A value of zero removes gutters completely. 
Bear in mind that column width decreases as gutter width increases. */
$gutter: 0.5%;

/* Change this padding for left and right sides of each column as required. Suggest it be specified as em. Because the border-box model is used, column widths do not change as padding values change. */
$padding: 0em;


[class*="col-"] {
	margin: 0 $gutter; 
	padding: 0 $padding;
	display: inline-block;
	float: left;
	position: relative;
	overflow: auto;
}


/* The col-x class specifies how wide the element will be, wherein width as percentage = (x/12)*100 - (gutter*2) */
.col-1 {width: 1/12 * 100% - $gutter * 2}
.col-2 {width: 2/12 * 100% - $gutter * 2}
.col-3 {width: 3/12 * 100% - $gutter * 2}
.col-4 {width: 4/12 * 100% - $gutter * 2}
.col-5 {width: 5/12 * 100% - $gutter * 2}
.col-6 {width: 6/12 * 100% - $gutter * 2}
.col-7 {width: 7/12 * 100% - $gutter * 2}
.col-8 {width: 8/12 * 100% - $gutter * 2}
.col-9 {width: 9/12 * 100% - $gutter * 2}
.col-10 {width: 10/12 * 100% - $gutter * 2}
.col-11 {width: 11/12 * 100% - $gutter * 2}
.col-12 {width: 12/12 * 100% - $gutter * 2}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */


/* if a spacer to the left of the column is necessary then use left-x to specify number of column widths as padding */
.left-1 {left: 1/12 * 100%}
.left-2 {left: 2/12 * 100%}
.left-3 {left: 3/12 * 100%}
.left-4 {left: 4/12 * 100%}
.left-5 {left: 5/12 * 100%}
.left-6 {left: 6/12 * 100%}
.left-7 {left: 7/12 * 100%}
.left-8 {left: 8/12 * 100%}
.left-9 {left: 9/12 * 100%}
.left-10 {left: 10/12 * 100%}
.left-11 {left: 11/12 * 100%}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */


/* change to single column layout for small viewports */
@media screen and (max-width: 640px) {
	[class*="col-"] {
		width: 100% - $gutter * 2;
	}

	[class*="left-"] {
		left: 0;
	}
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */



/* Temporary files for visual confirmation of the boundaries of each col-x
Delete or comment out when testing is done */
/* .col-1 {border: 3px dashed black}
.col-2 {border: 3px dashed brown}
.col-3 {border: 3px dashed red}
.col-4 {border: 3px dashed orange}
.col-5 {border: 3px dashed yellow}
.col-6 {border: 3px dashed green}
.col-7 {border: 3px dashed blue}
.col-8 {border: 3px dashed violet}
.col-9 {border: 3px dashed gray}
.col-10 {border: 3px dashed lime}
.col-11 {border: 3px dashed gold}
.col-12 {border: 3px dashed silver}
 */
 /* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */


 /* .right-1 {right: 1/12 * 100%}
.right-2 {right: 2/12 * 100%}
.right-3 {right: 3/12 * 100%}
.right-4 {right: 4/12 * 100%}
.right-5 {right: 5/12 * 100%}
.right-6 {right: 6/12 * 100%}
.right-7 {right: 7/12 * 100%}
.right-8 {right: 8/12 * 100%}
.right-9 {right: 9/12 * 100%}
.right-10 {right: 10/12 * 100%}
.right-11 {right: 11/12 * 100%} */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */