gomakethings.com/an-advanced-way-to-use-css-variables

Preview meta tags from the gomakethings.com website.

Linked Hostnames

5

Thumbnail

Search Engine Appearance

Google

https://gomakethings.com/an-advanced-way-to-use-css-variables

An advanced way to use CSS variables

Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible to every element and class in the design system. :root { /* Colors */ --color-primary: #0088cc; --color-secondary: rebeccapurple; --color-black: #272727; --color-white: #ffffff; /* Sizes */ --size-default: 1rem; --size-small: 0.



Bing

An advanced way to use CSS variables

https://gomakethings.com/an-advanced-way-to-use-css-variables

Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible to every element and class in the design system. :root { /* Colors */ --color-primary: #0088cc; --color-secondary: rebeccapurple; --color-black: #272727; --color-white: #ffffff; /* Sizes */ --size-default: 1rem; --size-small: 0.



DuckDuckGo

https://gomakethings.com/an-advanced-way-to-use-css-variables

An advanced way to use CSS variables

Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible to every element and class in the design system. :root { /* Colors */ --color-primary: #0088cc; --color-secondary: rebeccapurple; --color-black: #272727; --color-white: #ffffff; /* Sizes */ --size-default: 1rem; --size-small: 0.

  • General Meta Tags

    6
    • title
      An advanced way to use CSS variables | Go Make Things
    • charset
      utf-8
    • X-UA-Compatible
      IE=edge,chrome=1
    • description
      Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible to every element and class in the design system. :root { /* Colors */ --color-primary: #0088cc; --color-secondary: rebeccapurple; --color-black: #272727; --color-white: #ffffff; /* Sizes */ --size-default: 1rem; --size-small: 0.
    • viewport
      width=device-width, initial-scale=1

  • Open Graph Meta Tags

    6
    • og:title
      An advanced way to use CSS variables
    • og:description
      Yesterday, we learned about CSS variables. Today, I wanted to show you an advanced approach to working with them that I often use with client projects. Let’s dig in! Globals for system or theme defaults I like to scope design system or theme defaults to the :root element. This makes them accessible to every element and class in the design system. :root { /* Colors */ --color-primary: #0088cc; --color-secondary: rebeccapurple; --color-black: #272727; --color-white: #ffffff; /* Sizes */ --size-default: 1rem; --size-small: 0.
    • og:url
      https://gomakethings.com/an-advanced-way-to-use-css-variables/
    • og:type
      website
    • og:image
      https://gomakethings.com/img/og.png

  • Link Tags

    4
    • alternate
      https://gomakethings.com/feed/index.xml
    • feed
      https://gomakethings.com/feed/index.xml
    • icon
      https://gomakethings.com/img/favicon.ico
    • shortcut icon
      https://gomakethings.com/img/favicon.ico

Emails

1

Links

18