Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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 */
--font-size-x-display: 5.16rem;
--font-size-display: 4.3rem;
--font-size-xx-large: 3.583rem;
--font-size-x-large: 2.488rem;
--font-size-large: 1.728rem;
--font-size-medium: 1.44rem;
--font-size: 1.05rem;
--font-size-small: 0.833rem;
--font-size-x-small: 0.694rem;
--font-size-xx-small: 0.579rem;
--lineheight-text: 1.55;
--lineheight-short: 1.2;
--color-background: #Ffefdef;
--color-base: #f9eaf0;
--color-accent: #c42e66;
--color-background-selection: #f9eaf0;
--color-border: #9facdf;
--color-text-default: #2b2b2b;
--color-text-link: var(--color-accent);
--color-text-link-active: var(--color-text-link);
--color-text-link-focus: var(--color-text-link);
--color-text-link-hover: #9d7ad4;
--color-text-link-visited: var(--color-text-link);
--color-button-default: var(--color-accent:);
--color-button-border: var(--color-base);
--color-button-text: #fff;
--border-radius-x-small: .25rem;
--border-radius-small: .5rem;
--border-radius-medium: .75rem;
--border-radius-large: 1.5rem;
--border-radius-circle: 50%;
--border-width-hairline: 0.5px;
--border-width: 1px;
--border-width-thin: 2px;
--border-width-thick: 5px;
--grid-64: 3fr 1fr 2fr 2fr 1fr 3fr;
--grid-gap: 4vw;
--max-width: 80rem;
--spacing-xx-small: .125rem;
--spacing-x-small: .25rem;
--spacing-small: .5rem;
--spacing: .75rem;
--spacing-medium: 1rem;
--spacing-large: 1.5rem;
--spacing-x-large: 2rem;
--spacing-xx-large: 3rem;
--duration-instantly: 0;
--duration-immediately: 0.1s;
--duration-quickly: 0.2s;
--duration-promptly: 0.5s;
--duration-slowly: 1s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.