Skip to content
This repository

Added faux empty grid columns as plugins #91

wants to merge 4 commits into from

2 participants

David Gillhespy ricklowes
David Gillhespy

I submitted this before, but never had a chance to make the requested changes. I have now moved the changes into the plugins directory instead of the main grids.css file.

original message:

I've seen this issue come up a few times in the google group, so I thought I'd take a stab at adding it to see if anyone else thinks it's a good idea.

Basically the concept is that sometimes you want to give the appearance of an empty column in a grid without having an empty element. This commit just adds classes that correspond with the current grid classes but adds append and prepend to them. For example, you could add the class "appendSize1of4" to create an empty 25% width space after a grid column, or "prependSize1of4" to add it before.


I am wondering whether both sets (prepend and append) are both required? I was taking a look at Twitter Bootstrap today and noticed they only seem be using an 'offset' class (same as prepend) to achieve their examples and it looks like they would be able to cover what seems to be pretty much any layout. Are there use cases that you're aware of that would require both sets?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
2  .gitignore
... ... @@ -0,0 +1,2 @@
  1 +/nbproject/private/
  2 +nbproject
2  core/grid/grids.css
@@ -13,4 +13,4 @@
13 13 .size2of5{width:40%;}
14 14 .size3of5{width:60%;}
15 15 .size4of5{width:80%;}
16   -.lastUnit{float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
  16 +.lastUnit{float:none;display:block;display:table-cell;width:9999em;*width:auto;*zoom:1;_position:relative;_left:-3px;_margin-right:-3px;}
9 plugins/gridsAppend/gridsAppend.css
... ... @@ -0,0 +1,9 @@
  1 +.appendSize1of2{padding-right:50%;}
  2 +.appendSize1of3{padding-right:33.33333%;}
  3 +.appendSize2of3{padding-right:66.66666%;}
  4 +.appendSize1of4{padding-right:25%;}
  5 +.appendSize3of4{padding-right:75%;}
  6 +.appendSize1of5{padding-right:20%;}
  7 +.appendSize2of5{padding-right:40%;}
  8 +.appendSize3of5{padding-right:60%;}
  9 +.appendSize4of5{padding-right:80%;}
9 plugins/gridsPrepend/gridsPrepend.css
... ... @@ -0,0 +1,9 @@
  1 +.prependSize1of2{padding-left:50%;}
  2 +.prependSize1of3{padding-left:33.33333%;}
  3 +.prependSize2of3{padding-left:66.66666%;}
  4 +.prependSize1of4{padding-left:25%;}
  5 +.prependSize3of4{padding-left:75%;}
  6 +.prependSize1of5{padding-left:20%;}
  7 +.prependSize2of5{padding-left:40%;}
  8 +.prependSize3of5{padding-left:60%;}
  9 +.prependSize4of5{padding-left:80%;}

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.