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 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,
@zastrow
zastrow / SassMeister-input.scss
Created Aug 8, 2019 — forked from HugoGiraudel/SassMeister-input.scss
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
////
/// String to number converter
/// @author Hugo Giraudel
/// @access private
////
View Auto add Jira card number to end of commit
function jira-commit() {
branch_name=$((git symbolic-ref HEAD | cut -d'/' -f3) | tr '[:lower:]' '[:upper:]')
git commit -m "$@"$'\n'"${branch_name}";
}
@zastrow
zastrow / Unlink.scss
Created Aug 1, 2018
Mixin to remove the default link styles of an <a>
View Unlink.scss
@zastrow
zastrow / Delist.scss
Created Aug 1, 2018
Removes default list styles from a <ul> or <ol>
View Delist.scss
@mixin delist {
// This removes default list styles
list-style: none;
padding: 0;
margin: 0;
}
@zastrow
zastrow / Unbuttonize Mixin.scss
Last active Nov 7, 2018
Remove Default Button Styles
View Unbuttonize Mixin.scss
@mixin unbuttonize {
// This removes styles added by default to button elements.
// For when something should semantically be a button,
// but isn't buttony in appearance.
background-color: transparent;
border: none;
margin: 0;
padding: 0;
text-align: inherit;
font: inherit;
@zastrow
zastrow / Grid Support Mixin.scss
Created Nov 1, 2017
Microsoft Edge 15 down support an older spec of CSS grid which can cause some layout issues, this mixin utilizes a compound @supports query to weed out this issue.
View Grid Support Mixin.scss
// Microsoft Edge 15 down support an older spec of CSS grid
// which can cause some layout issues, this mixin utilizes
// a compound @supports query to weed out this issue.
@mixin grid-support {
@supports (display: grid) and (not (display: -ms-grid)) {
@content;
}
}
@zastrow
zastrow / grayscale.scss
Created Apr 5, 2017
Simple color function for defining grays with Sass
View grayscale.scss
// Grayscale
@function gray($level) {
@if $level == 0 {
@return white;
}
@else if $level == 100 {
@return black;
}
@else {
@return darken(white, $level * 1%);;
@zastrow
zastrow / SassMeister-input-HTML.html
Created Sep 3, 2014
Generated by SassMeister.com.
View SassMeister-input-HTML.html
<h1>Heading One</h1>
<h2>Heading Two</h2>
<h3>Heading Three</h3>
You can’t perform that action at this time.