gamv/ds2-core
1
0
Fork 0
Code Issues 8 Releases 7 Activity

Completed descriptions for layout patterns

Browse Source
This commit is contained in:
A McIlwraith 2024-07-16 03:57:34 -04:00
parent 3c261881e9
commit 9cba20c39c
9 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
public/index.html
View File

@ -72,17 +72,17 @@
<h1 class="status-complete"><span>Layouts <h1 class="status-complete"><span>Layouts
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="layouts-header" data-name="header" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/header"> <article id="layouts-header" data-name="header" data-status="complete" data-template="pug" data-core="true" data-path="layouts/header">
<h1 class="status-in-progress"><span>Header <h1 class="status-complete"><span>Header
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="layouts-breakpoints" data-name="breakpoints" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/breakpoints"> <article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints">
<h1 class="status-in-progress"><span>Breakpoints <h1 class="status-complete"><span>Breakpoints
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="layouts-tabs" data-name="tabs" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/tabs"> <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs">
<h1 class="status-in-progress"><span>Tabs <h1 class="status-complete"><span>Tabs
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status"> <article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status">
<h1 class="status-complete"><span>Status <h1 class="status-complete"><span>Status

4
public/patterns/core/breakpoints/index.html
View File

@ -5,8 +5,12 @@
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
<p>Breakpoints enable responsive mobile design.</p>
<h2>When to use it</h2> <h2>When to use it</h2>
<p>Use breakpoints when designing for different screen sizes. </p>
<p>The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes. </p>
<h2>How to use it</h2> <h2>How to use it</h2>
<p>This pattern is only available for SCSS breakpoints. The mixin is avai</p>
<p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p> <p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
<div class="tab-group" id="breakpoints"> <div class="tab-group" id="breakpoints">
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith

3
public/patterns/core/header/index.html
View File

@ -5,8 +5,11 @@
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
<p>A header is layout pattern that helps the user identify the site. </p>
<h2>When to use it</h2> <h2>When to use it</h2>
<p>Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages. </p>
<h2>How to use it</h2> <h2>How to use it</h2>
<p>Place the header at the top of the page after the skip to main content link. This basic header should be replaced with your own site's header. </p>
<div class="tab-group" id="header"> <div class="tab-group" id="header">
<pre class="language-html" data-tab="html"> <pre class="language-html" data-tab="html">
<!-- create temp variables and store the design system values--> <!-- create temp variables and store the design system values-->

36
public/patterns/core/status/index.html
View File

@ -49,15 +49,15 @@
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete</span></td>
<tr> <tr>
<td><a href="./?p=layouts/header"> Header</a></td> <td><a href="./?p=layouts/header"> Header</a></td>
<td><span class="status-in-progress">In progress</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td> <td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td>
<td><span class="status-in-progress">In progress</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=layouts/tabs"> Tabs</a></td> <td><a href="./?p=layouts/tabs"> Tabs</a></td>
<td><span class="status-in-progress">In progress</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
</tr> </tr>
<tr> <tr>
@ -77,23 +77,15 @@
<td colspan="2"><span class="status-not-started">Not started (0)</span></td> <td colspan="2"><span class="status-not-started">Not started (0)</span></td>
</tr> </tr>
<tr> <tr>
<td colspan="2"><span class="status-in-progress">In progress (3)</span></td> <td colspan="2"><span class="status-in-progress">In progress (0)</span></td>
</tr>
<tr>
<td colspan="2"><span class="status-complete">Complete (10)</span></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td> <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr>
<td> <a href="./?p=layouts/header">Header</a></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td>Layouts</td>
</tr>
<tr>
<td colspan="2"><span class="status-complete">Complete (7)</span></td>
</tr>
<tr> <tr>
<td> <a href="./?p=colours">Colours</a></td> <td> <a href="./?p=colours">Colours</a></td>
<td></td> <td></td>
@ -102,6 +94,10 @@
<td> <a href="./?p=components">Components</a></td> <td> <a href="./?p=components">Components</a></td>
<td></td> <td></td>
</tr> </tr>
<tr>
<td> <a href="./?p=layouts/header">Header</a></td>
<td>Layouts</td>
</tr>
<tr> <tr>
<td> <a href="./?p=layouts">Layouts</a></td> <td> <a href="./?p=layouts">Layouts</a></td>
<td></td> <td></td>
@ -118,6 +114,10 @@
<td> <a href="./?p=components/switch">Switch</a></td> <td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td>Layouts</td>
</tr>
<tr> <tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td> <td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td>Components</td> <td>Components</td>
@ -137,7 +137,7 @@
<tbody> <tbody>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td> <td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td> <td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
@ -152,7 +152,7 @@
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/header">Header</a></td> <td> <a href="./?p=layouts/header">Header</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td> <td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
@ -177,7 +177,7 @@
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td> <td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td> <td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>

3
public/patterns/core/tabs/index.html
View File

@ -5,7 +5,7 @@
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
<h2>When to use it</h2> <p>A tabs component that provides different sections of content that are displayed one at a time when the user selects that information. </p>
<h2>How to use it</h2> <h2>How to use it</h2>
<p>The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should </p> <p>The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should </p>
<ul> <ul>
@ -15,6 +15,7 @@
<li>obvious where they begin and end </li> <li>obvious where they begin and end </li>
</ul> </ul>
<p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p> <p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p>
<h2>When to use it</h2>
<p>The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p> <p>The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p>
<tabset id="tabs"> <tabset id="tabs">
<pre class="language-html" tab="html"> <pre class="language-html" tab="html">

6
src/pg/_config.pug
View File

@ -45,17 +45,17 @@
files: [ files: [
{ {
name: "header", name: "header",
status: "in-progress", status: "complete",
core: true, core: true,
}, },
{ {
name: "breakpoints", name: "breakpoints",
status: "in-progress", status: "complete",
core: true, core: true,
}, },
{ {
name: "tabs", name: "tabs",
status: "in-progress", status: "complete",
core: true, core: true,
}, },
] ]

7
src/pg/patterns/core/breakpoints/index.pug
View File

@ -5,8 +5,15 @@ extends ../../../core/_master-pattern
block content block content
+h(0) +h(0)
p Breakpoints enable responsive mobile design.
+h(1) +h(1)
p Use breakpoints when designing for different screen sizes.
p The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes.
+h(2) +h(2)
p This pattern is only available for SCSS breakpoints. The mixin is avai
p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.

5
src/pg/patterns/core/header/index.pug
View File

@ -5,8 +5,13 @@ extends ../../../core/_master-pattern
block content block content
+h(0) +h(0)
p A header is layout pattern that helps the user identify the site.
+h(1) +h(1)
p Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages.
+h(2) +h(2)
p Place the header at the top of the page after the skip to main content link. This basic header should be replaced with your own site's header.
div.tab-group#header div.tab-group#header
pre.language-html(data-tab="html") pre.language-html(data-tab="html")

8
src/pg/patterns/core/tabs/index.pug
View File

@ -5,9 +5,9 @@ extends ../../../core/_master-pattern
block content block content
+h(0) +h(0)
+h(1) p A tabs component that provides different sections of content that are displayed one at a time when the user selects that information.
+h(2)
+h(2)
p The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should p The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should
ul ul
@ -19,11 +19,9 @@ block content
p Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. p Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content.
+h(1)
p The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content). p The tab module can be initialised by importing a file with the javascript module using import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js"; contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).
tabset#tabs tabset#tabs
pre.language-html(tab="html") pre.language-html(tab="html")
include _tabs.pug include _tabs.pug