diff --git a/docs/grid.html b/docs/grid.html
index d9a3c3b..47d2bba 100644
--- a/docs/grid.html
+++ b/docs/grid.html
@@ -254,14 +254,14 @@
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using rows with content inside that is not in wrapped in columns. Try to use a single <code>.col-sm</code> to wrap the content inside these, otherwise there might be unexpected behavior.</p>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
- <pre> <div class="row">
+ <pre><div class="row">
<div class="col-sm">
<div>
<div class="col-sm-4">
</div>
</div>
<span class="fore-tertiary"><!-- or --></span>
- <div class="row">
+<div class="row">
<div class="col-sm-12">
<div>
<div class="col-sm-12">
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index 6525d8a..3aae028 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -58,6 +58,9 @@
h3 > a{
font-size: 1rem;
}
+ pre {
+ max-height: 400px;
+ }
</style>
</head>
<body>
@@ -94,7 +97,7 @@
<div class="col-sm">
<div class="card fluid">
<div class="section">
- <h2>Setup and usage</h2>
+ <h2>Setup & usage</h2>
</div>
<div class="section">
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p>
@@ -148,7 +151,7 @@
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
- <h3>Common textual elements <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
+ <h3>Common textual elements <a href="https://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
<pre><p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
<a href="#">This is a link.</a>
<small>This is some small text.</small>
@@ -163,7 +166,7 @@
</blockquote></pre>
</div>
<div class="col-sm-12 col-md-6">
- <h3>Lists & images<a href="http://codepen.io/chalarangelo/pen/woRKay" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
+ <h3>Lists & images<a href="https://codepen.io/chalarangelo/pen/woRKay" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
<pre><ul>
<li>Apple</li>
<li>Orange</li>
@@ -190,45 +193,179 @@
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
- <h3>Basic layout <a href="https://codepen.io/chalarangelo/pen/ZBVGMq" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
- <pre></pre>
+ <h3>Basic layout <a href="https://codepen.io/chalarangelo/pen/pNqNJw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
+ <pre><div class="container">
+ <div class="row">
+ <div class="col-sm-1">
+ </div>
+ <div class="col-sm-11">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-2">
+ </div>
+ <div class="col-sm-10">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-3">
+ </div>
+ <div class="col-sm-9">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-4">
+ </div>
+ <div class="col-sm-8">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-5">
+ </div>
+ <div class="col-sm-7">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-6">
+ </div>
+ <div class="col-sm-6">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">
+ </div>
+ <div class="row">
+ <div class="col-sm">
+ </div>
+ <div class="col-sm">
+ </div>
+ </div>
+</div></pre>
</div>
<div class="col-sm-12 col-md-6">
+ <h3>Notes</h3>
<ul>
- <li></li>
+ <li>Based on the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout Module</a></li>
+ <li>Grid structured as follows:
+ <ol>
+ <li><code>.container</code> serves as the grid system's wrapper</li>
+ <li>Multiple <code>.row</code> elements serve as the grid system's rows</li>
+ <li>Multiple <code>.col-<span class="fore-primary">SCR_SZ</span></code> and/or <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> elements specify serve as the grid system's columns (fluid and preset respectively)</li>
+ </ol>
+ </li>
+ <li><code><span class="fore-primary">SCR_SZ</span></code> values:
+ <ul>
+ <li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
+ <li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
+ <li><code><span class="fore-tertiary">lg</span></code> for screens wider than <code>1280px</code></li>
+ </ul>
+ </li>
+ <li><code><span class="fore-secondary">COL_WD</span></code> can be any integer value between <code>1</code> and <code>12</code> (both inclusive)</li>
+ <li>Fluid columns can create irregularly-sized columns in a layout</li>
+ <li>You can nest rows inside columns, but not columns inside columns or rows inside rows</li>
+ <li>An element can be a row and column at the same time</li>
+ <li>You can mix preset and fluid columns</li>
+ <li>Always wrap content in columns, never leave content unwrapped inside a row</li>
+ <li>Do not mix rows or columns with unwrapped content on the same level</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
- <h3>Screen-specific layouts <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
- <pre></pre>
+ <h3>Screen-specific layouts <a href="https://codepen.io/chalarangelo/pen/gLZLab" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
+ <pre><div class="container">
+ <div class="row">
+ <div class="col-sm">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12 col-md-3 col-lg-2">
+ </div>
+ <div class="col-sm-12 col-md-5 col-lg-7">
+ </div>
+ <div class="col-sm-12 col-md-4 col-lg-3">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm">
+ </div>
+ </div>
+</div></pre>
</div>
<div class="col-sm-12 col-md-6">
+ <h3>Notes</h3>
<ul>
- <li></li>
+ <li>Apply multiple column classes to the same element, one for each screen size, to define different layouts</li>
+ <li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
+ <li>Try to make page content vertical for smaller devices, using <code>.col-sm-12</code> and transition to two or three columns on larger screen sizes</li>
+ <li>Combine with offsets and reordering as shown below</li>
+ <li>You can omit the style of a screen size if it is the same one as the one applied in the immediately smaller screen size</li>
+ <li>Always start with a <code>.col-sm</code> or <code>.col-sm-<span class="fore-secondary">COL_WD</span></code> style, otherwise smaller devices will not display your content properly</li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
- <h3>Column offsets <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
- <pre></pre>
+ <h3>Column offsets <a href="https://codepen.io/chalarangelo/pen/pNqNjw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
+ <pre><div class="container">
+ <div class="row">
+ <div class="col-sm-10 col-sm-offset-1">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm col-sm-offset-2">
+ </div>
+ </div>
+<div class="row">
+ <div class="col-sm-6 col-sm-offset-3">
+ </div>
+</div>
+ <div class="row">
+ <div class="col-sm-8 col-sm-offset-4">
+ </div>
+ <div class="row">
+ <div class="col-sm-5 col-sm-offset-1">
+ </div>
+ <div class="col-sm-5 col-sm-offset-1">
+ </div>
+ </div>
+</div></pre>
</div>
<div class="col-sm-12 col-md-6">
+ <h3>Notes</h3>
<ul>
- <li></li>
+ <li>Create offsets using the <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-<span class="fore-secondary">COL_WD</span></code> classes</li>
+ <li><code><span class="fore-secondary">COL_WD</span></code> can be any integer from <code>0</code> to <code>11</code> (both inclusive)</li>
+ <li>You can mix offset columns and non-offset columns</li>
+ <li>Specify offsets in combination with existing column styling, not instead</li>
+ <li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
+ <li>You can omit offsets whenever not needed, but you will have to override existing offsets for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-offset-0</code></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
- <h3>Column reordering <a href="http://codepen.io/chalarangelo/pen/RoEWwK" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
- <pre></pre>
+ <h3>Column reordering <a href="https://codepen.io/chalarangelo/pen/vyvyNo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
+ <pre><div class="container">
+ <div class="row">
+ <div class="col-sm col-md-last col-lg-normal">
+ </div>
+ <div class="col-sm-first col-md-normal">
+ </div>
+ <div class="col-sm col-md-first col-lg-normal">
+ </div>
+ </div>
+</div></pre>
</div>
<div class="col-sm-12 col-md-6">
+ <h3>Notes</h3>
<ul>
- <li></li>
+ <li>Create reorders using <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code>, <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code> classes for first, last and normal ordering respectively</li>
+ <li>Default ordering is based on order of appearance</li>
+ <li>Specify reorders in combination with existing column styling, not instead</li>
+ <li>Mobile-first approach, styles specified for smaller screen sizes apply to larger screen sizes if no override is specified</li>
+ <li>You can use multiple <code>.col-<span class="fore-primary">SCR_SZ</span>-first</code> and <code>.col-<span class="fore-primary">SCR_SZ</span>-last</code> elements to group your elements according to the desired layout</li>
+ <li>You can omit reorders whenever not needed, but you will have to override existing reorders for larger screen sizes, using <code>.col-<span class="fore-primary">SCR_SZ</span>-normal</code></li>
</ul>
</div>
</div>
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md
index adab607..af78fa2 100644
--- a/docs/v2/DEVLOG.md
+++ b/docs/v2/DEVLOG.md
@@ -663,3 +663,4 @@
- Created `quick_reference.html` page for quick reference.
- Documented `core`'s quick reference with codepens etc.
- Updated link references to `v2.0.0` instead of `v2.0`.
+- Added documentation for `grid` module in the quick reference guide.