Skip to content

Commit

Permalink
feat: grid examples (#129)
Browse files Browse the repository at this point in the history 
* 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
@rolorogan
rolorogan committed Apr 1, 2021
1 parent 5db4adc commit 7ff3f01
Show file tree
Hide file tree
Showing 4 changed files with 571 additions and 1 deletion.
8 changes: 8 additions & 0 deletions src/wmcads/assets/sass/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,14 @@
justify-content: flex-end;
}

&.wmcads-grid--justify-center {
justify-content: center;
}

&.wmcads-grid--justify-even {
justify-content: space-evenly;
}

&.wmcads-grid--align-center {
align-items: center;
}
Expand Down
210 changes: 210 additions & 0 deletions src/www/pages/styles/examples/grid-column-spacing.njk
View file
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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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&amp;mode=crop&amp;width=576&amp;height=334&amp;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 %}
Loading

0 comments on commit 7ff3f01

Please sign in to comment.