Skip to content

Instantly share code, notes, and snippets.

@alexmwalker
Created January 4, 2023 04:12
Show Gist options
  • Select an option

  • Save alexmwalker/e756564e6956faa28b2f526fe593527f to your computer and use it in GitHub Desktop.

Select an option

Save alexmwalker/e756564e6956faa28b2f526fe593527f to your computer and use it in GitHub Desktop.
Most basic :root CSS vars
:root {
--typescale: 1.15;
--typescale-lg: 1.25;
--baselineratio: calc(22 / 16);
--basegrid: 22px;
--basegrid-tablet: 28px;
--basegrid-laptop: 32px;
--basegrid-wide: 36px;
--baseline: calc(var(--baselineratio) * 1rem);
--basefont: calc(var(--basegrid) / var(--baselineratio));
--basefont-tablet: calc(var(--basegrid-tablet) / var(--baselineratio));
--basefont-laptop: calc(var(--basegrid-laptop) / var(--baselineratio));
--basefont-wide: calc(var(--basegrid-wide) / var(--baselineratio));
font-family: Roboto, sans-serif;
font-weight: 300;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment