Added flexible box module mixin. Example provided in Index.html

nightsailer · Jun 9, 2011 · b82f85e · b82f85e
1 parent 63a1cb2
commit b82f85e
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 1 deletion.
diff --git a/bootstrap.less b/bootstrap.less
@@ -237,4 +237,56 @@
 	-khtml-opacity: @op / 100;
 	-moz-opacity: @op / 100;
 	opacity: @op / 100;
+}
+
+// CSS3 Flexible Box Module
+#flexbox {
+  // #flexbox > .display-box; must be used along with other flexbox mixins
+  .display-box { 
+    display: -moz-box;
+    display: -webkit-box;
+    display: box;
+  }
+  // Box align [ start | end | center | baseline | stretch ]
+  .box-align(@alignment: stretch) {
+    -moz-box-align: @alignment;
+    -webkit-box-align: @alignment;
+    box-align: @alignment;
+  }
+  // Box direction [ normal | reverse | inherit ]
+  .box-direction(@direction: normal) {
+    -moz-box-direction: @direction;
+    -webkit-box-direction: @direction;
+    box-direction: @direction;
+  }
+  // Box flex [ integer ]
+  .box-flex(@flex: 0) {
+    -moz-box-flex: @flex;
+    -webkit-box-flex: @flex;
+    box-flex: @flex;
+  }
+  // Box flex group [ integer ]
+  .box-flex-group(@group: 1) {
+    -moz-box-flex-group: @group;
+    -webkit-box-flex-group: @group;
+    box-flex-group: @group;
+  }
+  // Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
+  .box-orient(@orientation: horizontal) {
+    -moz-box-orient: @orientation;
+    -webkit-box-orient: @orientation;
+    box-orient: @orientation;
+  }
+  // Box ordinal group [ integer ]
+  .box-ordinal-group(@group: 1) {
+    -moz-box-ordinal-group: @group;
+    -webkit-box-ordinal-group:@group;
+    box-flex-ordinal-group: @group;
+  }
+  // Box pack  [ start | end | center | justify ]
+  .box-pack(@pack: start) {
+    -moz-box-pack: @pack;
+    -webkit-box-pack: @pack;
+    box-pack: @pack;
+  }
 }
diff --git a/index.html b/index.html
@@ -49,6 +49,7 @@ <h3>Mixins</h3>
             <li><a href="#buttons">Buttons</a></li>
             <li><a href="#grid">Grid System</a></li>
             <li><a href="#helpers">Helpers</a></li>
+            <li><a href="#flexbox">Flexible Box Module</a></li>
           </ul>
         </div>
         <div class="span5">
@@ -239,7 +240,29 @@ <h2 id="helpers">Miscellaneous helpers</h2>
 }
 </pre>
     </section>
-
+    <section>
+      <h2 id="flexbox">Flexible Box Module</h2>
+      <p></p>
+      <div class="flexbox">
+        <div class="box1"></div>
+        <div class="box2"></div>
+        <div class="box3"></div>
+      </div>
+<pre>
+div.flexbox {
+  #flexbox > .display-box;
+  #flexbox > .box-pack(center);
+  div {
+    margin: 5px;
+    #translucent > .background(@black,.25);
+    .square(50px);
+  }
+  div.box2 {
+    #flexbox > .box-flex(1);
+  }
+}
+</pre>
+    </section>
     <section>
       <h2 id="variables">Variables</h2>
       <p>Variables have never existed in CSS, but with LESS, they're all up in da club. Bootstrap includes a set of great colors perfect for just about any project as an example of how to use variables.</p>

diff --git a/style.less b/style.less
@@ -164,3 +164,17 @@ div.grid {
     }
   }
 }
+
+// Flexbox example
+div.flexbox {
+  #flexbox > .display-box;
+  #flexbox > .box-pack(center);
+  div {
+    margin: 5px;
+    #translucent > .background(@black,.25);
+    .square(50px);
+  }
+  div.box2 {
+    #flexbox > .box-flex(1);
+  }
+}