From 7ff3f0111f95a781d4ff821c3a23b6f23e26e0c3 Mon Sep 17 00:00:00 2001 From: Nathan Rogan Date: Thu, 1 Apr 2021 14:42:35 +0100 Subject: [PATCH] feat: grid examples (#129) * fix justify center & add justify even * new: example pages to show how to use the grid * re-add wmcads-grid--align-center to utilities --- src/wmcads/assets/sass/_utilities.scss | 8 + .../styles/examples/grid-column-spacing.njk | 210 +++++++++++ .../pages/styles/examples/grid-examples.njk | 335 ++++++++++++++++++ .../pages/styles/utility-classes/index.njk | 19 +- 4 files changed, 571 insertions(+), 1 deletion(-) create mode 100644 src/www/pages/styles/examples/grid-column-spacing.njk create mode 100755 src/www/pages/styles/examples/grid-examples.njk diff --git a/src/wmcads/assets/sass/_utilities.scss b/src/wmcads/assets/sass/_utilities.scss index d3588258..9de06e2b 100755 --- a/src/wmcads/assets/sass/_utilities.scss +++ b/src/wmcads/assets/sass/_utilities.scss @@ -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; } diff --git a/src/www/pages/styles/examples/grid-column-spacing.njk b/src/www/pages/styles/examples/grid-column-spacing.njk new file mode 100644 index 00000000..5480281e --- /dev/null +++ b/src/www/pages/styles/examples/grid-column-spacing.njk @@ -0,0 +1,210 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle = "Grid column spacing" %} +{% set section = "Styles" %} + +{% block content %} +

Introduction to wmcads Grid column spacing

+

+ Spacing can be applied in between .wmcads-col-* elements by adding a class to the parent .wmcads-grid. +

+

+ The classes are named using the format .wmcads-grid--spacing-{col-count}-{size}. +

+

+ Where {col-count} is the number of columns per row and {size} is the same as in the spacing utility classes above. +

+

+ Spacing can also be applied responsively using the format .wmcads-grid--spacing-{breakpoint}-{col-count}-{size}. +

+

+ Where {breakpoint} is one of breakpoint sizes described in the grid section. +

+ +

When to use Grid column spacing

+ + +

Examples

+ +

Example 1

+

This example shows the use of the wmcads-content-card component displayed in a grid of thirds with spacing of 1rem.

+ +
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+
+ content image +
+

Find training schemes

+

You can find training and education providers weve funded online.

+
+
+
+
+
+ content image +
+

Contact us

+

Get in touch if you want to know more about the budget.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+    

+        

+            content image
+            

+                
Find training schemes

+                
You can find training and education providers weve funded online.

+            

+        

+    

+    

+        

+            content image
+            

+                
Contact us

+                
Get in touch if you want to know more about the budget.

+            

+        

+    

+

+  {%- endfilter %}
+  
+
+ +
+

Example 2

+

This example shows the use of the wmcads-content-card component displayed in a half grid with spacing of 2rem.

+ +
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+
+ content image +
+

Find training schemes

+

You can find training and education providers weve funded online.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+    

+        

+            content image
+            

+                
Find training schemes

+                
You can find training and education providers weve funded online.

+            

+        

+    

+  

+  {%- endfilter %}
+  
+
+ +
+

Example 3

+

This example shows the use of the wmcads-content-card component displayed in a half grid with spacing controlled by breakpoints.

+ +
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+
+ content image +
+

Find training schemes

+

You can find training and education providers weve funded online.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+    

+        

+            content image
+            

+                
Find training schemes

+                
You can find training and education providers weve funded online.

+            

+        

+    

+

+  {%- endfilter %}
+  
+
+ +

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

+ + + + + +{% endblock %} \ No newline at end of file diff --git a/src/www/pages/styles/examples/grid-examples.njk b/src/www/pages/styles/examples/grid-examples.njk new file mode 100755 index 00000000..70b1aeee --- /dev/null +++ b/src/www/pages/styles/examples/grid-examples.njk @@ -0,0 +1,335 @@ +{% extends "www/_layouts/layout-left-pane.njk" %} +{% set pageTitle = "Grid Examples" %} +{% set section = "Styles" %} +{% from "www/_partials/component-example/component-example.njk" import compExample %} + +{% block content %} +

Introduction to wmcads Grids

+

Grid classes vs. unit classes

+

wmcads Grids consist of two types of classes: the grid class (wmcads-grid) and unit classes (wmcads-col-*)

+

The widths of the units are fractions

+

Units have various class names that represent their widths. For example, wmcads-u-1-2 has a width of 50%, whereas wmcads-u-1-5 would have a width of 20%.

+

All child elements of a grid must be units

+

Child elements contained within an element with a wmcads-grid classname must be a grid unit with a wmcads-col-* classname.

+

Content goes inside grid units

+

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

+ +

Examples

+

Let's start with a simple example. Here's a grid with three columns:

+ +
+

Thirds

+

Thirds

+

Thirds

+
+ +
+  
+  {%- filter forceescape %}
+  

+    
Thirds

+    
Thirds

+    
Thirds

+  

+  {%- endfilter %}
+  
+
+ +

The above example will keep the columns the same width no matter the page width.

+ +

Adding responsive classes

+

We can control the width by adding responsive classes.

+ +

When using Responsive Grids, you can control how the grid behaves at specific breakpoints by adding class names. wmcads default responsive grids comes with the following class names and media query breakpoints.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Default Media Queries
KeyCSS Media QueryAppliesClassname
NoneNoneAlways.wmcads-col-*
sm@media screen and (min-width: 35.5em)≥ 568px.wmcads-col-sm-*
md@media screen and (min-width: 48em)≥ 768px.wmcads-col-md-*
lg@media screen and (min-width: 64em)≥ 1024px.wmcads-col-lg-*
xl@media screen and (min-width: 80em)≥ 1280px.wmcads-col-xl-*
+ +

Let's modify the example so the columns become full width on mobile:

+ +
+

Thirds

+

Thirds

+

Thirds

+
+ +
+  
+  {%- filter forceescape %}
+  

+    
Thirds

+    
Thirds

+    
Thirds

+  

+  {%- endfilter %}
+  
+
+ +

The above example has a default width of 1 (wmcads-col-1) so when the page is viewed below 586px the columns will display full width. When the page is viewed over 586px the columns will appear in 3 coloumns (wmcads-col-sm-1-3). + + +

Justify Content

+ +

You can justify the grid content bby adding these classes:

+ +

wmcads-grid--justify-between

+

Items will have space between them

+ +
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+
+ content image +
+

Find training schemes

+

You can find training and education providers weve funded online.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+    

+        

+            content image
+            

+                
Find training schemes

+                
You can find training and education providers weve funded online.

+            

+        

+    

+  

+  {%- endfilter %}
+  
+
+ +
+

wmcads-grid--justify-around

+

Items will have space before, between, and after them

+
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+
+ content image +
+

Find training schemes

+

You can find training and education providers weve funded online.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+    

+        

+            content image
+            

+                
Find training schemes

+                
You can find training and education providers weve funded online.

+            

+        

+    

+  

+  {%- endfilter %}
+  
+
+ +
+

wmcads-grid--justify-end

+

Items are positioned at the end of the container

+
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+  

+  {%- endfilter %}
+  
+
+ +
+

wmcads-grid--justify-center

+

Items are positioned in the center of the container

+
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+  

+  {%- endfilter %}
+  
+
+ +
+

wmcads-grid--justify-even

+

Items will have equal space around them

+
+
+
+ content image +
+

Who weve funded

+

See which councils and providers weve funded, and what for.

+
+
+
+
+
+ content image +
+

Find training schemes

+

You can find training and education providers weve funded online.

+
+
+
+
+ +
+  
+  {%- filter forceescape %}
+  

+    

+        

+            content image
+            

+                
Who weve funded

+                
See which councils and providers weve funded, and what for.

+            

+        

+    

+    

+        

+            content image
+            

+                
Find training schemes

+                
You can find training and education providers weve funded online.

+            

+        

+    

+  

+  {%- endfilter %}
+  
+
+ +{% endblock %} \ No newline at end of file diff --git a/src/www/pages/styles/utility-classes/index.njk b/src/www/pages/styles/utility-classes/index.njk index 312b3d3b..dc7067b2 100755 --- a/src/www/pages/styles/utility-classes/index.njk +++ b/src/www/pages/styles/utility-classes/index.njk @@ -1,6 +1,7 @@ {% extends "www/_layouts/layout-left-pane.njk" %} {% set pageTitle = "Utility classes" %} {% set section = "Styles" %} +{% from "wmcads/components/link/link/_link.njk" import wmcadsLink %} {% block content %} {# About #} @@ -54,6 +55,14 @@ +{{ + wmcadsLink( { + link: "/styles/examples/grid-examples.html", + text: "Grid examples" + } + ) +}} +

Information for designers

The grid is part of the Design System Sketch library or as a standalone template file. @@ -236,6 +245,15 @@ Where {size} is one of: +{{ + wmcadsLink( { + link: "/styles/examples/grid-column-spacing.html", + text: "Grid column spacing examples" + } + ) +}} +

+

{# Background #}

Background Colour

@@ -248,7 +266,6 @@ Where {size} is one of: .bg-default .bg-white .bg-disabled-elements - .bg-planned-disruption .bg-transparent