The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the --grid-maxWidth in the :root.
+
The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max
+ width can be controlled by changing the --grid-maxWidth in the :root.
Much like other frameworks, wrap your content in a .container to center it on the page.
Flexible grid
@@ -9,7 +10,8 @@
Add a .row container
Add as many .col elements as you want
-
Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.
+
Each column will have an equal width, in a row. There is no restriction on number of columns, but
+ it is recommended not to add more than 12 columns in a row.
.col
@@ -26,7 +28,7 @@
.col
- {% highlight html %}
+{% highlight html %}
.col
@@ -35,7 +37,7 @@
.col
.col
- {% endhighlight %}
+{% endhighlight %}
Sized
You can also specify the size of the columns
@@ -43,7 +45,8 @@
Add a .row container
Add a .col-n child where n can be from 1 to 12
-
Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4.
+
Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use
+ .col-4.
.col-1
@@ -110,11 +113,67 @@
.col-12
+{% endhighlight %}
+
+
New Responsive grids:
+
We now have responsive grids that work based on device width.
+
+
All columns are 100% for device width < 600px
+
.col and .col-N for all device sizes >= 600px
+
.col-N-md for >= 900px sizes
+
.col-N-lg for >= 1200px sizes
+
+
+
+
.col-12.col-6-md.col-4-lg
+
+
+
.col-6.col-3-md.col-4-lg
+
+
+
.col-6.col-3-md.col-4-lg
+
+
+
+
+
.col.col-6-lg
+
+
+
.col.col-3-lg
+
+
+
.col.col-3-lg
+
+
+{% highlight html %}
+
+
+
.col-12.col-6-md.col-4-lg
+
+
+
.col-6.col-3-md.col-4-lg
+
+
+
.col-6.col-3-md.col-4-lg
+
+
+
+
+
.col.col-6-lg
+
+
+
.col.col-3-lg
+
+
+
.col.col-3-lg
+
+
{% endhighlight %}
Mix-n-Match
You can use a combination of flexible and sized columns.
-
When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.
+
When using a combination, the sized width column takes the size specified and the remaining is filled in by the
+ flexible column.
.col-2
@@ -138,11 +197,19 @@
-
auto
-
auto
+
+
auto
+
+
+
auto
+
-
auto
-
auto
+
+
auto
+
+
+
auto
+
{% highlight html %}
@@ -163,23 +230,24 @@
auto
{% endhighlight %}
-
Pro tip: Create equal-width columns that span multiple rows by inserting a .is-full-width where you want the columns to break to a new line. Here .is-full-width is one of the utility class.
+
Pro tip: Create equal-width columns that span multiple rows by inserting a
+ .is-full-width where you want the columns to break to a new line. Here .is-full-width is
+ one of the utility class.
-
-
-
Reverse Direction
-
Add .reverse to the .row to reverse the column direction.
-
-
-
.col-6
+
+
Reverse Direction
+
Add .reverse to the .row to reverse the column direction.
+
+
+
.col-6
+
+
+
.col-3
+
+
+
.col-3
+
-
-
.col-3
-
-
-
.col-3
-
-
{% highlight html %}
@@ -193,5 +261,4 @@
{% endhighlight %}
-
-
+
\ No newline at end of file
diff --git a/docs/_includes/utilities.html b/docs/_includes/utilities.html
index a906096..fffa8d8 100644
--- a/docs/_includes/utilities.html
+++ b/docs/_includes/utilities.html
@@ -4,6 +4,7 @@
text-primary - Primary text
text-light - Light text
+
text-white - White text
text-dark - Dark text
text-grey - Grey text
text-error - Error text
@@ -14,6 +15,12 @@
bg-grey - Grey background
bg-error - Error background
bg-success - Success background
+
bd-primary - primary border
+
bd-light - Light border
+
bd-dark - Dark border
+
bd-grey - Grey border
+
bd-error - Error border
+
bd-success - Success border
pull-right - floats an element to the right
pull-left - floats an element to the left
is-text-center - center aligns text
@@ -34,7 +41,8 @@
is-marginless - removes any margin
clearfix - clears the floats
is-hidden - hides the element completely
-
hide-phone - hides the element for screens <480px
-
hide-tablet - hides the element for screens <768px
+
hide-sm - hides the element for screens <600px
+
hide-md - hides the element for screens >=600px and <=1200px