<h1>Grid toggle</h1>
<p>Slå av eller på en synlig grid för att se baslinjeraster.</p>
<button type="button" class="grid-toggle">Grid</button>
<h1>{{title}}</h1>
<p>{{description}}</p>
<button type="button" class="grid-toggle">Grid</button>
{
"title": "Grid toggle",
"description": "Slå av eller på en synlig grid för att se baslinjeraster."
}
@charset 'UTF-8';
@use "sass:math";
$guide: #4bffff !default;
$rgba: rgba !default;
@include b(grid-toggle) {
position: fixed;
right: 40px;
bottom: 40px;
width: 60px;
height: 60px;
border: 0;
border-radius: 50%;
background: $color-ruby;
color: $color-snow;
font-size: 0.7rem;
}
@include b(baseline-grid) {
height: 1000%;
background-image: linear-gradient(to top, $guide 0, $guide 1px, transparent 1px);
background-size: 100% math.div(1rem, 2);
}
const element = document.querySelector('.grid-toggle');
function classToggle() {
const body = document.querySelector('body');
body.classList.toggle('baseline-grid');
}
if (element) {
element.addEventListener('click', classToggle);
}
Only for visual demonstration of the baseline grid. Do not use in production.