diff --git a/index.html b/index.html index 14904fa..766b84e 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,7 @@ + @@ -1186,7 +1187,196 @@

Boundary markers

For better control, but also more cumbersome syntax, take a look at flexbox columns.

Flexbox columns

-

TODO

+

Start by making an element into a row by ading the class row +followed by one of the row-… classes that identifies how many +columns the row should have:

+
  <div class="row has-50-50-cols">
+    …
+  </div>
+
+

Create the required number of columns:

+
  <div class="row has-25-25-50-cols">
+    <div> <!-- First column -->
+      …
+    </div>
+    <div> <!-- Second column -->
+      …
+    </div>
+    <div> <!-- Third column -->
+      …
+    </div>
+  </div>
+
+

Finally, create desired number of cells in each column:

+
  <div class="row has-25-25-50-cols">
+    <div> <!-- First column -->
+      <div>…</div> <!-- First cell of first column -->
+      <div>…</div> <!-- Second cell of first column -->
+      …
+      <div>…</div> <!-- Last cell of first column -->
+    </div>
+    <div> <!-- Second column -->
+      …
+    </div>
+    <div> <!-- Third column -->
+      …
+    </div>
+  </div>
+
+

It's possible to add rows in columns like this:

+
  <div class="row has-50-50-cols">
+    <div> <!-- First column -->
+      <div class="row has-50-50-cols">
+        <div> <!-- First subcolumn -->
+          …
+        </div>
+        <div> <!-- Second subcolumn -->
+          …
+        </div>
+      </div>
+    </div>
+    <div> <!-- Last column -->
+      …
+    </div>
+  </div>
+
+

The class stacks-normal-1024 makes columns stack on +top of each other if the wide is smaller than 1024 px:

+
  <div class="row has-50-50-cols stacks-normal-1024">
+    <div> <!-- First column -->
+      …
+    </div>
+    <div> <!-- Second column -->
+      …
+    </div>
+  </div>
+
+

The columns are stacked with the first column above and the second below +and so forth. By using the class stacks-reverse-1024 instead, +the stack order is reversed.

+

The classes stacks-normal-768 and +stacks-reverse-768 works the same but for widths lessthan 768 px.

+

By default, with exception for <input>, any element put in columns gets +0.5 rem padding, 0 margin, border-box sizing and block display. Moreover, list +items get its bullet or number placed inside the bounding box.

+

By adding the class has-no-gutter on a column or a row, +this default behaviour is stopped for the column or row, respectively.

+
  <div class="row has-50-50-cols has-no-gutter">
+    …
+  </div>
+
+

By adding has-no-gutter-left or has-no-gutter-right +on a column, the left or right padding, respectively, is removed for all +objects in that column.

+

By adding has-no-gutter-top or has-no-gutter-bottom +on a row, the top or bottom padding, respectively, is removed for all +objects in columns of that row..

+

Finally, let’s take a look at an example:

+
<div class="row has-100-cols">
+   <div>
+      <div class="row has-50-50-cols stacks-normal-768">
+         <div>
+            <div class="row has-50-50-cols">
+               <div>
+                  <dib> a) 25% </div>
+               </div>
+               <div>
+                  <div> b) 25% </div>
+               </div>
+            </div>
+            <div> c) 50% </div>
+            <div> d) 50% </div>
+         </div>
+         <div>
+            <div> e) 50% </div>
+            <div> f) 50% </div>
+            <div> g) 50% </div>
+         </div>
+      </div>
+      <div class="row has-100-cols">
+         <div>
+            <div class="row has-67-33-cols stacks-normal-1024">
+               <div>
+                  <div>
+                     <div> h) 67% </div>
+                  </div>
+               </div>
+               <div>
+                  <div> i) 33% </div>
+               </div>
+            </div>
+            <div class="row has-25-25-25-25-cols stacks-normal-1024">
+               <div>
+                  <div> j) 25% </div>
+               </div>
+               <div>
+                  <div> k) 25% </div>
+               </div>
+               <div>
+                  <div> l) 25% </div>
+               </div>
+               <div>
+                  <div> m) 25% </div>
+               </div>
+            </div>
+            <div> n) 100% </div>
+         </div>
+      </div>
+   </div>
+</div>
+

The result looks as follows.

+
+
+
+
+
+
+
a) 25%
+
+
+
b) 25%
+
+
+
c) 50%
+
d) 50%
+
+
+
e) 50%
+
f) 50%
+
g) 50%
+
+
+
+
+
+
+
+
h) 67%
+
+
+
+
i) 33%
+
+
+
+
+
j) 25%
+
+
+
k) 25%
+
+
+
l) 25%
+
+
+
m) 25%
+
+
+
n) 100%
+
+
+
+

Links and buttons

Next up to implement

Forms

@@ -1199,7 +1389,7 @@

Ideas for future

Following is a list of ideas for the future in no particualr order: