Skip to content

Instantly share code, notes, and snippets.

@malarkey
malarkey / custom-properties-boilerplate.css
Created March 14, 2019 20:02
CSS Custom Properties boilerplate
/* CSS Custom Properties */
:root {
--font-family: 'Georgia', serif;
--font-family-alt: 'Helvetica', Arial, sans-serif;
--font-weight: 400;
--font-weight-bold: 700;
--font-weight-black: 900;
/* 3:4 perfect fourth scale */
@paulmelnikow
paulmelnikow / shadows.scss
Last active August 22, 2022 15:35
Sass Mixin: Google Material Design Shadow
/**
* A mixin which helps you to add depth to elements according to the Google Material Design spec:
* http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-dimensionality
*
* Please note that the values given in the specification cannot be used as is. To create the same visual experience
* the blur parameter has to be doubled.
*
* Adapted from a LESS version at https://medium.com/@Florian/freebie-google-material-design-shadow-helper-2a0501295a2d
*
* Original Author: Florian Kutschera (@gefangenimnetz), Conceptboard GmbH (@conceptboardapp)