// -----------
-// Default grid sizing
-// -------------------
-@gridColumns: 12;
-@gridColumnWidth: 60px;
-@gridGutterWidth: 20px;
-
-@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-@gridTotalWidth: @gridRowWidth;
-
-
-// Columns and offseting mixins
-// ----------------------------
-.columns(@columns: 1) {
- //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
-}
-.offset(@columns: 1) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
-}
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
- float: left;
- margin-left: @gridGutterWidth;
-}
-
// Grid rows and columns
// ---------------------
.row {
.clearfix();
}
+// Columns and offseting mixins
+// ----------------------------
+.columns(@columns: 1) {
+ //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
+}
+.offset(@columns: 1) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+}
+// Necessary grid styles for every column to make them appear next to each other horizontally
+.gridColumn() {
+ float: left;
+ margin-left: @gridGutterWidth;
+}
+
// CSS3 PROPERTIES
+// GRID SYSTEM VARIABLES
+// --------------------------------------------------
+
+@gridColumns: 12;
+@gridColumnWidth: 60px;
+@gridGutterWidth: 20px;
+@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+@gridTotalWidth: @gridRowWidth;
+
+
+
// COMPONENT VARIABLES
// --------------------------------------------------