Skip to content

Instantly share code, notes, and snippets.

Avatar

Shopify Partners shopifypartners

View GitHub Profile
View ambient-light-simple-demo.js
if ( 'AmbientLightSensor' in window ) {
const sensor = new AmbientLightSensor();
sensor.onreading = () => {
if ( sensor.illuminance < 20) {
element.style.setProperty('--bg', 'black’);
} else {
element.style.setProperty('--bg', 'blue’);
}
};
sensor.start();
View ambient-light-simple-demo.js
if ( 'AmbientLightSensor' in window ) {
const sensor = new AmbientLightSensor();
sensor.onreading = () => {
if ( sensor.illuminance < 20) {
element.style.setProperty('--bg', 'black’);
} else {
element.style.setProperty('--bg', 'blue’);
}
};
sensor.start();
View progressive-enhancement-3.css
.layout-main {
display: inline-block;
display: flex;
display: grid;
width: 100%;
}
.layout-main__left {
float: left;
width: 75%;
View progressive-enhancement-2.css
.layout-main {
display: inline-block;
display: flex;
width: 100%;
}
.layout-main__left {
float: left;
width: 75%;
}
View progressive-enhancement-1.css
.layout-main {
display: inline-block;
width: 100%;
}
.layout-main__left {
float: left;
width: 75%;
}
View spacing-system-10.scss
@mixin spacing-loop($property, $space, $value) {
@each $poskey, $posvalue in $spacing-key {
&-#{$poskey}-#{$space} {
@if $poskey == "all" {
#{$property}: $value;
}
@else if $poskey == "vert" {
#{$property}-top: $value;
#{$property}-bottom: $value;
}
View spacing-system-9.scss
@mixin spacing-loop($property, $space, $value) {
@each $poskey, $posvalue in $spacing-key {
&-#{$poskey}-#{$space} {
}
}
}
View spacing-system-8.scss
@mixin spacing-loop($property, $space, $value) {
@each $poskey, $posvalue in $spacing-key {
}
}
View spacing-system-6.scss
@for $space from 0 through $spacing-limit {
$value: $space + rem;
.util-pad {
@include spacing-loop("padding", $space, $value);
}
.util-margin {
@include spacing-loop("margin", $space, $value);
}
}
You can’t perform that action at this time.