960gs implementation

.gitignore

@@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+.project

960gs-plugin.less

@@ -0,0 +1,186 @@
+/* --------------------------------------------------------------------------------------
+*  960 Grid System by Nathan Smith  <http://960.gs/>
+*
+*  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));
+    }
+
+}

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
 

frameless-plugin.less

@@ -0,0 +1,76 @@
+/*
+	Frameless			<http://framelessgrid.com/>
+	by Joni Korpi 		<http://jonikorpi.com/>
+	licensed under CC0	<http://creativecommons.org/publicdomain/zero/1.0/>
+
+	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;
+    }
+}