-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* fix justify center & add justify even * new: example pages to show how to use the grid * re-add wmcads-grid--align-center to utilities
- Loading branch information
Showing
4 changed files
with
571 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,210 @@ | ||
{% extends "www/_layouts/layout-left-pane.njk" %} | ||
{% set pageTitle = "Grid column spacing" %} | ||
{% set section = "Styles" %} | ||
|
||
{% block content %} | ||
<h2>Introduction to wmcads Grid column spacing</h2> | ||
<p> | ||
Spacing can be applied in between <code class="wmcads-website-inline-code">.wmcads-col-*</code> elements by adding a class to the parent <code class="wmcads-website-inline-code">.wmcads-grid</code>. | ||
</p> | ||
<p> | ||
The classes are named using the format <code class="wmcads-website-inline-code">.wmcads-grid--spacing-{col-count}-{size}</code>. | ||
</p> | ||
<p> | ||
Where <code class="wmcads-website-inline-code">{col-count}</code> is the number of columns per row and <code class="wmcads-website-inline-code">{size}</code> is the same as in the spacing utility classes above. | ||
</p> | ||
<p> | ||
Spacing can also be applied responsively using the format <code class="wmcads-website-inline-code">.wmcads-grid--spacing-{breakpoint}-{col-count}-{size}</code>. | ||
</p> | ||
<p> | ||
Where <code class="wmcads-website-inline-code">{breakpoint}</code> is one of breakpoint sizes described in the grid section. | ||
</p> | ||
|
||
<h3>When to use Grid column spacing</h3> | ||
<ul> | ||
<li>Use when you require more control over child item spacing</li> | ||
<li>Use only when the number of child items do not change</li> | ||
</ul> | ||
|
||
<h2>Examples</h2> | ||
|
||
<h3>Example 1</h3> | ||
<p>This example shows the use of the wmcads-content-card component displayed in a grid of thirds with spacing of 1rem. </p> | ||
|
||
<div class="wmcads-grid wmcads-grid--spacing-3-md"> | ||
<div class="wmcads-col-1-3"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Who weve funded</h3> | ||
<p>See which councils and providers weve funded, and what for.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-3"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Find training schemes</h3> | ||
<p>You can find training and education providers weve funded online.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-3"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Contact us</h3> | ||
<p>Get in touch if you want to know more about the budget.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<pre> | ||
<code class="html wmcads-show-more-ignore" tabindex="0"> | ||
{%- filter forceescape %} | ||
<div class="wmcads-grid wmcads-grid--spacing-3-md"> | ||
<div class="wmcads-col-1-3"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Who weve funded</h3> | ||
<p>See which councils and providers weve funded, and what for.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-3"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Find training schemes</h3> | ||
<p>You can find training and education providers weve funded online.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-3"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Contact us</h3> | ||
<p>Get in touch if you want to know more about the budget.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
{%- endfilter %} | ||
</code> | ||
</pre> | ||
|
||
<hr> | ||
<h3>Example 2</h3> | ||
<p>This example shows the use of the wmcads-content-card component displayed in a half grid with spacing of 2rem. </p> | ||
|
||
<div class="wmcads-grid wmcads-grid--spacing-2-lg"> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Who weve funded</h3> | ||
<p>See which councils and providers weve funded, and what for.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Find training schemes</h3> | ||
<p>You can find training and education providers weve funded online.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<pre> | ||
<code class="html wmcads-show-more-ignore" tabindex="0"> | ||
{%- filter forceescape %} | ||
<div class="wmcads-grid wmcads-grid--spacing-2-lg"> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Who weve funded</h3> | ||
<p>See which councils and providers weve funded, and what for.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Find training schemes</h3> | ||
<p>You can find training and education providers weve funded online.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
{%- endfilter %} | ||
</code> | ||
</pre> | ||
|
||
<hr> | ||
<h3>Example 3</h3> | ||
<p>This example shows the use of the wmcads-content-card component displayed in a half grid with spacing controlled by breakpoints. </p> | ||
|
||
<div class="wmcads-grid wmcads-grid--spacing-2-lg wmcads-grid--spacing-md-2-md"> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Who weve funded</h3> | ||
<p>See which councils and providers weve funded, and what for.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Find training schemes</h3> | ||
<p>You can find training and education providers weve funded online.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<pre> | ||
<code class="html wmcads-show-more-ignore" tabindex="0"> | ||
{%- filter forceescape %} | ||
<div class="wmcads-grid wmcads-grid--spacing-2-lg wmcads-grid--spacing-md-2-md"> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Who weve funded</h3> | ||
<p>See which councils and providers weve funded, and what for.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="wmcads-col-1-2"> | ||
<div class="wmcads-content-card"> | ||
<img src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg?anchor=center&mode=crop&width=576&height=334&rnd=132122595620000000" alt="content image"> | ||
<div class="wmcads-p-sm"> | ||
<h3>Find training schemes</h3> | ||
<p>You can find training and education providers weve funded online.</p> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
{%- endfilter %} | ||
</code> | ||
</pre> | ||
|
||
<p>The default spacing is 0.75rem (wmcads-grid--spacing-2-sm). Once the page width goes over 768px the spacing changes to 1rem (wmcads-grid--spacing-md-2-md).</p> | ||
|
||
|
||
|
||
|
||
|
||
{% endblock %} |
Oops, something went wrong.