Skip to content

Instantly share code, notes, and snippets.

Created Mar 11, 2016
What would you like to do?
Example CSS variable defaults
* Custom Properties
:root {
/* Breakpoints */
--breakpoint-xxs: 320px;
--breakpoint-xs: 480px;
--breakpoint-sm: 600px;
--breakpoint-md: 768px;
--breakpoint-lg: 960px;
--breakpoint-xl: 1140px;
--breakpoint-xxl: 1380px;
/* Colors */
--color-black: #000000;
--color-gray-darkest: #222222;
--color-gray-darker: #444444;
--color-gray-dark: #777777;
--color-gray: #aaaaaa;
--color-gray-light: #dedede;
--color-gray-lighter: #dcdfe0;
--color-gray-lightest: #f8f8f8;
--color-white: #ffffff;
/* Brand */
--color-brand-1: #950833;
--color-brand-2: #00b233;
--color-brand-3: #cc4a14;
--color-brand-4: #1485cc;
--color-brand-5: #fffbf1;
/* Focus Styles */
--focus-outline-fallback: 1px dotted var(--color-black);
--focus-outline: 5px auto -webkit-focus-ring-color;
/* Custom Fonts */
--font-custom-1: "Alegreya";
--font-custom-2: "WorkSans";
/* Font Stacks */
--font-family-safe-1: Palatino, "Palatino Linotype", Georgia, serif;
--font-family-safe-2: "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-family-1: var(--font-custom-1), var(--font-family-safe-1);
--font-family-2: var(--font-custom-2), var(--font-family-safe-2);
/* Font Sizes */
--font-size-xxs: 14px;
--font-size-xs: 16px;
--font-size-sm: 18px;
--font-size-md: 22px;
--font-size-lg: 26px;
--font-size-xl: 28px;
--font-size-xxl: 30px;
/* Heading Font Sizes */
--h1-font-size: 36px;
--h2-font-size: 22px;
--h3-font-size: 22px;
--h4-font-size: 22px;
--h5-font-size: 22px;
--h6-font-size: 22px;
--lg-h1-font-size: 56px;
/* Line Heights */
--line-height-1: 1.33333333;
--line-height-2: 1.15;
/* Spacing */
--spacing-micro: 2px;
--spacing-xxs: 4px;
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-base: 24px;
--spacing-lg: 32px;
--spacing-xl: 48px;
--spacing-xxl: 64px;
--spacing-macro-1: 80px;
--spacing-macro-2: 120px;
--spacing-macro-3: 160px;
/* Z-Index */
--z-index-1: 100;
--z-index-2: 200;
--z-index-3: 300;
--z-index-4: 400;
--z-index-5: 500;
--z-index-6: 600;
--z-index-7: 700;
--z-index-8: 800;
--z-index-9: 900;
--z-index-10: 1000;
* Custom Media Queries
@custom-media --min-width-xxs (min-width: 320px);
@custom-media --min-width-xs (min-width: 480px);
@custom-media --min-width-sm (min-width: 600px);
@custom-media --min-width-md (min-width: 768px);
@custom-media --min-width-lg (min-width: 960px);
@custom-media --min-width-xl (min-width: 1140px);
@custom-media --min-width-xxl (min-width: 1380px);
@custom-media --min-height-xxs (min-height: 320px);
@custom-media --min-height-xs (min-height: 480px);
@custom-media --min-height-sm (min-height: 600px);
@custom-media --min-height-md (min-height: 768px);
@custom-media --min-height-lg (min-height: 960px);
@custom-media --min-height-xl (min-height: 1140px);
@custom-media --min-height-xxl (min-height: 1380px);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment