Responsibly - Responsive fluid grid with LESS


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

A simple to use yet very flexible fluid grid with less.

See an example list of [responsive grid layouts](http://snipplr.com/view/73096/example-responsive-grid-layouts-for-responsibly/)


Copy this code and paste it in your HTML
  1. /**
  2.  * Grid requirements
  3.  *
  4.  * 1. Grid must be fluid so it adjusts on every viewport's content width
  5.  * 2. Grid must be able to float items on multiple lines, e.g. 4 items on one or 2 lines (2 items each)
  6.  * 3. Grid should be applicable as HTML classes and/or mixins
  7.  * 4. You should be able to set up responsive grid layouts
  8.  * e.g. different amount of columns in different viewports (see requirement 2)
  9.  *
  10.  *
  11.  * Grid specs
  12.  *
  13.  * 1. We use percentage widths and spacings to cover requirement 1
  14.  * 2. We use a negative margin row with all left margin cols to cover requirement 2
  15.  * 3. The grid can be set up completely in HTML by using the given classes: .row, .layout-responsive-x, .col, .col-span-x, .offset-x, etc.
  16.  * Or you can apply the same styles in LESS by using the mixins: .row(), .layout-responsive-x(), .col(), .col-span(x), .offset(x), etc.
  17.  * 4. To build a responsive grid use .layout-responsive classes on your grid .rows and declare the .cols inside those layouts.
  18.  * Use .col-x instead of .col-span-x as logical unit inside such a layout if columns have different sizes
  19.  *
  20.  * NEW
  21.  * Use .ordered, .pull-x and .push-x to optically reposition elements while keeping the html order!
  22.  * credit for this goes to twitter bootstrap
  23.  *
  24.  *
  25.  * Hint: since everything gets calculated within mixins you could even use float numbers for grid widths ;)
  26.  * .col-span(3.5)
  27.  **/
  28.  
  29. /*--- base variables ---*/
  30. @grid-fixed-width: 960px;
  31. @grid-fixed-gutter: 20px;
  32. @grid-max-cols: 12;
  33.  
  34. /*-- set up fluid grid ---*/
  35. @grid-fluid-width: 100%;
  36. @decimal-places: 3;
  37. // used for rounding calculated numbers
  38.  
  39. // fluid gutter is calculated relatively to the static gutter in fixed grid width
  40. @grid-fluid-gutter: round(percentage((100 / (@grid-fixed-width / @grid-fixed-gutter)) / 100), @decimal-places);
  41.  
  42. // calculate the width of one grid column
  43. @grid-one-col: (@grid-fluid-width - (@grid-fluid-gutter * (@grid-max-cols))) / @grid-max-cols;
  44.  
  45. /*--- mixins ---*/
  46. #grid {
  47. .span-width(@num: @grid-max-cols) {
  48. width: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places);
  49. }
  50.  
  51. .indent(@num: 0) when (@num >= 0) {
  52. margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num + 1)), @decimal-places);
  53. }
  54.  
  55. .indent(@num: -1) when (@num < 0) {
  56. margin-left: round((@grid-one-col * @num) + (@grid-fluid-gutter * (@num - 1)), @decimal-places);
  57. }
  58.  
  59. .push(@num) when (@num >= 0) {
  60. position: relative;
  61. left: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places);
  62. }
  63.  
  64. .pull(@num) when (@num >= 0) {
  65. position: relative;
  66. right: round((@grid-one-col * @num) + (@grid-fluid-gutter * @num), @decimal-places);
  67. }
  68.  
  69. // less loop
  70. .loop (@index, @class: item, @mixin: '') when (@index > 0) {
  71. // create the actual css selector
  72. .@{class}-@{index} {
  73. #loopMixin > .apply(@mixin, @index);
  74. }
  75.  
  76. // next iteration
  77. .loop(@index - 1, @class, @mixin);
  78. }
  79.  
  80. // end the loop when index is 0
  81. .loop (@index) when (@index = 0) {
  82. }
  83. }
  84.  
  85. /*
  86. * Clearfix: contain floats
  87. *
  88. * For modern browsers
  89. * 1. The space content is one way to avoid an Opera bug when the
  90. * `contenteditable` attribute is included anywhere else in the document.
  91. * Otherwise it causes space to appear at the top and bottom of elements
  92. * that receive the `clearfix` class.
  93. * 2. The use of `table` rather than `block` is only necessary if using
  94. * `:before` to contain the top-margins of child elements.
  95. */
  96.  
  97. .clearfix {
  98. /*
  99. * For IE 6/7 only
  100. * Include this rule to trigger hasLayout and contain floats.
  101. */
  102. *zoom: 1;
  103.  
  104. &:before,
  105. &:after {
  106. content: " "; /* 1 */
  107. display: table; /* 2 */
  108. }
  109.  
  110. &:after {
  111. clear: both;
  112. }
  113. }
  114.  
  115. /*--- base layout styles ---*/
  116. .row,
  117. .col {
  118. display: block;
  119. margin-right: 0;
  120. padding-left: 0;
  121. padding-right: 0;
  122. }
  123.  
  124. .row {
  125. .clearfix();
  126. margin-left: -@grid-fluid-gutter;
  127.  
  128. &.ordered {
  129. position: relative;
  130. }
  131. }
  132.  
  133. .col {
  134. margin-left: @grid-fluid-gutter;
  135. float: left;
  136.  
  137. &.spacer {
  138. min-height: 1px;
  139. }
  140. }
  141.  
  142. // make simpler mixins available (mainly for class/mixin name consistency)
  143. .col-span(@num: 0) when (@num >= 0) {
  144. #grid > .span-width(@num);
  145. }
  146.  
  147. .offset(@num: 0) {
  148. #grid > .indent(@num);
  149. }
  150.  
  151. .push(@num: 0) when (@num >= 0) {
  152. #grid > .push(@num);
  153. }
  154.  
  155. .pull(@num: 0) when (@num >= 0) {
  156. #grid > .pull(@num);
  157. }
  158.  
  159. /*--- generate grid classes ---*/
  160. /**
  161.  * Parameters:
  162.  * 1) amount of iterations
  163.  * 2) class selector prefix to generate
  164.  * 3) mixin to apply to each selector
  165.  *
  166.  * Example:
  167.  * .loop(12, item, 'setTabIndex');
  168.  *
  169.  * NOTE: you can not use the generated classes themselves as mixins!
  170.  */
  171.  
  172. .row {
  173. #grid > .loop(@grid-max-cols, col-span, 'grid-span');
  174. #grid > .loop(@grid-max-cols - 1, offset, 'grid-offset');
  175. #grid > .loop(@grid-max-cols - 1, push, 'grid-push');
  176. #grid > .loop(@grid-max-cols - 1, pull, 'grid-pull');
  177. }
  178.  
  179. // mixins to call inside less loop
  180. #loopMixin {
  181. // base grid loops
  182. .apply('grid-span', @index) {
  183. #grid > .span-width(@index);
  184. }
  185.  
  186. .apply('grid-offset', @index) {
  187. #grid > .indent(@index);
  188. }
  189.  
  190. .apply('grid-push', @index) {
  191. #grid > .push(@index);
  192. }
  193.  
  194. .apply('grid-pull', @index) {
  195. #grid > .pull(@index);
  196. }
  197. // grid loops end
  198. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.