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

Move pug pattern files to .pp, check tab order

Browse Source
This commit is contained in:
A McIlwraith 2024-07-16 02:49:53 -04:00
parent 0036bcf0fd
commit fa708175b7
17 changed files with 188 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ds2 core.sublime-project
View File

@ -2,7 +2,11 @@
"folders":
[
{
"path": "."
"path": ".",
"folder_exclude_patterns": ["src/pg/patterns"]
},
{
"path": "./src/pg/patterns"
}
],
}

47
prepros.config
View File

@ -492,6 +492,9 @@
"resolveJsonModule": false,
"esModuleInterop": false,
"useDefineForClassFields": false
},
"custom-gzg6caunrh": {
"command": "cp {{input}} {{output}}"
}
},
"fileTypes": {
@ -955,6 +958,26 @@
"type": "SOURCE_RELATIVE",
"relativePath": ""
}
},
"custom-sm9kzo2npr": {
"autoCompile": true,
"label": "Pug pattern to pug file",
"extensions": [
".pp"
],
"tasks": [
{
"task": "custom-gzg6caunrh",
"enable": true
}
],
"output": {
"extension": ".pug",
"type": "SOURCE_RELATIVE",
"relativePath": "",
"suffix": "-dist",
"alwaysSuffix": false
}
}
},
"files": [
@ -1346,6 +1369,30 @@
}
}
},
{
"file": "src/pg/patterns/core/sticky-note/_sticky-note.pp",
"config": {
"autoCompile": true
}
},
{
"file": "src/pg/patterns/core/switch/_switch.pp",
"config": {
"autoCompile": true
}
},
{
"file": "src/pg/patterns/core/tabs/_tabs.pp",
"config": {
"autoCompile": true
}
},
{
"file": "src/pg/patterns/core/tooltip/_tooltip.pp",
"config": {
"autoCompile": true
}
},
{
"file": "src/pg/patterns/layouts/header-core/header.scss",
"config": {

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

@ -22,6 +22,89 @@
<!-- Other sections can go here, such as search and directory-->
</div>
</header></pre>
<pre class="language-html" data-tab="html">
<header>
<!-- The headline banner area -->
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<text>DS2 core</text>
</svg>
<div>
<div class="header-title">
<h1> <a href="./">DS2 core</a></h1>
</div>
<!-- Other sections can go here, such as search and directory-->
</div>
</header></pre>
<pre class="language-pug" data-tab="pug">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
//- required variables
//- site - the site name that goes in the site title
//- root - the path to the root of the site
header
// The headline banner area
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site
div
div.header-title
h1
a(href="./")= site
// Other sections can go here, such as search and directory
</pre>
<pre class="language-css" data-tab="css">header {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1.75rem 3.5rem;
grid-template-rows: 1.75rem 3.5rem;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2/4;
overflow: hidden;
}
header svg {
grid-column: 1/-1;
grid-row: 1/-1;
-ms-grid-row-align: stretch;
-ms-grid-column-align: stretch;
place-self: stretch;
}
header svg text {
-webkit-transform: translate(-1rem, 7.25rem);
-ms-transform: translate(-1rem, 7.25rem);
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: sans-serif;
fill: var(--colour-grey-xxl);
}
header > div {
-ms-grid-row: 2;
grid-row: 2;
grid-column: 1/-1;
display: -ms-grid;
display: grid;
grid-column-gap: 1rem;
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
-ms-grid-columns: auto max-content max-content;
grid-template-columns: auto -webkit-max-content -webkit-max-content;
grid-template-columns: auto max-content max-content;
}
header > div .header-title h1 {
margin: 0;
padding: 0 1rem;
}
header > div .header-title h1 a, header > div .header-title h1 a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: sans-serif;
font-size: 2.5rem;
font-size: 32px;
font-weight: 700;
margin: 0;
padding: 0;
text-decoration: none;
}</pre>
<pre class="language-sass" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@ -75,59 +158,6 @@ $font-weight: 700 !default;
}
}
}
}</pre>
<pre class="language-css" data-tab="css">header {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1.75rem 3.5rem;
grid-template-rows: 1.75rem 3.5rem;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2/4;
overflow: hidden;
}
header svg {
grid-column: 1/-1;
grid-row: 1/-1;
-ms-grid-row-align: stretch;
-ms-grid-column-align: stretch;
place-self: stretch;
}
header svg text {
-webkit-transform: translate(-1rem, 7.25rem);
-ms-transform: translate(-1rem, 7.25rem);
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: sans-serif;
fill: var(--colour-grey-xxl);
}
header > div {
-ms-grid-row: 2;
grid-row: 2;
grid-column: 1/-1;
display: -ms-grid;
display: grid;
grid-column-gap: 1rem;
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
-ms-grid-columns: auto max-content max-content;
grid-template-columns: auto -webkit-max-content -webkit-max-content;
grid-template-columns: auto max-content max-content;
}
header > div .header-title h1 {
margin: 0;
padding: 0 1rem;
}
header > div .header-title h1 a, header > div .header-title h1 a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: sans-serif;
font-size: 2.5rem;
font-size: 32px;
font-weight: 700;
margin: 0;
padding: 0;
text-decoration: none;
}</pre>
</div>
</body>

2
public/patterns/core/sticky-note/index.html
View File

@ -17,7 +17,7 @@
<tabset id="sticky-note">
<pre class="language-html" tab="html">
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
<pre class="language-pug" tab="pug">sticky-note(float="right").blue This <strong>is</strong> a sample sticky.
<pre class="language-pug" tab="pug">sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.</pre>
<pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");
sticky-note-wrapper {

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

@ -22,6 +22,10 @@
<div data-tab="[tab title]"></div>
<div data-tab="[tab title]"></div>
</div></pre>
<pre class="language-pug" tab="pug">div#uniqueID.tab-group
div(data-tab="[tab title]")
div(data-tab="[tab title]")
</pre>
<pre class="language-css" tab="css">tabset, .tab-group {
margin: 2rem 0 1rem 0;
}
@ -77,9 +81,9 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
<pre class="language-css" tab="scss">// DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0
$tab-border: var(--colour-grey) !default;
$tab-selected: var(--colour-white) !default;
$tab-notselected: var(--colour-grey-xxl) !default;
$tab-border: #7f7f7f !default;
$tab-selected: #FFF !default;
$tab-notselected: #f0f0f0 !default;
@mixin tabs {
tabset, .tab-group {

16
src/pg/patterns/core/header/_header.pp Normal file
View File

@ -0,0 +1,16 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
//- required variables
//- site - the site name that goes in the site title
//- root - the path to the root of the site
header
// The headline banner area
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site
div
div.header-title
h1
a(href="./")= site
// Other sections can go here, such as search and directory

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

@ -22,7 +22,11 @@ block content
- site= tmpsite
- root= tmproot
pre.language-sass(data-tab="scss")
include _header.scss
pre.language-html(data-tab="html")
include _header.pug
pre.language-pug(data-tab="pug")
include _header.pp
pre.language-css(data-tab="css")
include header.css
pre.language-sass(data-tab="scss")
include _header.scss

2
src/pg/patterns/core/sticky-note/_sticky-note.pp Normal file
View File

@ -0,0 +1,2 @@
sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.

2
src/pg/patterns/core/sticky-note/_sticky-note.pug Normal file
View File

@ -0,0 +1,2 @@
sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.

8
src/pg/patterns/core/sticky-note/index.pug
View File

@ -18,11 +18,9 @@ block content
tabset#sticky-note
pre.language-html(tab="html")
sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.
pre.language-pug(tab="pug").
sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.
include _sticky-note.pug
pre.language-pug(tab="pug")
include _sticky-note.pp
pre.language-css(data-tab="css")
include sticky-note.css
pre.language-css(data-tab="scss")

1
src/pg/patterns/core/switch/_switch.pp Normal file
View File

@ -0,0 +1 @@
span#example-id(role="switch")

2
src/pg/patterns/core/switch/switch.pug
View File

@ -1,2 +0,0 @@
.
span#example-id(role="switch")

4
src/pg/patterns/core/tabs/_tabs.pp Normal file
View File

@ -0,0 +1,4 @@
div#uniqueID.tab-group
div(data-tab="[tab title]")
div(data-tab="[tab title]")

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

@ -27,16 +27,12 @@ block content
tabset#tabs
pre.language-html(tab="html")
include _tabs.pug
//- pre.language-pug(tab="pug").
include _tabs.pug
pre.language-pug(tab="pug")
include _tabs.pp
pre.language-css(tab="css")
include tabs.css
pre.language-css(tab="scss")
include _tabs.scss
pre.language-css(tab="js")
include _tabs.js

5
src/pg/patterns/core/tooltip/_tooltip.pp Normal file
View File

@ -0,0 +1,5 @@
a(href="#") Link with a tool tip
div(role="tooltip" inert tip-position="bottom") Tool tip content
a(href="#") Link with a tool tip
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content

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

@ -5,14 +5,13 @@ extends ../../../core/_master-pattern
block content
+h(0)
+h(1)
+h(2)
p Either form works. Place this inside another element for the tooltip to be "linked to that element."
p Tool tip positions are:
ul
li top / block-start
@ -25,7 +24,7 @@ block content
pre.language-html(data-tab="html")
include _tooltip.pug
pre.language-pug(data-tab="pug")
include tooltip.pug
include _tooltip.pp
pre.language-css(data-tab="css")
include tooltip.css
pre.language-css(data-tab="scss")

6
src/pg/patterns/core/tooltip/tooltip.pug
View File

@ -1,6 +0,0 @@
.
a(href="#") Link with a tool tip
div(role="tooltip" inert tip-position="bottom") Tool tip content
a(href="#") Link with a tool tip
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content