Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind inspired CSS variable configuration
/*
Adapted from the idea of tailwindcss. I really liked the project and enjoyed using it.
But I wanted a simpler light weight solution. I really liked the idea of having things in a constants
thus avoid spilling the value throughout the application! With the indtroduction of css varialbes I found this to be
very elegent and productive.
Prefered usage with in conjunction of normailize.css
http: //necolas.github.io/normalize.css/
*/
:root {
/*
screen sizes
*/
--mobile: 576px;
--tablet: 768px;
--desktop: 992px;
--external: 1200px;
/* font sizes */
/* 12px */
--xs: .75rem;
/* 14px */
--sm: .875rem;
/* 16px */
--base: 1rem;
/* 18px */
--lg: 1.125rem;
/* 20px */
--xl: 1.25rem;
/* 24px */
--xl2: 1.5rem;
/* 30px */
--xl3: 1.875rem;
/* 36px */
--xl4: 2.25rem;
/* 48px */
--xl5: 3rem;
/* font weights */
--hairline: 100;
--thin: 200;
--light: 300;
--normal: 400;
--medium: 500;
--semibold: 600;
--bold: 700;
--extrabold: 800;
--black: 900;
/* text leadings */
--leading-none: 1;
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-loose: 2;
/* text tracking */
--tracking-tight: -0.05em;
--tracking-normal: 0;
--tracking-wide: 0.05em;
/* borders */
/* border widths */
--border-0: 0;
--border-2: 2px;
--border-4: 4px;
--border-8: 8px;
/* border radius */
--border-radius-none: 0;
--border-radius-sm: .125rem;
--border-radius-md: .25rem;
--border-radius-lg: .5rem;
--border-radius-full: 9999px;
/* padding and margin */
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
/* shadows */
--shadow-default: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
--shadow-md: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
--shadow-lg: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--shadow-outline: 0 0 0 3px rgba(52, 144, 220, 0.5);
--shadow-none: none;
/* z-indexs */
--z-auto: auto;
--z-0: 0;
--z-10: 10;
--z-20: 20;
--z-30: 30;
--z-40: 40;
--z-50: 50;
/* opacity */
--opacity-0: 0;
--opacity-25: .25;
--opacity-50: .5;
--opacity-75: .75;
--opacity-100: 1;
/* font styles */
--sans: Source Sans Pro,
system-ui,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue;
--serif: Constantia,
Lucida Bright,
Lucidabright,
Lucida Serif,
Lucida,
DejaVu Serif,
Bitstream Vera Serif,
Liberation Serif,
Georgia,
serif;
--mono: Menlo,
Monaco,
Consolas,
Liberation Mono,
Courier New,
monospace;
/*
Colors being a very hard subject for non desingers like me!
Borrowing the generour color variables from the tailwind css project
https: //tailwindcss.com/docs/colors
*/
--black: #22292f;
--grey-darkest: #3d4852;
--grey-darker: #606f7b;
--grey-dark: #8795a1;
--grey: #b8c2cc;
--grey-light: #dae1e7;
--grey-lighter: #f1f5f8;
--grey-lightest: #f8fafc;
--white: #ffffff;
--red-darkest: #3b0d0c;
--red-darker: #621b18;
--red-dark: #cc1f1a;
--red: #e3342f;
--red-light: #ef5753;
--red-lighter: #f9acaa;
--red-lightest: #fcebea;
--orange-darkest: #462a16;
--orange-darker: #613b1f;
--orange-dark: #de751f;
--orange: #f6993f;
--orange-light: #faad63;
--orange-lighter: #fcd9b6;
--orange-lightest: #fff5eb;
--yellow-darkest: #453411;
--yellow-darker: #684f1d;
--yellow-dark: #f2d024;
--yellow: #ffed4a;
--yellow-light: #fff382;
--yellow-lighter: #fff9c2;
--yellow-lightest: #fcfbeb;
--green-darkest: #0f2f21;
--green-darker: #1a4731;
--green-dark: #1f9d55;
--green: #38c172;
--green-light: #51d88a;
--green-lighter: #a2f5bf;
--green-lightest: #e3fcec;
--teal-darkest: #0d3331;
--teal-darker: #20504f;
--teal-dark: #38a89d;
--teal: #4dc0b5;
--teal-light: #64d5ca;
--teal-lighter: #a0f0ed;
--teal-lightest: #e8fffe;
--blue-darkest: #12283a;
--blue-darker: #1c3d5a;
--blue-dark: #2779bd;
--blue: #3490dc;
--blue-light: #6cb2eb;
--blue-lighter: #bcdefa;
--blue-lightest: #eff8ff;
--indigo-darkest: #191e38;
--indigo-darker: #2f365f;
--indigo-dark: #5661b3;
--indigo: #6574cd;
--indigo-light: #7886d7;
--indigo-lighter: #b2b7ff;
--indigo-lightest: #e6e8ff;
--purple-darkest: #21183c;
--purple-darker: #382b5f;
--purple-dark: #794acf;
--purple: #9561e2;
--purple-light: #a779e9;
--purple-lighter: #d6bbfc;
--purple-lightest: #f3ebff;
--pink-darkest: #451225;
--pink-darker: #6f213f;
--pink-dark: #eb5286;
--pink: #f66d9b;
--pink-light: #fa7ea8;
--pink-lighter: #ffbbca;
--pink-lightest: #ffebef;
}
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.