From ae66e6f880267b65d6509d538955febf65be7ed3 Mon Sep 17 00:00:00 2001
From: chomik <codecalm@gmail.com>
Date: Wed, 7 Mar 2018 09:18:42 +0100
Subject: [PATCH] grid docs

---
 src/_docs/grid.md                          | 73 +++++++++++++++++++++-
 src/_includes/aside.html                   |  2 +-
 src/_includes/cards/chat.html              |  2 +-
 src/_includes/cards/company-lookup.html    |  2 +-
 src/_includes/cards/credit-card.html       |  4 +-
 src/_includes/cards/form-all-elements.html |  6 +-
 src/_includes/cards/match.html             |  2 +-
 src/_includes/parts/input-image.html       |  2 +-
 src/_layouts/docs.html                     |  3 +-
 src/assets/scss/dashboard/_grid.scss       |  4 +-
 10 files changed, 85 insertions(+), 15 deletions(-)

diff --git a/src/_docs/grid.md b/src/_docs/grid.md
index 9d577a9f5..08ada9122 100644
--- a/src/_docs/grid.md
+++ b/src/_docs/grid.md
@@ -2,4 +2,75 @@
 title: Grid utilities
 icon: fe fe-grid
 in_progress: true
----
\ No newline at end of file
+description: Quickly and easily create layouts with the basic 12-column.
+---
+
+### Basic layout
+
+Create basic grid layout using columns. With `.row` and `.col`, we can easily manipulate the layout.
+
+{% example html %}
+<div class="row mb-3">
+  <div class="col-12"><div class="h-5 bg-gray-lighter rounded"></div></div>
+</div>
+<div class="row mb-3">
+  <div class="col-6"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-6"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+<div class="row mb-3">
+  <div class="col-4"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-4"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-4"><div class="h-5 bg-gray-lighter rounded"></div></div>
+</div>
+<div class="row mb-3">
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+<div class="row mb-3">
+  <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-2"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-2"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+{% endexample %}
+
+### Column spacing
+
+Row provides `.gutters-[size]` attribute to specify spacings between columns.
+
+{% example html %}
+<div class="row gutters-0 mb-3">
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+<div class="row gutters-xs mb-3">
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+<div class="row gutters-sm mb-3">
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+<div class="row gutters-md mb-3">
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+<div class="row gutters-lg mb-3">
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lighter rounded"></div></div>
+  <div class="col-3"><div class="h-5 bg-gray-lightest rounded"></div></div>
+</div>
+{% endexample %}
\ No newline at end of file
diff --git a/src/_includes/aside.html b/src/_includes/aside.html
index db74c326e..b64a3dffd 100644
--- a/src/_includes/aside.html
+++ b/src/_includes/aside.html
@@ -16,7 +16,7 @@
 		{% include chat-content.html %}
 	</div>
 	<div class="aside-footer">
-		<div class="row xs-gutters">
+		<div class="row gutters-xs">
 			<div class="col">
 				<input type="text" class="form-control" placeholder="Message to Bob&hellip;">
 			</div>
diff --git a/src/_includes/cards/chat.html b/src/_includes/cards/chat.html
index f9d518765..2ffa49ef0 100644
--- a/src/_includes/cards/chat.html
+++ b/src/_includes/cards/chat.html
@@ -6,7 +6,7 @@
 		{% include chat-content.html %}
 	</div>
 	<div class="card-footer">
-		<div class="row xs-gutters">
+		<div class="row gutters-xs">
 			<div class="col">
 				<input type="text" class="form-control" placeholder="Message to Bob&hellip;">
 			</div>
diff --git a/src/_includes/cards/company-lookup.html b/src/_includes/cards/company-lookup.html
index bdab64cc6..79fe7296e 100644
--- a/src/_includes/cards/company-lookup.html
+++ b/src/_includes/cards/company-lookup.html
@@ -41,7 +41,7 @@
 		</div>
 	</div>
 	<div class="card-body">
-		<div class="row lg-gutters">
+		<div class="row gutters-lg">
 			<div class="col-7">
 				<div class="row mb-5">
 					<div class="col">
diff --git a/src/_includes/cards/credit-card.html b/src/_includes/cards/credit-card.html
index 3b6e8abb4..634ae9962 100644
--- a/src/_includes/cards/credit-card.html
+++ b/src/_includes/cards/credit-card.html
@@ -10,10 +10,10 @@
 			<input type="text" class="form-control">
 		</div>
 		<div class="form-group">
-			<div class="row sm-gutters">
+			<div class="row gutters-sm">
 				<div class="col">
 					<label class="form-label">Expiry Date</label>
-					<div class="row sm-gutters">
+					<div class="row gutters-sm">
 						<div class="col">
 							<select name="" class="form-control custom-select">
 								<option value="">January</option>
diff --git a/src/_includes/cards/form-all-elements.html b/src/_includes/cards/form-all-elements.html
index 0010e8b80..266c53f46 100644
--- a/src/_includes/cards/form-all-elements.html
+++ b/src/_includes/cards/form-all-elements.html
@@ -66,7 +66,7 @@
 
 				<div class="form-group">
 					<label class="form-label">Separated inputs</label>
-					<div class="row xs-gutters">
+					<div class="row gutters-xs">
 						<div class="col">
 							<input type="text" class="form-control" placeholder="Search for...">
 						</div>
@@ -77,7 +77,7 @@
 				</div>
 				<div class="form-group">
 					<label class="form-label">ZIP Code</label>
-					<div class="row sm-gutters">
+					<div class="row gutters-sm">
 						<div class="col">
 							<input type="text" class="form-control" placeholder="Search for...">
 						</div>
@@ -318,7 +318,7 @@
 
 				<div class="form-group">
 					<label class="form-label">Date of birth</label>
-					<div class="row xs-gutters">
+					<div class="row gutters-xs">
 						<div class="col-5">
 							<select name="user[month]" class="form-control custom-select">
 								<option value="">Month</option>
diff --git a/src/_includes/cards/match.html b/src/_includes/cards/match.html
index b307d0861..8d6fe8f3e 100644
--- a/src/_includes/cards/match.html
+++ b/src/_includes/cards/match.html
@@ -3,7 +3,7 @@
 		<h3 class="card-title">Match results</h3>
 	</div>
 	<div class="card-body">
-		<div class="row align-items-center sm-gutters">
+		<div class="row align-items-center gutters-sm">
 			<div class="col text-left">
 				<img src="assets/images/teams/real-madrid.png" alt="">
 			</div>
diff --git a/src/_includes/parts/input-image.html b/src/_includes/parts/input-image.html
index b9beac95b..9dc257dd1 100644
--- a/src/_includes/parts/input-image.html
+++ b/src/_includes/parts/input-image.html
@@ -1,7 +1,7 @@
 {% assign limit = include.limit | default: 9 %}
 <div class="form-group">
 	<label class="form-label">Image Check</label>
-	<div class="row sm-gutters">
+	<div class="row gutters-sm">
 		{% for photo in site.data.photos limit: limit offset: 30 %}
 		<div class="{{ include.row-class | default: 'col-6 col-sm-4' }}">
 			<label class="imagecheck mb-4">
diff --git a/src/_layouts/docs.html b/src/_layouts/docs.html
index dd7a1f27c..164a3221b 100644
--- a/src/_layouts/docs.html
+++ b/src/_layouts/docs.html
@@ -40,8 +40,7 @@ title: Documentation
 
 						{% if page.in_progress %}
 						<div class="alert alert-primary mt-5 mb-6">
-							<h4 class="mb-1">Work in progress!</h4>
-							<div>More detailed documentation is coming soon, but in the meantime here's a quick class reference.</div>
+							<div><strong>Work in progress!</strong> More detailed documentation is coming soon.</div>
 						</div>
 						{% endif %}
 
diff --git a/src/assets/scss/dashboard/_grid.scss b/src/assets/scss/dashboard/_grid.scss
index bc9fdd89f..d01ca5de3 100644
--- a/src/assets/scss/dashboard/_grid.scss
+++ b/src/assets/scss/dashboard/_grid.scss
@@ -32,8 +32,8 @@
 	max-width: 24rem;
 }
 
-@each $name, $value in (xs: .25rem, sm: .5rem, lg: 1rem, xl: 1.5rem) {
-	.#{$name}-gutters {
+@each $name, $value in (0: 0, xs: .25rem, sm: .5rem, lg: 1rem, xl: 1.5rem) {
+	.gutters-#{$name} {
 		margin-right: (-$value);
 		margin-left: -($value);