turretcss

Elements

A guide to the use of HTML elements and turretcss's default styling definitions including buttons, figure, media, nav, and tables.

Contents

Button

Button styles are applied directly to the <button> element, button style and size modifiers do not require the button class added to the button element. Button styles can be set on an achor tag by using the .button class.

--button-padding-vertical: calc((var(--button-height) - var(--button-font-size) - (var(--button-border-width) * 2)) / 2);
--button-padding-horizontal: 1.5em;
--button-height: var(--height-m);
--button-font-family: inherit;
--button-font-weight: var(--font-weight-semibold);
--button-font-size: var(--font-size-m);
--button-color: var(--dark);
--button-line-height: 1;
--button-letter-spacing: var(--letter-spacing);
--button-text-align: center;
--button-text-transform: none;
--button-background: var(--background);
--button-border-width: var(--border-width);
--button-border-style: var(--border-style);
--button-border-color: var(--border-color);
--button-border-radius: var(--border-radius);
--button-box-shadow: var(--box-shadow);

--button-hover-color: var(--button-color);
--button-hover-background: var(--light-100);
--button-hover-border-color: var(--light-600);
--button-hover-box-shadow: var(--hover-box-shadow);

--button-active-color: var(--button-color);
--button-active-background: var(--light-200);
--button-active-border-color: var(--light-700);
--button-active-box-shadow: var(--active-box-shadow);
<button>...</button>

Button Disabled

--button-disabled-opacity: 0.65;
<button disabled>...</button>

Button Spinner

<button class="spinner">...</button>

Button Block

--button-block-text-align: center;
<button class="button button-block">...</button>

Button Pill

The .button-pill class applies border-radius half the size of the --button-height.

<button class="button button-pill">...</button>

Button Square

The .button-square class applies the same padding all round calculated from the height of the button minus font-size and border-width.

<button class="button button-square">...</button>

Button Icon (SVG)

A <svg> contained within a button or .button element will inherit the button font-size as the width and height, as well as the button color as fill.

<button>
  <svg>...</svg>
</button>

Button Sizes

--button-xl-padding-vertical: calc((var(--button-xl-height) - var(--button-xl-font-size) - (var(--button-border-width) * 2)) / 2);
--button-xl-padding-horizontal: var(--button-padding-horizontal);
--button-xl-height: var(--height-xl);
--button-xl-font-size: var(--font-size-xl);

--button-l-padding-vertical: calc((var(--button-l-height) - var(--button-l-font-size) - (var(--button-border-width) * 2)) / 2);
--button-l-padding-horizontal: var(--button-padding-horizontal);
--button-l-height: var(--height-l);
--button-l-font-size: var(--font-size-l);

--button-s-padding-vertical: calc((var(--button-s-height) - var(--button-s-font-size) - (var(--button-border-width) * 2)) / 2);
--button-s-padding-horizontal: var(--button-padding-horizontal);
--button-s-height: var(--height-s);
--button-s-font-size: var(--font-size-s);

--button-xs-padding-vertical: calc((var(--button-xs-height) - var(--button-xs-font-size) - (var(--button-border-width) * 2)) / 2);
--button-xs-padding-horizontal: var(--button-padding-horizontal);
--button-xs-height: var(--height-xs);
--button-xs-font-size: var(--font-size-xs);
<button class="button button-xl">...</button>
<button class="button button-l">...</button>
<button class="button button-m">...</button>
<button class="button button-s">...</button>
<button class="button button-xs">...</button>

Anchors

Extra Large Large Medium Small Extra Small
<a class="button button-xl">...</a>
<a class="button button-l">...</a>
<a class="button button-m">...</a>
<a class="button button-s">...</a>
<a class="button button-xs">...</a>

Button Colors

Shades

--button-white-color: var(--black);
--button-light-color: var(--dark);
--button-grey-color: var(--white);
--button-dark-color: var(--white);
--button-black-color: var(--white);
<button class="button button-white">...</button>
<button class="button button-light">...</button>
<button class="button button-grey">...</button>
<button class="button button-dark">...</button>
<button class="button button-black">...</button>
<button class="button button-white button-border">...</button>
<button class="button button-light button-border">...</button>
<button class="button button-grey button-border">...</button>
<button class="button button-dark button-border">...</button>
<button class="button button-black button-border">...</button>

Button Palettes

--button-primary-color: var(--white);
--button-secondary-color: var(--white);
--button-tertiary-color: var(--white);
<button class="button button-primary">...</button>
<button class="button button-secondary">...</button>
<button class="button button-tertiary">...</button>
<button class="button button-primary button-border">...</button>
<button class="button button-secondary button-border">...</button>
<button class="button button-tertiary button-border">...</button>

Indicators

--button-error-color: var(--white);
--button-warning-color: var(--white);
--button-success-color: var(--white);
--button-info-color: var(--white);
<button class="button error">...</button>
<button class="button warning">...</button>
<button class="button success">...</button>
<button class="button info">...</button>
<button class="button error button-border">...</button>
<button class="button warning button-border">...</button>
<button class="button success button-border">...</button>
<button class="button info button-border">...</button>

Button Group

<div class="button-group">
  <button class="button">...</button>
  <button class="button">...</button>
  <button class="button">...</button>
</div>

Button Group Block

<div class="button-group button-group-block">
  <button class="button">...</button>
  <button class="button">...</button>
  <button class="button">...</button>
</div>

Button Group Icon (SVG)

<div class="button-group">
  <button class="button">...</button>
  <button class="button button-square">
    <svg>...</svg>
  </button>
</div>

Figure

Figure Caption
--figure-display: block;
--figure-margin: 0;
--figure-padding: 0;

--figure-caption-margin: 1em 0;
--figure-caption-font-family: inherit;
--figure-caption-font-weight: inherit;
--figure-caption-font-size: var(--font-size-s);
--figure-caption-color: inherit;
--figure-caption-text-align: left;
<figure>
  <img src="..." class="responsive">
  <figcaption>...</figcaption>
</figure>

Media

The media frame is for content loaded after the document is ready. It stops layouts from jumping when media is being loaded.

The media frame wraps <img>, <svg>, <video>, and <iframe> by default, to wrap other content in a media container use the media-inner class. The media-transparent class removes the default background color on the media element.

--media-background: color(var(--black) alpha(10%));
--media-border-radius: var(--border-radius);
<div class="media media-16-9 spinner">...</div>

Media Ratios

By default the media element has the following common media type ratios:

media-1-2 media-9-16 media-9-14 media-2-3 media-3-4 media-1 media-4-3 media-3-2 media-16-9 media-2-1

Custom Media Ratios

To add custom media ratios use padding top with calc.

padding-top: calc((height / width) * 100%);

Spinner

The .spinner class can be added to any element to add a ::before pseudo element that has a spin animation and border styles to emulate a loading indicator.

--spinner-size: 2rem;
--spinner-speed: var(--speed-slow);
--spinner-background-color: color(var(--black) alpha(10%));
--spinner-foreground-color: var(--white);
<div class="... spinner">...</div>

For menu and navigation components use the <nav> element wrapped around an unordered list <ul>.

--nav-list-margin: 0;
--nav-item-margin: 1rem 0;
--nav-item-padding: 0;
<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

To display navigaiton inline add the nav-inline class to the <nav> element.

--nav-inline-item-margin: 0 1rem;
<nav class="nav-inline">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</nav>

Table

Table Caption
Vestibulum Sem Ipsum Dolor Fringilla Amet Mattis
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
--table-margin: var(--paragraph-margin);
--table-background: var(--background);
--table-border-width: var(--border-width);
--table-border-style: var(--border-style);
--table-border-color: var(--border-color);
--table-border-radius: var(--border-radius);

--table-caption-margin: 1em 0;
--table-caption-font-family: inherit;
--table-caption-font-weight: inherit;
--table-caption-font-size: inherit;
--table-caption-color: inherit;
--table-caption-text-align: left;

--table-head-padding: 0.5em;
--table-head-font-family: inherit;
--table-head-font-weight: inherit;
--table-head-font-size: inherit;
--table-head-color: inherit;
--table-head-text-align: left;
--table-head-text-transform: none;
--table-head-background: var(--light-100);
--table-head-border-width: var(--table-border-width);
--table-head-border-style: var(--table-border-style);
--table-head-border-color: var(--table-border-color);

--table-cell-padding: 0.5em;
--table-cell-font-family: inherit;
--table-cell-font-weight: inherit;
--table-cell-font-size: inherit;
--table-cell-color: inherit;
--table-cell-line-height: var(--line-height);
--table-cell-vertical-align: middle;
--table-cell-border-width: var(--table-border-width);
--table-cell-border-style: var(--table-border-style);
--table-cell-border-color: var(--table-border-color);
<table>
  <thead>
    <tr>
      <th scope="col">...</th>
      <th scope="col">...</th>
      <th scope="col">...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

Table Responsive

The .table-responsive class wraps a table allowing it to be sized appropriately for its contents, overflow content is viewable through scrolling.

Vestibulum Sem Ipsum Dolor Fringilla Amet Mattis
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
Egestas Ipsum Nibh Magna Nullam Consectetur Euismod
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th scope="col">...</th>
        <th scope="col">...</th>
        <th scope="col">...</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
      </tr>
    </tbody>
  </table>
</div>