grid docs

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

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>

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>

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">

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>

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>

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>

src/_includes/parts/input-image.html

 {% 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">

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 %}
 

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);