Day: May 29, 2020

Posted on

Global CSS options with custom properties

Featured Imgs 23

With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward:

$option: false;

@mixin doThing {
  @if $option {
    do-thing: yep;
  }
}

.el {
  @include doThing;
}

Can we do that in native CSS with custom properties? Mark Otto shows that we can. It’s just a smidge different. 

html {
  --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.component {
  box-shadow: var(--component-shadow);
}

<!-- override the global anywhere more specific! like
     <div class="component remove-shadow">
     or
     <body class="remove-shadow"> -->
.remove-shadow {
  --component-shadow: none;
}

Direct Link to Article — Permalink

The post Global CSS options with custom properties appeared first on CSS-Tricks.

Posted on

Strapi Community Edition Now Generally Available

Featured Imgs 23

Strapi, an open-source headless CMS, has announced the general availability of the Strapi Community Edition. The project has been five years in the making, and the company is excited to see continued growth in the Strapi community now that it's generally available. In a blog post announcement, the Strapi team recapped the journey thus far, which includes over 1 million downloads, over 400 contributors, and almost 5,000 Strapi community projects on GitHub.