Skip to content

Instantly share code, notes, and snippets.

Avatar
🎨
Writing all the CSS!

Philip Zastrow zastrow

🎨
Writing all the CSS!
View GitHub Profile
@zastrow
zastrow / input.scss
Created Mar 4, 2022
Generated by SassMeister.com.
View input.scss
//Breakpoints
$bp-sm: 30rem;
$bp-md: 50rem;
$bp-lg: 60rem;
$bp-xl: 80rem;
$grid-breakpoints: (
sm: $bp-sm,
md: $bp-md,
lg: $bp-lg,
View Reduce Motion Query.scss
// This function pairs with the `motion` mixin
// to convert a `true` or `false` value to the
// appropriate media query value for reduce motion.
@function motion($value) {
@if $value {
@return 'no-preference';
}
@else {
@return 'reduce';
}
View Dark and Light Mode Mixin.scss
// Simplified version of color schemes. Options are `light` or `dark`
@mixin color-mode($value: light) {
@media (prefers-color-scheme: $value) {
@content;
}
}
@zastrow
zastrow / input.scss
Created Feb 2, 2021
Generated by SassMeister.com.
View input.scss
$media-queries: (
sm: 40rem,
lg: 80rem
);
@mixin loop-states {
&,
&\:hover:hover,
&\:active:active,
&\:focus:focus {
@zastrow
zastrow / input.scss
Created Jan 14, 2021
Generated by SassMeister.com.
View input.scss
$font-stack: sytem-ui, sans-serif;
@function font($override:null) {
@if $override {
@return $font-stack !important;
}
@else {
@return $font-stack;
}
}
@zastrow
zastrow / input.scss
Created Jan 14, 2021
Generated by SassMeister.com.
View input.scss
$font-stack: sytem-ui, sans-serif;
@mixin font($override:null) {
font-family: $font-stack $override;
}
.my-class {
@include font;
}
@zastrow
zastrow / ie11.js
Created Dec 1, 2020
Check if this is IE11
View ie11.js
const checkIE = () => {
const isIE = /* @cc_on!@ */false || !!document.documentMode;
if (isIE) {
const html = document.getElementsByTagName('html')[0];
html.className += ' ie11';
}
};
checkIE();
@zastrow
zastrow / svg.scss
Last active Mar 4, 2022
In-CSS SVG
View svg.scss
// Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@return if($index, str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace), $string);
}
// SVG URL fixer Icons by Taylor Hunt
// http://codepen.io/tigt/post/optimizing-svgs-in-data-uris
// Function to create an optimized svg url
@function svg($svg) {
@zastrow
zastrow / input.scss
Created Sep 23, 2020
Generated by SassMeister.com.
View input.scss
// Maps
// - Color Map
// - Major Breakpoints
// - Spacing
// - Font Sizes
// - Font Family
// - Font Weight
// - Display
// - Text Align
// - Flexbox Properties
@zastrow
zastrow / input.scss
Created Sep 23, 2020
Generated by SassMeister.com.
View input.scss
// default -> inside /node_modules/sparkle
$settings: (
'utilPrefix': 'sbx',
'colorUtil': true
) !default;
$colors: (
'red': #900,
'green': #090,