diff --git a/.gitignore b/.gitignore
index 496ee2c..d825d8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-.DS_Store
\ No newline at end of file
+.DS_Store
+.project
diff --git a/960gs-plugin.less b/960gs-plugin.less
new file mode 100644
index 0000000..6778b43
--- /dev/null
+++ b/960gs-plugin.less
@@ -0,0 +1,186 @@
+/* --------------------------------------------------------------------------------------
+* 960 Grid System by Nathan Smith
+*
+* Adapted by Sylvain Balbous (https://github.com/sylbal) for H5BP-Less plugin
+*
+* ------------------------------------------------------------------------------
+* GRID 960gs => syntax
+* ------------------------------------------------------------------------------
+* - #960gs => namespace, do not call directly, use .make or one of the predefined grid makers
+* - .make => #960gs > .make(colNumber, gutterWidth, gridMargin)
+* - .12 => #960gs > .grid.12();
+* - .16 => #960gs > .grid.16();
+* - .24 => #960gs > .grid.24();
+* - .row => #960gs > .grid.row();
+* - .col => #960gs > .grid.col(colSpan);
+* - .alpha => #960gs > .grid.alpha();
+* - .omega => #960gs > .grid.omega();
+* - .prefix => #960gs > .grid.prefix(colSpan);
+* - .suffix => #960gs > .grid.suffix(colSpan);
+* - .push => #960gs > .grid.push(colSpan);
+* - .pull => #960gs > .grid.pull(colSpan);
+*
+*/
+
+#960gs {
+ /************************************
+ * Make
+ *
+ * @what?: Defines the base variables needed
+ * for the 960 grid system.
+ *
+ * @params: @colnum, default = 16
+ * @colgutter, default = 20
+ * @margin, default = 10
+ ************************************/
+ .make(@colnum: 16, @colgutter: 20, @margin: 10) {
+ @col-width: (960px - (@colgutter * @colnum)) / @colnum;
+ @gutter-width: 0px + @colgutter;
+ @grid-margin: 0px + @margin;
+ margin-left: auto;
+ margin-right: auto;
+ width: 960px;
+ }
+
+ /************************************
+ * 12
+ *
+ * @what?: Predefined 12 cols grid maker
+ *
+ ************************************/
+ .12() {
+ .make(12);
+ }
+
+ /************************************
+ * 16
+ *
+ * @what?: Predefined 16 cols grid maker
+ *
+ ************************************/
+ .16() {
+ .make(16);
+ }
+
+ /************************************
+ * 24
+ *
+ * @what?: Predefined 24 cols grid maker
+ *
+ ************************************/
+ .24() {
+ .make(24, 10);
+ }
+
+ /************************************
+ * Row
+ *
+ * @what?: Defines an element as a row.
+ * clears all clearfixes all columns
+ * directly inside.
+ *
+ ************************************/
+ .row() {
+ .clearfix();
+ display: block;
+ /*
+ width: 100% - @col-gutter-percent;
+ overflow-y: visible;
+ */
+ margin-left: @grid-margin;
+ margin-right: @grid-margin;
+ }
+
+ /************************************
+ * Col
+ *
+ * @what?: Defines an element as a column.
+ * Sets the width depending on the
+ * supplied arguments and the width
+ * set in .grid960gs()
+ *
+ * @params: @colSpan, default = 1
+ *
+ ************************************/
+ .col(@colSpan: 1) {
+ display: inline;
+ float: left;
+ width: 0px + (@col-width * @colSpan) + (@gutter-width * (@colSpan - 1));
+ margin-left: 0px + (@gutter-width/2);
+ margin-right: 0px + (@gutter-width/2);
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+
+ /************************************
+ * alpha
+ *
+ * @what?: Removes left margin
+ *
+ ************************************/
+ .alpha() {
+ margin-left: 0;
+ }
+
+ /************************************
+ * omega
+ *
+ * @what?: Removes rigt margin
+ *
+ ************************************/
+ .omega() {
+ margin-right: 0;
+ }
+
+ /************************************
+ * prefix
+ *
+ * @what?: Adds padding before col
+ *
+ * @params: @colSpan, default = 1
+ *
+ ************************************/
+ .prefix(@colSpan: 1) {
+ padding-left: 0px + (@colSpan * (@col-width + @gutter-width));
+ }
+
+ /************************************
+ * suffix
+ *
+ * @what?: Adds padding after col
+ *
+ * @params: @colSpan, default = 1
+ *
+ ************************************/
+ .suffix(@colSpan: 1) {
+ padding-right: 0px + (@colSpan * (@col-width + @gutter-width));
+ }
+
+ /************************************
+ * push
+ *
+ * @what?: Pushes cols on the right
+ *
+ * @params: @colSpan, default = 1
+ *
+ ************************************/
+ .push(@colSpan: 1) {
+ position:relative;
+ left: 0px + (@colSpan * (@col-width + @gutter-width));
+ }
+
+ /************************************
+ * pull
+ *
+ * @what?: Pulls cols on the left
+ *
+ * @params: @colSpan, default = 1
+ *
+ ************************************/
+ .pull(@colSpan: 1) {
+ position:relative;
+ left: 0px - (@colSpan * (@col-width + @gutter-width));
+ }
+
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 0a14399..dc58b21 100755
--- a/README.md
+++ b/README.md
@@ -7,11 +7,16 @@
HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language.
Read more about LESS: http://lesscss.org/
- HelpLess also comes bundled with [less-boilerplate](https://github.com/m6tt/less-boilerplate), which compiles LESS to CSS using the boilerplate build tool. I have tried to make HelpLess as all-encompasing as possible with support for dynamic grids and page starter themes as well as all the css3 features I could think of. HelpLess has an invisible footprint until you call a mixin so if you import HelpLess but don't use it, it will not increase your compiled file size.
+ HelpLess also comes bundled with [html5-boilerplate-less](https://github.com/sylbal/html5-boilerplate-less), which compiles LESS to CSS using the boilerplate build tool. I have tried to make HelpLess as all-encompasing as possible with support for dynamic grids and page starter themes as well as all the css3 features I could think of. HelpLess has an invisible footprint until you call a mixin so if you import HelpLess but don't use it, it will not increase your compiled file size.
+
+ Most of the work here was made by Matt Woodfield and all his credits are present. I have forked the project as it seems to be slepping since 2012.
+ My major contribution (so far) is the implementation of the [960 Grid System](http://960.gs). I have choose to implement it as an external plugin to give more flexibility.
+ To offer another alternative, I have included another plugin to use [Frameless](http://framelessgrid.com/).
+ Finally, the original HelpLess grid system by Matt was also extracted to run as a plugin.
2. Installing
- Clone the repository or download the zip and include helpless in your main style.less file. Alternatively you can use [less-boilerplate](https://github.com/m6tt/less-boilerplate) as mentioned above.
+ Clone the repository or download the zip and include helpless (and optionally the desired grid plugin) in your main style.less file. Alternatively you can use [html5-boilerplate-less](https://github.com/sylbal/html5-boilerplate-less) as mentioned above.
3. Compatibility
diff --git a/frameless-plugin.less b/frameless-plugin.less
new file mode 100644
index 0000000..f658b04
--- /dev/null
+++ b/frameless-plugin.less
@@ -0,0 +1,76 @@
+/*
+ Frameless
+ by Joni Korpi
+ licensed under CC0
+
+ Adapted by Sylvain Balbous (https://github.com/sylbal) for H5BP-Less plugin
+ - Removed Reset and Normalize parts
+ - Added helper functions for margin
+ - Added namespace #fl
+ * to use vars in your mixin, import the namespace, ie.:
+ .mixin {
+ #fl;
+ width:@4cols;
+ }
+ * to use functions, call it via the mixin, ie.:
+ .mixin {
+ #fl > .width (4);
+*/
+
+#fl {
+ //
+ // Configuration
+ //
+
+ @font-size: 16; // Your base font-size in pixels
+ @em: @font-size*1em; // Shorthand for outputting ems, e.g. "12/@em"
+
+ @column: 60; // The column-width of your grid in pixels
+ @gutter: 20; // The gutter-width of your grid in pixels
+
+
+ //
+ // Column-widths in variables, in ems
+ //
+
+ @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
+ @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
+ @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
+ @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
+ @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
+ @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
+ @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
+ @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
+ @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
+ @10cols: (10 * (@column + @gutter) - @gutter) / @em;
+ @11cols: (11 * (@column + @gutter) - @gutter) / @em;
+ @12cols: (12 * (@column + @gutter) - @gutter) / @em;
+ @13cols: (13 * (@column + @gutter) - @gutter) / @em;
+ @14cols: (14 * (@column + @gutter) - @gutter) / @em;
+ @15cols: (15 * (@column + @gutter) - @gutter) / @em;
+ @16cols: (16 * (@column + @gutter) - @gutter) / @em;
+
+
+ //
+ // Column-widths in a function, in ems
+ //
+
+ .width (@cols:1) {
+ width: (@cols * (@column + @gutter) - @gutter) / @em;
+ }
+
+ //
+ // Left margin in a function, in ems
+ //
+ .margin-left () {
+ margin-left: @gutter/@em;
+ }
+
+ //
+ // Prefix function to add some "blank" columns before the content column
+ // The prefix includes all the necessary gutters
+ //
+ .prefix (@cols:1) {
+ padding-left: (@cols * (@column + @gutter)) / @em;
+ }
+}
\ No newline at end of file
diff --git a/helpless.1.0.1.less b/helpless.less
similarity index 70%
rename from helpless.1.0.1.less
rename to helpless.less
index f87747b..708a1f7 100644
--- a/helpless.1.0.1.less
+++ b/helpless.less
@@ -33,12 +33,8 @@
* Unlike other libraries, HelpLess has an invisible footprint until you call a mixin
* so if you import HelpLess but don't use it, it will not increase your compiled file size
*
-* @thanks:
-* Eric Meyer for html reset - http://meyerweb.com/eric/tools/css/reset/
-* Necolas for normalize - https://github.com/necolas/normalize.css
-*
* @How to use:
-* Import helpless.x.x.x.less into your main style.less file.
+* Import helpless.less into your main style.less file.
*
* @Author:
* Matt Woodfield - @m6tt
@@ -48,7 +44,6 @@
* BASICS => syntax
* ------------------------------------------------------------------------------
* - .reset => #hl.reset() - call outside of element
-* - .normalize => #hl.normalize - call outside of element
* - .clearfix => #hl.clearfix()
* - .centered => #hl.centered(width)
* - .border => #hl.border(color)
@@ -74,27 +69,6 @@
* - .translateY => #hl.translateY(y)
* - .matrix => #hl.matrix(n, n, n, n, n, n)
*
-* ------------------------------------------------------------------------------
-* GRID => syntax
-* ------------------------------------------------------------------------------
-* - .grid => namespace, do not call directly, use .make or one of the predefined grid makers
-* - .make => #hl.grid.make(width, colNumber, gutterWidth)
-* - .1200 => #hl.grid.1200();
-* - .1120 => #hl.grid.1120();
-* - .1040 => #hl.grid.1040();
-* - .960 => #hl.grid.960();
-* - .880 => #hl.grid.880();
-* - .800 => #hl.grid.800();
-* - .720 => #hl.grid.720();
-* - .640 => #hl.grid.640();
-* - .560 => #hl.grid.560();
-* - .480 => #hl.grid.480();
-* - .400 => #hl.grid.400();
-* - .320 => #hl.grid.320();
-* - .240 => #hl.grid.240();
-* - .row => #hl.grid.row();
-* - .col => #hl.grid.col(colSpan);
-*
* ---------------------------------------
* TYPOGRAPHY
* ---------------------------------------
@@ -153,63 +127,6 @@
table { border-collapse: collapse; border-spacing: 0; }
}
- /************************************
- * Normalize by necolas
- * https://github.com/necolas/normalize.css
- ************************************/
- .normalize() {
- /*! normalize.css 2011-08-31T22:02 UTC ยท http://github.com/necolas/normalize.css */
- article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
- audio,canvas,video{display:inline-block;*display:inline;*zoom:1;}audio:not([controls]){display:none;}
- [hidden]{display:none;}
- /*
- * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
- * http://clagnut.com/blog/348/#c790
- * 2. Keeps page centred in all browsers regardless of content height
- * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
- * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
- */
- html {font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
- body{margin:0;font-size:13px;line-height:1.231;}/*Added font-size and line-height addition as seen in html5 boilerplate*/
- body,button,input,select,textarea{font-family:sans-serif;}
- a{color:#00e;}
- a:visited{color:#551a8b;}
- a:focus{outline:thin dotted;}
- a:hover,a:active{outline:0;}
- abbr[title]{border-bottom:1px dotted;}
- b,strong{font-weight:bold;}
- blockquote{margin:1em 40px;}
- dfn{font-style:italic;}
- mark{background:#ff0;color:#000;}
- /*Corrects font family set oddly in IE6, S4/5, Chrome en.wikipedia.org/wiki/User:Davidgothberg/Test59*/
- pre,code,kbd,samp{font-family: monospace, serif;_font-family:'courier new',monospace;font-size:1em;}
- pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word;}
- q{quotes:none;}
- q:before,q:after{content:'';content:none;}small{font-size:75%;}
- sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
- sup{top:-0.5em;}
- sub{bottom:-0.25em;}
- ul,ol{margin:1em 0;padding:0 0 0 40px;}
- dd{margin:0 0 0 40px;}
- nav ul,nav ol{list-style:none;list-style-image:none;margin:0;padding:0;}/*Cleared margin and padding as seen in html5 boilerplate*/
- img{border:0;-ms-interpolation-mode:bicubic;}
- svg:not(:root){overflow:hidden;}
- figure{margin:0;}
- form{margin:0;}
- fieldset{margin:0 2px;padding:0.35em 0.625em 0.75em;}
- legend{border:0;*margin-left:-7px;}
- button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;}
- button,input {line-height: normal;*overflow:visible;}
- table button,table input{*overflow:auto;}
- button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;}
- input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
- input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing: content-box;}
- input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
- button::-moz-focus-inner,input::-moz-focus-inner {border:0;padding:0;}
- textarea {overflow:auto;vertical-align:top;}
- table {border-collapse:collapse;border-spacing:0;}
- }
-
/************************************
* Clearfix
*
@@ -261,10 +178,12 @@
*
************************************/
.opacity(@value: .5) {
+ -moz-opacity: @value;
+ -webkit-opacity: @value;
opacity: @value;
- filter: ~'alpha(opacity=(@value*100))';
- filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))';
- -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(opacity=(@value*100))"';
+ filter: ~'alpha(opacity=(@{value}*100))';
+ filter: ~'progid:DXImageTransform.Microsoft.Alpha(opacity=(@{value}*100))';
+ -ms-filter: ~'"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{value}*100))"';
}
/************************************
@@ -385,7 +304,7 @@
************************************/
.background-gradient(@colourfrom: #bbb, @colourTo: #f1f1f1, @fallbackColour: #f1f1f1, @fallbackImageUrl: '') {
background-color: @fallbackColour;
- background-image: url("@fallbackImage");
+ background-image: url("@{fallbackImageUrl}");
background-repeat: no-repeat;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@colourfrom), to(@colourTo));
background-image: -webkit-linear-gradient(bottom, @colourfrom, @colourTo);
@@ -393,9 +312,9 @@
background-image: -ms-linear-gradient(bottom, @colourfrom, @colourTo);
background-image: -o-linear-gradient(bottom, @colourfrom, @colourTo);
/* For Internet Explorer 5.5 - 7 */
- filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)';
+ filter: ~'progid:DXImageTransform.Microsoft.gradient(startColorstr=@{colourfrom}, endColorstr=@{colourTo})';
/* For Internet Explorer 8 and newer */
- -ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@colourfrom, endColorstr=@colourTo)"';
+ -ms-filter: ~'"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{colourfrom}, endColorstr=@{colourTo})"';
}
/************************************
@@ -622,196 +541,6 @@
-o-transform:matrix(@n1, @n2, @n3, @n4, @n5, @n6);
}
- /************************************
- * Grid
- ************************************/
- .grid {
-
- /************************************
- * Make
- *
- * @what?: Defines the base variables needed
- * for the HelpLess grid system.
- *
- * @params: @width, default = 960
- * @colnum, default = 16
- * @colgutter, default = 10
- *
- ************************************/
- .make(@width: 960, @colnum: 16, @colgutter: 10) {
- width: 0px + @width;
- @col-width: 100% / @colnum;
- @col-gutter-percent: 0% + ((@colgutter / @width) * 100);
- }
-
- /************************************
- * 1200
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .1200() {
- .make(1200);
- }
-
- /************************************
- * 1120
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .1120() {
- .make(1120);
- }
-
- /************************************
- * 1040
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .1040() {
- .make(1040);
- }
-
- /************************************
- * 960
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .960() {
- .make(960);
- }
-
- /************************************
- * 880
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .880() {
- .make(880);
- }
-
- /************************************
- * 800
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .800() {
- .make(800);
- }
-
- /************************************
- * 720
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .720() {
- .make(720);
- }
-
- /************************************
- * 640
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .640() {
- .make(640);
- }
-
- /************************************
- * 560
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .560() {
- .make(560);
- }
-
- /************************************
- * 480
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .480() {
- .make(480);
- }
-
- /************************************
- * 400
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .400() {
- .make(400);
- }
-
- /************************************
- * 320
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .320() {
- .make(320);
- }
-
- /************************************
- * 240
- *
- * @what?: Predefined grid maker
- *
- ************************************/
- .240() {
- .make(240);
- }
-
- /************************************
- * Row
- *
- * @what?: Defines an element as a row.
- * clears all clearfixes all columns
- * directly inside.
- *
- ************************************/
- .row() {
- .clearfix();
- display: block;
- width: 100%;
- overflow-y: visible;
- margin-left: -(@col-gutter-percent / 2);
- }
-
- /************************************
- * Col
- *
- * @what?: Defines an element as a column.
- * Sets the width depending on the
- * supplied arguments and the width
- * set in .grid()
- *
- * @params: @colSpan, default = 1
- *
- ************************************/
- .col(@colSpan: 1) {
- float: left;
- display: block;
- min-width: @col-width * @colSpan;
- padding: 0 0 0 @col-gutter-percent !important;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- }
-
/***********************************
* TYPOGRAPHY
***********************************/
@@ -970,4 +699,4 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/hlgrid-plugin.less b/hlgrid-plugin.less
new file mode 100644
index 0000000..509fb6e
--- /dev/null
+++ b/hlgrid-plugin.less
@@ -0,0 +1,253 @@
+/* --------------------------------------------------------------------------------------
+* HelpLess is released under the MIT license.
+*
+* Copyright (C) 2011 by Matt Woodfield
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy of this
+* software and associated documentation files (the "Software"), to deal in the Software
+* without restriction, including without limitation the rights to use, copy, modify,
+* merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
+* permit persons to whom the Software is furnished to do so, subject to the
+* following conditions:
+*
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE
+* OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+* --------------------------------------------------------------------------------------
+*
+* HelpLess - A lot of Less help
+* --------------------------------------------------------------------------------------
+*
+* @What is it:
+* HelpLess is a Helper Library for the brilliant LESS dynamic stylesheet language.
+* Read more about LESS: http://lesscss.org/
+*
+* I have tried to make HelpLess as all-encompasing as possible with support for dynamic
+* grids and page starter themes as well as all the css3 features I could think of.
+* Unlike other libraries, HelpLess has an invisible footprint until you call a mixin
+* so if you import HelpLess but don't use it, it will not increase your compiled file size
+*
+* @How to use:
+* Import helpless.less into your main style.less file.
+*
+* @Author:
+* Matt Woodfield - @m6tt
+*
+* @Reference:
+* ------------------------------------------------------------------------------
+* GRID => syntax
+* ------------------------------------------------------------------------------
+* - #hlgrid => namespace, do not call directly, use .make or one of the predefined grid makers
+* - .make => #hlgrid > .make(width, colNumber, gutterWidth)
+* - .1200 => #hlgrid > .1200();
+* - .1120 => #hlgrid > .1120();
+* - .1040 => #hlgrid > 1040();
+* - .960 => #hlgrid > 960();
+* - .880 => #hlgrid > .880();
+* - .800 => #hlgrid > .800();
+* - .720 => #hlgrid > .720();
+* - .640 => #hlgrid > .640();
+* - .560 => #hlgrid > .560();
+* - .480 => #hlgrid > .480();
+* - .400 => #hlgrid > .400();
+* - .320 => #hlgrid > .320();
+* - .240 => #hlgrid > .240();
+* - .row => #hlgrid > .row();
+* - .col => #hlgrid > .col(colSpan);
+*
+
+/************************************
+* HelpLess grid System
+************************************/
+#hlgrid {
+
+ /************************************
+ * Make
+ *
+ * @what?: Defines the base variables needed
+ * for the HelpLess grid system.
+ *
+ * @params: @width, default = 960
+ * @colnum, default = 16
+ * @colgutter, default = 10
+ *
+ ************************************/
+ .make(@width: 960, @colnum: 16, @colgutter: 10) {
+ width: 0px + @width;
+ @col-width: 100% / @colnum;
+ @col-gutter-percent: 0% + ((@colgutter / @width) * 100);
+ }
+
+ /************************************
+ * 1200
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .1200() {
+ .make(1200);
+ }
+
+ /************************************
+ * 1120
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .1120() {
+ .make(1120);
+ }
+
+ /************************************
+ * 1040
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .1040() {
+ .make(1040);
+ }
+
+ /************************************
+ * 960
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .960() {
+ .make(960);
+ }
+
+ /************************************
+ * 880
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .880() {
+ .make(880);
+ }
+
+ /************************************
+ * 800
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .800() {
+ .make(800);
+ }
+
+ /************************************
+ * 720
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .720() {
+ .make(720);
+ }
+
+ /************************************
+ * 640
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .640() {
+ .make(640);
+ }
+
+ /************************************
+ * 560
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .560() {
+ .make(560);
+ }
+
+ /************************************
+ * 480
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .480() {
+ .make(480);
+ }
+
+ /************************************
+ * 400
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .400() {
+ .make(400);
+ }
+
+ /************************************
+ * 320
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .320() {
+ .make(320);
+ }
+
+ /************************************
+ * 240
+ *
+ * @what?: Predefined grid maker
+ *
+ ************************************/
+ .240() {
+ .make(240);
+ }
+
+ /************************************
+ * Row
+ *
+ * @what?: Defines an element as a row.
+ * clears all clearfixes all columns
+ * directly inside.
+ *
+ ************************************/
+ .row() {
+ .clearfix();
+ display: block;
+ width: 100%;
+ overflow-y: visible;
+ margin-left: -(@col-gutter-percent / 2);
+ }
+
+ /************************************
+ * Col
+ *
+ * @what?: Defines an element as a column.
+ * Sets the width depending on the
+ * supplied arguments and the width
+ * set in .grid()
+ *
+ * @params: @colSpan, default = 1
+ *
+ ************************************/
+ .col(@colSpan: 1) {
+ float: left;
+ display: block;
+ min-width: @col-width * @colSpan;
+ padding: 0 0 0 @col-gutter-percent !important;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ }
+}