Grid Toggle

<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>
<button type="button" class="grid-toggle">Grid</button>
  "title": "Grid toggle",
  "description": "Slå av eller på en synlig grid för att se baslinjeraster."
  • Content:
    @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);
  • URL: /components/raw/grid-toggle/_grid-toggle.scss
  • Filesystem Path: src/atoms/grid-toggle/_grid-toggle.scss
  • Size: 463 Bytes
  • Content:
    const element = document.querySelector('.grid-toggle');
    function classToggle() {
    	const body = document.querySelector('body');
    if (element) {
    	element.addEventListener('click', classToggle);
  • URL: /components/raw/grid-toggle/grid-toggle.js
  • Filesystem Path: src/atoms/grid-toggle/grid-toggle.js
  • Size: 238 Bytes

Grid toggle

Only for visual demonstration of the baseline grid. Do not use in production.