Fix grid css

t32k · Jan 29, 2015 · d2c1cd8 · d2c1cd8
1 parent 52f6aa1
commit d2c1cd8
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 12 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "wisteria",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "main": "wisteria.css",
   "homepage": "https://github.com/t32k/wisteria",
   "authors": "Koji Ishimoto <[email protected]>",

diff --git a/docs/css/wisteria.css b/docs/css/wisteria.css
@@ -42,9 +42,9 @@ a:hover { color: #4527A0; }
 	-webkit-flex: none !important;
 	        flex: none !important; }
 
-.g-col--top { align-items: flex-start; }
-.g-col--bottom { align-items: flex-end; }
-.g-col--center { align-items: center; }
+.g-row--top { align-items: flex-start; }
+.g-row--bottom { align-items: flex-end; }
+.g-row--center { align-items: center; }
 
 @media (min-width: 550px) {
 	.g-col {

diff --git a/docs/index.html b/docs/index.html
@@ -17,7 +17,7 @@
   <div class="inner">
     <h1 class="h1 u-ptl">Wisteria</h1>
     <p class="u-fz4">A class selectors based harmless CSS library.</p>
-    <p class="b u-mbx">v0.7.1</p>
+    <p class="b u-mbx">v0.7.2</p>
     <p><a href="https://github.com/t32k/wisteria/archive/master.zip" class="button">Download Wisteria</a></p>
   </div>
 </header>
@@ -76,6 +76,16 @@ <h3 class="h3">Grids</h3>
       <div class="g-col"><div class="block">1/3</div></div>
       <div class="g-col"><div class="block">1/3</div></div>
     </div>
+
+    <div class="g-row g-row--center">
+      <div class="g-col"><div class="block" style="height:100px">1/2</div></div>
+      <div class="g-col"><div class="block">1/2</div></div>
+    </div>
+    <div class="g-row g-row--bottom">
+      <div class="g-col"><div class="block">1/3</div></div>
+      <div class="g-col"><div class="block">1/3</div></div>
+      <div class="g-col"><div class="block" style="height:100px">1/3</div></div>
+    </div>
     <div class="g-row">
       <div class="g-col"><div class="block">auto</div></div>
       <div class="g-col u-w80"><div class="block">80%</div></div>
@@ -88,13 +98,24 @@ <h3 class="h3">Grids</h3>
       &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/6&lt;/div&gt;
       &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/6&lt;/div&gt;
       &lt;/div&gt;
-
+      &lt;!-- Without gutters --&gt;
       &lt;div class=&quot;g-row g-row--collapse&quot;&gt;
       &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/3&lt;/div&gt;
       &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/3&lt;/div&gt;
       &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/3&lt;/div&gt;
       &lt;/div&gt;
-
+      &lt;!-- Vertically Centered Grid Cells --&gt;
+      &lt;div class=&quot;g-row g-row--center&quot;&gt;
+      &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/2&lt;/div&gt;
+      &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/2&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;!-- Bottom-aligned Grid Cells --&gt;
+      &lt;div class=&quot;g-row g-row--bottom&quot;&gt;
+      &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/3&lt;/div&gt;
+      &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/3&lt;/div&gt;
+      &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;1/3&lt;/div&gt;
+      &lt;/div&gt;
+      &lt;!-- Individual Sizing --&gt;
       &lt;div class=&quot;g-row&quot;&gt;
       &nbsp;&nbsp;&lt;div class=&quot;g-col&quot;&gt;auto&lt;/div&gt;
       &nbsp;&nbsp;&lt;div class=&quot;g-col u-w80&quot;&gt;80%&lt;/div&gt;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wisteria",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "A class selectors based harmless CSS library.",
   "main": "wisteria.css",
   "scripts": {

diff --git a/wisteria.css b/wisteria.css
@@ -42,9 +42,9 @@ a:hover { color: #4527A0; }
 	-webkit-flex: none !important;
 	        flex: none !important; }
 
-.g-col--top { align-items: flex-start; }
-.g-col--bottom { align-items: flex-end; }
-.g-col--center { align-items: center; }
+.g-row--top { align-items: flex-start; }
+.g-row--bottom { align-items: flex-end; }
+.g-row--center { align-items: center; }
 
 @media (min-width: 550px) {
 	.g-col {

diff --git a/wisteria.min.css b/wisteria.min.css