Spectacular

Spectacular

Example

<style type="text/css">
  body {
    --button-background: rebeccapurple;
    --button-color: white;
    --button-padding: 1em;
  }
</style>
<button class="my button" role="button">
  Click me
</button>

Example

<style type="text/css">
  body {
    /* [role="contentinfo"] inherits from --contentinfo then --darkmodule properties */
    --darkmodule-background: rebeccapurple;
  }
  footer.light {
    --contentinfo-background: white;
    --contentinfo-color: rebeccapurple;
  }
</style>
<footer role="contentinfo">
  <p>
    ©2017 Thingy&ndash;ma&ndash;bobber
    <a href="#" style="float:right">Contact Us</a>
  </p>
</footer>
<footer class="light" role="contentinfo">
  <p>
    ©2017 Thingy&ndash;ma&ndash;bobber
    <a href="#" style="float:right">Contact Us</a>
  </p>
</footer>

Example

Check this out: this is a link.

Check this out: this is a link. 

<style type="text/css">
  a {
    /*--anchor-presentation-color: currentColor;
    --anchor-presentation-text-decoration: none;*/
    --anchor-presentation-hover-color: orange;
    --anchor-presentation-hover-text-decoration: underline;
  }
</style>
<p>
  Check this out: <a href="#">this is a link.</a>
</p>
<p>
  Check this out: <a role="presentation" href="#">this is a link.</a>
</p>

Example

This is a link that looks like a button 
<style type="text/css">
  body {
    --button-background: rebeccapurple;
    --button-color: white;
    --button-padding: 1em;

    --button-secondary-background: blue;
    --button-secondary-color: white;
  }
  .my.button {
    --button-background: rebeccapurple;
    --button-color: white;
    --text-decoration: none;
    --button-padding: 1rem;
    --button-display: inline-block;
    --border: 1px solid currentColor;
  }
  .my.button:hover {
    --button-background: white;
    --button-color: rebeccapurple;
  }
  .my.button:focus {
    --button-background: white;
    --button-color: rebeccapurple;
  }
  .my.smooth.button {
    --transition: all 360ms ease;
  }
  .my.button.orange {
    --button-background: orange;
    --button-color: white;
  }
  .my.button.orange:hover, .my.button.orange:focus {
    --button-background: white;
    --button-color: orange;
  }
  .my.button.secondary:hover, .my.secondary.orange:focus {
    --button-secondary-background: white;
    --button-secondary-color: blue;
  }
</style>

<div>
  <a href="#" class="my spectacular button">This is a link that looks like a button</a>
  <button class="my smooth spectacular button">This is a orange button</button>
</div>
<div>
  <button class="my spectacular secondary button">This is a secondary button</button>
  <button class="my spectacular secondary clickable button">This is a secondary clicky&nbsp;button</button>
</div>

3.3.1 grayscale

Use .spectacular.grayscale or .spectacular.greyscale to completely desaturate the colors of an element. Useful for responding to accessibility preferences.

Example

My Module

Hello world

My Module

Hello world

<section>
  <div class="module" style="background: white; color: orange">
    <h2>My Module</h2>
    <p>Hello world</p>
  </div>
</section>

<section class="spectacular grayscale" style="background: white; color: orange">
  <div class="module">
    <h2>My Module</h2>
    <p>Hello world</p>
  </div>
</section>

3.3.2 Effects

Effects inverted

Use .spectacular.inverted to invert the colors of an element. Useful for responding to accessibility preferences.

Example

My Module

Hello world

My Module

Hello world

<section>
  <div class="module">
    <h2>My Module</h2>
    <p>Hello world</p>
  </div>
</section>
<section class="spectacular inverted effect">
  <div class="module" style="background: white">
    <h2>My Module</h2>
    <p>Hello world</p>
  </div>
</section>

3.4.1 Balanced Layout

.balanced.layout and .layout .balanced set margin-left, margin-right, --module-margin-left, --module-margin-right to auto.

Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<style type="text/css">
  .my.thin.layout {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly centered layout">
  <div class="my spectacularly balanced thin layout padded item">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>

Example

Child A
Child B
Child C 
<style type="text/css">
  .my.flexible.layout > * {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly flexible layout">
  <div class="padded item">
    Child A
  </div>
  <div class="padded item">
    Child B
  </div>
  <div class="padded item">
    Child C
  </div>
</div>

Example

Child A
Child B
Child C 
<style type="text/css">
  .my.flexible.layout > * {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly vertical flexible reversed layout">
  <div class="padded item">
    Child A
  </div>
  <div class="padded item">
    Child B
  </div>
  <div class="padded item">
    Child C
  </div>
</div>

Example

Child A
Child B
Child C 
<style type="text/css">
  .my.layout {
    --item-margin-right: 1rem;
    --item-padding: 2rem;
  }
  .my.flexible.layout > * {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly unbiased flexible layout">
  <div class="padded item">
    Child A
  </div>
  <div class="padded item">
    Child B
  </div>
  <div class="padded item">
    Child C
  </div>
</div>

Example

Child A
Child B
Child C 
<style type="text/css">
  .my.flexible.layout > * {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly flexible reversed layout">
  <div class="padded item">
    Child A
  </div>
  <div class="padded item">
    Child B
  </div>
  <div class="padded item">
    Child C
  </div>
</div>

Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<style type="text/css">
  .my.thin.layout {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly flexibly balanced centered layout" style="min-height: 60vh">
  <div class="my spectacularly thin layout padded item">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>

Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

<style type="text/css">
  .my.thin.layout {
    outline: 1px solid var(--border-color, gainsboro);
  }
</style>
<div class="my spectacularly centered layout">
  <div class="my spectacularly balanced thin layout padded item">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </div>
</div>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="capitalized">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="large">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="larger">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="medium">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="small">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="smaller">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="x-large">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="x-small">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="xx-large">World</span>
</p>

Example

Hello World 

<p class="spectacular typography">
  Hello <span class="xx-small">World</span>
</p>

Example

Hello World
Hello World
Hello World

<p class="spectacular typography">
  <!-- both small.capitalized, small.caps, and .small.caps work -->
  Hello <small class="capitalized">World</small><br>
  Hello <small class="capitalized">World</small><br>
  Hello <span class="small caps">World</span><br>
</p>

<p>
  <a href="#">Read more<span hidden="visually"> about spec<em>tacular</em></span></a>
</p>
<p>
  <a href="#">Read more<span class="visually-hidden"> about spec<em>tacular</em></span></a>
</p>