Advanced Search

GS - A less implementation of 960gs that allows for asymmetric columns

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**
  2.  * GS
  3.  * A less implementation of 960gs that allows for asymmetric columns
  4.  *
  5.  * @author Terrence Wood <firstname dot lastname at funkive dot com>
  6.  *
  7.  * Define the width, gutter and number of columns in your main less file before importing this file
  8.  * <code>
  9.  *	@gs_width: 960px;
  10.  *	@gs_gutter: 20px;
  11.  *	@gs_columns: 12;
  12.  *	@import 'gridsystem';
  13.  * </code>
  14.  *
  15.  */
  16.  
  17. /**
  18.  * Container width
  19.  * 
  20.  * @param {int unit} margin-left the width and unit (px, em, etc)  of the left margin
  21.  * @param {int unit} margin-right the width and unit (px, em, etc)  of the right margin
  22.  * @var int gs_width the document width
  23.  *
  24.  */
  25. .gs_container(@margin-left: auto, @margin-right: auto) {
  26.     margin-left:@margin-left;
  27.     margin-right:@margin-right;
  28.     width: @gs_width;
  29. }
  30.  
  31. /**
  32.  * Create a column
  33.  * 
  34.  * @param int col dummy to prevent this class from appearing in the css file
  35.  *
  36.  */
  37. .gs_column(@col: 0) {
  38.     display: inline;
  39.     float: left;
  40.     position: relative;
  41. }
  42.  
  43. /**
  44.  * Calculate a column width
  45.  *
  46.  * @method Calculates a column width from variables defined in the main less file
  47.  * @var int gs_width the document width
  48.  * @var int gs_gutter the gutter width
  49.  * @var int gs_columns the number of columns
  50.  *
  51.  */
  52.  
  53. @gs_column_width: (@gs_width - @gs_gutter * @gs_columns) / @gs_columns;
  54.  
  55. /**
  56.  * Create a grid column
  57.  * 
  58.  * @param int col the number of columns to span
  59.  * @param int variance the number of pixels to add to this column instance
  60.  *
  61.  */
  62. .gs_grid(@col: 0, @variance: 0) {
  63. 	.gs_column;
  64.     width: (@gs_column_width + ((@col - 1) * (@gs_column_width + @gs_gutter))) + @variance;
  65. }
  66.  
  67. /**
  68.  * Add left and right margins to a grid column
  69.  * Use with grid columns
  70.  *
  71.  * @param {int unit} the margin width and unit (px, em, etc) to use
  72.  * <code>
  73.  * #selector {
  74.  *	  .gs_grid(n);
  75.  *	  .gs_margins; // normal column with equal left & right margins
  76.  * 	  .nestedselectorfirst{
  77.  *		  .gs_grid(n-x);
  78.  *		  .gs_margin_right; // alpha
  79.  * 	  }
  80.  * 	  .nestedselectormiddle{
  81.  *		  .gs_grid(n-y);
  82.  *		  .gs_margins; // normal column with equal left & right margins
  83.  * 	  }
  84.  * 	  .nestedselectorlast{
  85.  *		  .gs_grid(n-z);
  86.  *		  .gs_margin_left; // omega
  87.  * 	  }
  88.  * }
  89.  * </code>
  90.  * 
  91.  */
  92. .gs_margins(@margin: @gs_gutter/2) {
  93. 	margin-left: @margin;
  94. 	margin-right: @margin;
  95. }
  96.  
  97. /**
  98.  * Add right margin only to a grid column
  99.  * Use on the first nested grid column (equivalent to 960gs .alpha)
  100.  * @see .gs_margins;
  101.  *
  102.  */
  103. .gs_margin_right(@margin: @gs_gutter/2) {
  104. 	margin-left: 0;
  105. 	margin-right: @margin;
  106.  
  107. }
  108.  
  109. /**
  110.  * Add left margin only to a grid column
  111.  * Use on the last nested grid column (equivalent to 960gs .omega);
  112.  * @see .gs_margins;
  113.  *
  114.  */
  115. .gs_margin_left(@margin: @gs_gutter/2) {
  116. 	margin-left: @margin;
  117. 	margin-right: 0;
  118. }
  119.  
  120. /**
  121.  * Add left padding to a grid column
  122.  *
  123.  * @param int col the number of columns to pad
  124.  *
  125.  */
  126. .gs_prefix(@col: 0) {
  127.     padding-left: (@col) * (@gs_column_width + @gs_gutter);
  128. }
  129.  
  130. /**
  131.  * Add right padding to a grid column
  132.  *
  133.  * @param int col the number of columns to pad
  134.  *
  135.  */
  136. .gs_suffix(@col: 0) {
  137.     padding-right: (@col) * (@gs_column_width + @gs_gutter);
  138. }
  139.  
  140. /**
  141.  * Push a grid column to the right
  142.  *
  143.  * @param int col the number of columns to push
  144.  * @var int gs_column_width the calculated column width
  145.  * @var int gs_gutter the gutter width defined in the main less file
  146.  * @see gs_column_width
  147.  *
  148.  */
  149. .gs_push(@col: 0) {
  150.     left: (@col) * (@gs_column_width + @gs_gutter);
  151. }
  152.  
  153. /**
  154.  * Pull a grid column to the left
  155.  *
  156.  * @param int col the number of columns to pull
  157.  * @var int gs_column_width the calculated column width
  158.  * @var int gs_gutter the gutter width defined in the main less file
  159.  * @see gs_column_width
  160.  *
  161.  */
  162. .gs_pull(@col: 0) {
  163.     right: (@col) * (@gs_column_width + @gs_gutter);
  164. }
  165.  
  166. /**
  167.  * Clear floated child elements where the child's boundaries
  168.  * are outside the parent's boundaries. Use 'overflow:hidden' otherwise.
  169.  *
  170.  * @param int height dummy to prevent this class from appearing in the css file
  171.  *
  172.  */
  173. .gs_clear(@height: 0) {
  174. 	min-height:@height;
  175. 	_height:@height;
  176. 	&:after {
  177. 		clear:both;
  178. 		content:"\200B";
  179. 		display:block;
  180. 		height:@height;
  181. 	}
  182. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.