This is a collection of gists for an upcoming article on Medium.
I'll link to it when it's published.
Last active
March 28, 2019 15:58
-
-
Save dreamyguy/345fec7fc63682c81d87e92e27758b4a to your computer and use it in GitHub Desktop.
Visualise CSS margins for debugging - activated through a URL parameter and shareable through a link
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $sides: (top, bottom, left, right); | |
| $space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120); | |
| @each $side in $sides { | |
| @for $i from 1 through length($space-values) { | |
| $value: nth($space-values, $i); | |
| .m-#{str-slice($side, 0, 1)}-#{$value} { | |
| margin-#{$side}: #{$value}px; | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .m-t-2 { margin-top: 2px; } | |
| .m-t-5 { margin-top: 5px; } | |
| .m-t-10 { margin-top: 10px; } | |
| .m-t-15 { margin-top: 15px; } | |
| .m-t-20 { margin-top: 20px; } | |
| .m-t-30 { margin-top: 30px; } | |
| .m-t-40 { margin-top: 40px; } | |
| .m-t-50 { margin-top: 50px; } | |
| .m-t-60 { margin-top: 60px; } | |
| .m-t-70 { margin-top: 70px; } | |
| .m-t-80 { margin-top: 80px; } | |
| .m-t-90 { margin-top: 90px; } | |
| .m-t-100 { margin-top: 100px; } | |
| .m-t-120 { margin-top: 120px; } | |
| .m-b-2 { margin-bottom: 2px; } | |
| .m-b-5 { margin-bottom: 5px; } | |
| .m-b-10 { margin-bottom: 10px; } | |
| .m-b-15 { margin-bottom: 15px; } | |
| .m-b-20 { margin-bottom: 20px; } | |
| .m-b-30 { margin-bottom: 30px; } | |
| .m-b-40 { margin-bottom: 40px; } | |
| .m-b-50 { margin-bottom: 50px; } | |
| .m-b-60 { margin-bottom: 60px; } | |
| .m-b-70 { margin-bottom: 70px; } | |
| .m-b-80 { margin-bottom: 80px; } | |
| .m-b-90 { margin-bottom: 90px; } | |
| .m-b-100 { margin-bottom: 100px; } | |
| .m-b-120 { margin-bottom: 120px; } | |
| .m-l-2 { margin-left: 2px; } | |
| .m-l-5 { margin-left: 5px; } | |
| .m-l-10 { margin-left: 10px; } | |
| .m-l-15 { margin-left: 15px; } | |
| .m-l-20 { margin-left: 20px; } | |
| .m-l-30 { margin-left: 30px; } | |
| .m-l-40 { margin-left: 40px; } | |
| .m-l-50 { margin-left: 50px; } | |
| .m-l-60 { margin-left: 60px; } | |
| .m-l-70 { margin-left: 70px; } | |
| .m-l-80 { margin-left: 80px; } | |
| .m-l-90 { margin-left: 90px; } | |
| .m-l-100 { margin-left: 100px; } | |
| .m-l-120 { margin-left: 120px; } | |
| .m-r-2 { margin-right: 2px; } | |
| .m-r-5 { margin-right: 5px; } | |
| .m-r-10 { margin-right: 10px; } | |
| .m-r-15 { margin-right: 15px; } | |
| .m-r-20 { margin-right: 20px; } | |
| .m-r-30 { margin-right: 30px; } | |
| .m-r-40 { margin-right: 40px; } | |
| .m-r-50 { margin-right: 50px; } | |
| .m-r-60 { margin-right: 60px; } | |
| .m-r-70 { margin-right: 70px; } | |
| .m-r-80 { margin-right: 80px; } | |
| .m-r-90 { margin-right: 90px; } | |
| .m-r-100 { margin-right: 100px; } | |
| .m-r-120 { margin-right: 120px; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $sides: (top, bottom, left, right); | |
| $space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120); | |
| @each $side in $sides { | |
| @for $i from 1 through length($space-values) { | |
| $value: nth($space-values, $i); | |
| $valuePx: #{$value}px; | |
| .m-#{str-slice($side, 0, 1)}-#{$value} { | |
| margin-#{$side}: $valuePx; | |
| } | |
| [class*='m-#{str-slice($side, 0, 1)}-#{$value}'] { | |
| position: relative; | |
| &::before { | |
| position: absolute; | |
| content: attr(class); | |
| font-size: 12px;; | |
| z-index: 4; | |
| @if $side == top { | |
| color: green; | |
| background-color: rgba(199, 238, 0, 0.18); | |
| #{$side}: -#{$valuePx}; | |
| left: 0; | |
| text-align: right; | |
| height: $valuePx; | |
| width: 100%; | |
| } @else if $side == bottom { | |
| color: rgb(140, 91, 0); | |
| background-color: rgba(238, 143, 0, 0.331); | |
| #{$side}: -#{$valuePx}; | |
| left: 0; | |
| text-align: right; | |
| height: $valuePx; | |
| width: 100%; | |
| } @else { | |
| color: rgb(0, 128, 109); | |
| background-color: rgba(0, 128, 109, 0.351); | |
| #{$side}: 0; | |
| height: 100%; | |
| width: $valuePx; | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $sides: (top, bottom, left, right); | |
| $space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120); | |
| @each $side in $sides { | |
| @for $i from 1 through length($space-values) { | |
| $value: nth($space-values, $i); | |
| $valuePx: #{$value}px; | |
| .m-#{str-slice($side, 0, 1)}-#{$value} { | |
| margin-#{$side}: $valuePx; | |
| } | |
| [class*='m-#{str-slice($side, 0, 1)}-#{$value}'] { | |
| position: relative; | |
| &::before, | |
| &::after { | |
| position: absolute; | |
| font-size: 12px; | |
| z-index: 4; | |
| } | |
| &::before { | |
| @if $side == top { | |
| content: attr(class); | |
| color: green; | |
| background-color: rgba(199, 238, 0, 0.18); | |
| #{$side}: -#{$valuePx}; | |
| left: 0; | |
| height: $valuePx; | |
| width: 100%; | |
| } | |
| } | |
| &::after { | |
| @if $side == bottom { | |
| content: attr(class); | |
| color: rgb(140, 91, 0); | |
| background-color: rgba(238, 143, 0, 0.331); | |
| #{$side}: -#{$valuePx}; | |
| left: 0; | |
| text-align: right; | |
| height: $valuePx; | |
| width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $sides: (top, bottom, left, right); | |
| $space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100, 120); | |
| @each $side in $sides { | |
| @for $i from 1 through length($space-values) { | |
| $value: nth($space-values, $i); | |
| $valuePx: #{$value}px; | |
| .m-#{str-slice($side, 0, 1)}-#{$value} { | |
| margin-#{$side}: $valuePx; | |
| } | |
| // To see helper margins, append the current url with '?helpers=1' | |
| .show-helpers { | |
| [class*='m-#{str-slice($side, 0, 1)}-#{$value}'] { | |
| position: relative; | |
| &::before, | |
| &::after { | |
| position: absolute; | |
| font-size: 12px; | |
| z-index: 4; | |
| } | |
| &::before { | |
| @if $side == top { | |
| content: attr(class); | |
| color: green; | |
| background-color: rgba(199, 238, 0, 0.18); | |
| #{$side}: -#{$valuePx}; | |
| left: 0; | |
| height: $valuePx; | |
| width: 100%; | |
| } | |
| } | |
| &::after { | |
| @if $side == bottom { | |
| content: attr(class); | |
| color: rgb(140, 91, 0); | |
| background-color: rgba(238, 143, 0, 0.331); | |
| #{$side}: -#{$valuePx}; | |
| left: 0; | |
| text-align: right; | |
| height: $valuePx; | |
| width: 100%; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export default function getUrlParam(param, url) { | |
| let theUrl = url; | |
| if (!url) { | |
| theUrl = location.href; | |
| } | |
| const theParam = param.replace(/[[]/, '\\[').replace(/[\]]/, '\\]'); | |
| const regexS = `[\\?&]${theParam}=([^&#]*)`; | |
| const regex = new RegExp(regexS); | |
| const results = regex.exec(theUrl); | |
| return results === null ? null : results[1]; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import getUrlParam from './f_getUrlParam'; | |
| export default function addWrapperClassIfUrlParam(wrapperClass, param) { | |
| const b = document.querySelector('body'); | |
| // Only proceed if 'body' is found on the page | |
| if (b !== null) { | |
| if (getUrlParam(param)) { | |
| b.classList.add(wrapperClass); | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import addWrapperClassIfUrlParam from './g_addWrapperClassIfUrlParam'; | |
| document.addEventListener('DOMContentLoaded', () => { | |
| addWrapperClassIfUrlParam('show-helpers', 'helpers'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment