Native Styles

Web Awesome works with the platform, rather than trying to reinvent it. If all you need is styles, you don’t need to use new <wa-*> elements! We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.

Installation Jump to heading #

To use all Web Awesome page styles (including utilities), include the following stylesheet in your project:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.7/dist/styles/webawesome.css" />

Or, to only include styles for built-in elements:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.7/dist/styles/native.css" />

Opting Out of Native Styles Jump to heading #

So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do? You can create an opt-out with the power of CSS Cascade Layers!

Instead of including Native Styles with a <link> element, you can include it like this:

<style>
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.7/dist/styles/webawesome.css') layer(wa);

@layer wa {
  .wa-off,
  .wa-off-deep,
  .wa-off-deep * {
    all: revert-layer;
  }
}
</style>

Then you can opt-out of Native Styles styling by using a wa-off class on individual elements or wa-off-deep for entire subtrees:

<p>
  <button>I’m Awesome</button>
  <button class="wa-off">I’m not</button>
</p>

<blockquote>
  <p>Lorem Ipsum dolor sit amet</p>
  <button>I’m also awesome</button>
</blockquote>
<blockquote class="wa-off">
  <p>Lorem Ipsum dolor sit amet</p>
  <button >I’m also not</button>
</blockquote>
<blockquote class="wa-off-deep">
  <p>Lorem Ipsum dolor sit amet</p>
  <button>I’m also not</button>
</blockquote>

You could even design opt-outs for specific elements! E.g. to opt-out of <details> styling:

@layer wa {
  details.wa-details-off,
  .wa-details-off details,{
    all: revert-layer;
  }
}

If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing. You can find instructions for how to do that on the individual Native Styles pages.