gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 Activity

Fixes #34 some issues with breakpoints

Browse Source
This commit is contained in:
A McIlwraith
2025-06-10 16:20:24 -04:00
parent 8fe6e39440
commit 5141878b4b
10 changed files with 97 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -76,8 +76,8 @@
<h1 class="status-complete"><span>Header <h1 class="status-complete"><span>Header
<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-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints" style="height: 100vh"> <article id="layouts-breakpoint" data-name="breakpoint" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoint" style="height: 100vh">
<h1 class="status-complete"><span>Breakpoints <h1 class="status-complete"><span>Breakpoint
<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-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh"> <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh">

14
public/patterns/core/breakpoints/index.html → public/patterns/core/breakpoint/index.html
View File

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@@ -14,8 +21,8 @@
<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>
<tabset id="breakpoints"> <tabset id="breakpoints">
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "[path-to]/breakpoints"; <pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
@include break([breakpoint]) { @include breapoint.break([breakpoint]) {
// css here // css here
}</pre> }</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
@@ -24,12 +31,13 @@
// default breakpoints match bootstrap 5 breakpoints. // default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default; $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@mixin breakpoint-debug { @mixin debug {
body::before, body::after { body::before, body::after {
background-color: #555; background-color: #555;
color: white; color: white;
content: "bigger than extra large"; content: "bigger than extra large";
display: grid; display: grid;
font-family: sans-serif;
font-size: 25px; font-size: 25px;
grid-template-columns: auto; grid-template-columns: auto;
padding: 25px; padding: 25px;

7
public/patterns/core/colours/index.html
View File

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>

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

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>

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

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="status-report"> <div class="tab-group" id="status-report">
@@ -52,7 +59,7 @@
<td><span class="status-complete">Complete</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/breakpoint"> Breakpoint</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
<tr> <tr>
@@ -83,7 +90,7 @@
<td colspan="2"><span class="status-complete">Complete (10)</span></td> <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/breakpoint">Breakpoint</a></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
@@ -136,7 +143,7 @@
<table role="presentation"> <table role="presentation">
<tbody> <tbody>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td> <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>

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

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@@ -279,7 +286,8 @@ const calculateStickyPosition = (s) => {
} }
} }
export function init(p = document){ module.exports = {
init: (p = document) => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px","")); font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
p.querySelectorAll("sticky-note").forEach((s) => { p.querySelectorAll("sticky-note").forEach((s) => {
@@ -312,6 +320,7 @@ export function init(p = document){
calculateStickyPosition(s); calculateStickyPosition(s);
}); });
} }
}
}</pre> }</pre>
</div> </div>
</tabset> </tabset>

7
public/patterns/core/switch/index.html
View File

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>

9
public/patterns/core/tooltip/index.html
View File

@@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@@ -187,6 +194,7 @@
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0 //- Licensed under CC BY-SA 4.0
$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default; $tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default; $tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default; $tooltip-dark-background: #1f2127 !default;
@@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
border-radius: $tooltip-border-radius; border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground; color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow; filter: $tooltip-light-drop-shadow;
$font-family: $font-body;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
inline-size: max-content; inline-size: max-content;

3
src/pg/_config.pug
View File

@@ -2,6 +2,7 @@
- var lang = "en-uk" - var lang = "en-uk"
- var colorpfx = "colour" - var colorpfx = "colour"
- var headings = ["What is it", "When to use it", "How to use it"] - var headings = ["What is it", "When to use it", "How to use it"]
- var downloadExtensions = ["js", "pug", "scss"]
- var generateColourToken = ["colours"] - var generateColourToken = ["colours"]
- -
@@ -49,7 +50,7 @@
core: true, core: true,
}, },
{ {
name: "breakpoints", name: "breakpoint",
status: "complete", status: "complete",
core: true, core: true,
}, },

6
src/pg/patterns/core/breakpoint/index.pug
View File

@@ -21,10 +21,10 @@ block content
div(tab="scss") div(tab="scss")
+h(3) +h(3)
pre.language-sass. pre.language-sass.
@import "scss/core/breakpoints/breakpoints"; @use "scss/core/breakpoint/breakpoint";
@include break([breakpoint]) { @include breapoint.break([breakpoint]) {
// css here // css here
} }
+h(4) +h(4)
pre.language-sass pre.language-sass
include _breakpoints.scss include _breakpoint.scss