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
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints" style="height: 100vh">
<h1 class="status-complete"><span>Breakpoints
<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>Breakpoint
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<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>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<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>
<tabset id="breakpoints">
<div tab="scss">
<pre class="language-sass">@import "[path-to]/breakpoints";
@include break([breakpoint]) {
<pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
@include breapoint.break([breakpoint]) {
// css here
}</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
@@ -24,12 +31,13 @@
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@mixin breakpoint-debug {
@mixin debug {
body::before, body::after {
background-color: #555;
color: white;
content: "bigger than extra large";
display: grid;
font-family: sans-serif;
font-size: 25px;
grid-template-columns: auto;
padding: 25px;

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

@@ -2,6 +2,13 @@
<html>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>

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

@@ -2,6 +2,13 @@
<html>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>

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

@@ -2,6 +2,13 @@
<html>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="status-report">
@@ -52,7 +59,7 @@
<td><span class="status-complete">Complete</span></td>
</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>
</tr>
<tr>
@@ -83,7 +90,7 @@
<td colspan="2"><span class="status-complete">Complete (10)</span></td>
</tr>
<tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td>
<td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td>Layouts</td>
</tr>
<tr>
@@ -136,7 +143,7 @@
<table role="presentation">
<tbody>
<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>Layouts</td>
</tr>

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

@@ -2,6 +2,13 @@
<html>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<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",""));
p.querySelectorAll("sticky-note").forEach((s) => {
@@ -312,6 +320,7 @@ export function init(p = document){
calculateStickyPosition(s);
});
}
}
}</pre>
</div>
</tabset>

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

@@ -2,6 +2,13 @@
<html>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>

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

@@ -2,6 +2,13 @@
<html>
<head>
<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>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
@@ -187,6 +194,7 @@
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !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;
color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow;
$font-family: $font-body;
font-size: 1rem;
font-weight: 400;
inline-size: max-content;

3
src/pg/_config.pug
View File

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

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

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