Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

grid docs

Browse Source
This commit is contained in:
chomik
2018-03-07 09:18:42 +01:00
parent 03f427f45d
commit ae66e6f880
10 changed files with 85 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_docs/grid.md
+72 -1
View File
@@ -2,4 +2,75 @@
title: Grid utilities
icon: fe fe-grid
in_progress: true
---
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 %}
src/_includes/aside.html
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+2 -2
View File
@@ -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
+3 -3
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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">
src/_layouts/docs.html
+1 -2
View File
@@ -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
+2 -2
View File
@@ -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);