/ Published in: CSS
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/** * GS * A less implementation of 960gs that allows for asymmetric columns * * @author Terrence Wood <firstname dot lastname at funkive dot com> * * Define the width, gutter and number of columns in your main less file before importing this file * <code> * @gs_width: 960px; * @gs_gutter: 20px; * @gs_columns: 12; * @import 'gridsystem'; * </code> * */ /** * Container width * * @param {int unit} margin-left the width and unit (px, em, etc) of the left margin * @param {int unit} margin-right the width and unit (px, em, etc) of the right margin * @var int gs_width the document width * */ .gs_container(@margin-left: auto, @margin-right: auto) { margin-left:@margin-left; margin-right:@margin-right; width: @gs_width; } /** * Create a column * * @param int col dummy to prevent this class from appearing in the css file * */ .gs_column(@col: 0) { display: inline; float: left; position: relative; } /** * Calculate a column width * * @method Calculates a column width from variables defined in the main less file * @var int gs_width the document width * @var int gs_gutter the gutter width * @var int gs_columns the number of columns * */ @gs_column_width: (@gs_width - @gs_gutter * @gs_columns) / @gs_columns; /** * Create a grid column * * @param int col the number of columns to span * @param int variance the number of pixels to add to this column instance * */ .gs_grid(@col: 0, @variance: 0) { .gs_column; width: (@gs_column_width + ((@col - 1) * (@gs_column_width + @gs_gutter))) + @variance; } /** * Add left and right margins to a grid column * Use with grid columns * * @param {int unit} the margin width and unit (px, em, etc) to use * <code> * #selector { * .gs_grid(n); * .gs_margins; // normal column with equal left & right margins * .nestedselectorfirst{ * .gs_grid(n-x); * .gs_margin_right; // alpha * } * .nestedselectormiddle{ * .gs_grid(n-y); * .gs_margins; // normal column with equal left & right margins * } * .nestedselectorlast{ * .gs_grid(n-z); * .gs_margin_left; // omega * } * } * </code> * */ .gs_margins(@margin: @gs_gutter/2) { margin-left: @margin; margin-right: @margin; } /** * Add right margin only to a grid column * Use on the first nested grid column (equivalent to 960gs .alpha) * @see .gs_margins; * */ .gs_margin_right(@margin: @gs_gutter/2) { margin-left: 0; margin-right: @margin; } /** * Add left margin only to a grid column * Use on the last nested grid column (equivalent to 960gs .omega); * @see .gs_margins; * */ .gs_margin_left(@margin: @gs_gutter/2) { margin-left: @margin; margin-right: 0; } /** * Add left padding to a grid column * * @param int col the number of columns to pad * */ .gs_prefix(@col: 0) { padding-left: (@col) * (@gs_column_width + @gs_gutter); } /** * Add right padding to a grid column * * @param int col the number of columns to pad * */ .gs_suffix(@col: 0) { padding-right: (@col) * (@gs_column_width + @gs_gutter); } /** * Push a grid column to the right * * @param int col the number of columns to push * @var int gs_column_width the calculated column width * @var int gs_gutter the gutter width defined in the main less file * @see gs_column_width * */ .gs_push(@col: 0) { left: (@col) * (@gs_column_width + @gs_gutter); } /** * Pull a grid column to the left * * @param int col the number of columns to pull * @var int gs_column_width the calculated column width * @var int gs_gutter the gutter width defined in the main less file * @see gs_column_width * */ .gs_pull(@col: 0) { right: (@col) * (@gs_column_width + @gs_gutter); } /** * Clear floated child elements where the child's boundaries * are outside the parent's boundaries. Use 'overflow:hidden' otherwise. * * @param int height dummy to prevent this class from appearing in the css file * */ .gs_clear(@height: 0) { min-height:@height; _height:@height; &:after { clear:both; content:"\200B"; display:block; height:@height; } }