Keith

Open Props CSS Variables Playground

by Keith Rowles • 03/12/2023HTML

Closeup of green and blue manilla folders

Summary

Testing out supercharged css variables, design tokens and components with Open Props.

Some of the design tokens include:

  • colours
  • gradients
  • shadows
  • aspect ratios
  • typography
  • sizes
  • and more…

I have integrated the components into a basic CSS Grid template.

Here is the CDN link.

<link rel="stylesheet" href="https://unpkg.com/open-props" />

Tech

  • HTML
  • CSS
  • Open Props (CSS Variables and Design Tokens)
  • Glitch

Demo

Here is a link to the demo hosted on Glitch.

Link to Demo

Here is the link to the Open Props website.

Link to Open Props

HTML

I have included the code below.

<div class="site">
  <!-- header -->
  <header>
    <div class="header-container">
      <!-- navbar -->
      <nav class="nav-bar">
        <h3>Logo</h3>
        <div class="nav-bar-menu">
          <a href="#">Link</a>
          <a href="#">Link</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="main-container">
      <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga
        consequuntur delectus aspernatur perferendis quos dolorum.
      </p>
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum sit
        officia magnam, fugit perspiciatis modi eaque odit ex neque animi
        consectetur quod culpa! Impedit repellendus id quaerat cum veritatis
        quasi assumenda quod reiciendis, magni adipisci, et iure libero quo
        sequi in unde expedita? Officiis possimus corrupti at expedita,
        distinctio fugit aut, debitis id ut consequatur, rem porro asperiores
        molestiae animi!
      </p>

      <hr />

      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>

      <blockquote>
        <p>
          A block quotation (also known as a long quotation or extract) is a
          quotation in a written document, that is set off from the main text as
          a paragraph, or block of text.
        </p>
        <p>
          It is typically distinguished visually using indentation and a
          different typeface or smaller size quotation. It may or may not
          include a citation, usually placed at the bottom.
        </p>
        <cite><a href="#!">Said no one, ever.</a></cite>
      </blockquote>

      <h3>Ordered List</h3>

      <ol>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ol>

      <h3>Unordered List</h3>

      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul>

      <h6 class="display-2">Display Heading - H6</h6>

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
        blanditiis a cumque aliquam assumenda dolorem tenetur ea nam, maiores
        delectus voluptatum totam, quia id obcaecati, illo adipisci soluta vel
        deserunt veniam necessitatibus voluptas pariatur voluptates? Recusandae
        qui voluptatem natus minus eaque! Nihil accusantium provident minus cum
        quaerat qui consectetur impedit molestias, quam quod aspernatur,
        repellat vel neque sit praesentium culpa ratione! Iusto adipisci
        delectus cum aperiam magni tempore expedita unde possimus architecto,
        illum nemo obcaecati est at fugit optio voluptatibus explicabo iure
        quis! Tempore minus possimus cumque blanditiis ducimus dolorem odio
        consequatur itaque. Possimus ratione minima error rem, sint molestiae.
      </p>

      <h3>Details</h3>

      <details>
        <summary>Details and summary element</summary>
        <p>Example paragraph text.</p>
      </details>

      <hr />

      <div class="demos">
        <div class="box box-square">Box</div>
        <div class="box box-landscape">Box Landscape</div>
        <div class="box box-golden">Box Golden</div>
      </div>

      <hr />

      <h3>Buttons</h3>

      <button type="submit">Ready for action</button>
      <button type="reset">Ready for action</button>
      <button type="button">Ready for action</button>

      <hr />

      <button class="primary">Large Custom</button>
      <button>Default with Icon <span data-icon="cloud"></span></button>

      <hr />

      <h3>Form Fields</h3>

      <form>
        <fieldset>
          <legend>Input Fields</legend>
          <p>
            <label for="input__text">Text Input</label>
            <input
              id="input__text"
              type="text"
              placeholder="Text Input"
              required
            />
          </p>
          <p>
            <label for="input__password">Password</label>
            <input
              id="input__password"
              type="password"
              placeholder="Type your Password"
              required
            />
          </p>
        </fieldset>

        <fieldset id="forms__select">
          <legend>Select menus</legend>
          <p>
            <label for="select">Select</label>
            <select id="select">
              <optgroup label="Option Group">
                <option>Option One</option>
                <option>Option Two</option>
                <option>Option Three</option>
              </optgroup>
            </select>
          </p>
        </fieldset>

        <fieldset id="forms__html5">
          <legend>HTML5 inputs</legend>
          <p>
            <label for="ic">Color input</label>
            <input type="color" id="ic" value="#000000" />
          </p>
          <p>
            <label for="idd">Date input</label>
            <input type="date" id="idd" value="1970-01-01" />
          </p>
        </fieldset>
        <button type="submit">Submit</button>
      </form>

      <hr />

      <h3>Card</h3>

      <div class="card-container">
        <div class="card">
          <img
            src="https://doodleipsum.com/500x500/hand-drawn?i=b48528b59f8d071fde57e51d2d6c433d"
            alt="Card image cap"
          />
          <h5>Lorem ipsum dolor</h5>
          <p>Quis nostrud nisi ut aliquip ea commodo consequat.</p>
          <a href="#">Check it</a>
        </div>
      </div>
    </div>
  </main>

  <!-- left sidebar -->
  <aside class="left-sidebar">
    <div class="left-sidebar-container">
      <section class="left-sidebar-menu">
        <h3>Menu</h3>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
      </section>

      <section class="left-sidebar-icons">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
      </section>
    </div>
  </aside>

  <!-- right sidebar -->

  <aside class="right-sidebar">
    <div class="right-sidebar-container">
      <h3>Heading</h3>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem eveniet
        repudiandae tempora quisquam accusantium quo praesentium totam assumenda
        laboriosam reiciendis pariatur, aspernatur laborum debitis laudantium
        voluptatem, ea nihil nesciunt? Deserunt?
      </p>
    </div>
  </aside>

  <!-- footer -->

  <footer>
    <div class="footer-container">
      <div class="footer-details">
        Copyright &copy; Logo <sl-format-date></sl-format-date>
      </div>
      <div class="footer-social">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
      </div>
    </div>
  </footer>
</div>

CSS

@import 'https://unpkg.com/open-props';
@import 'https://unpkg.com/open-props/normalize.min.css';
@import 'https://unpkg.com/open-props/buttons.min.css';

/* css reset */

:is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: var(--size-3);
  margin-top: var(--size-3);
}

p {
  margin-bottom: var(--size-3);
}

body {
  background-color: var(--gradient-9);
}

/* grid */

.site {
  min-height: 100vh;
  display: grid;
  grid-template-areas: 'header' 'main' 'right-sidebar' 'left-sidebar' 'footer';
  grid-template-rows: min-content 1fr min-content min-content min-content;
  gap: var(--size-3);
  padding: var(--size-3);
  background-color: var(--gray-1);
  background-image: var(--gradient-9);
}

/* header and navbar */

header {
  grid-area: header;
}

.header-container {
  background-color: var(--blue-0);
  padding: var(--size-3);
  border-radius: var(--radius-2);
}

header nav.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size-3);
}

header .header-container .nav-bar .nav-bar-menu a {
  margin-left: var(--size-3);
}

/* content */

main {
  grid-area: main;
}

.main-container {
  background-color: var(--stone-0);
  padding: var(--size-3);
  border-radius: var(--radius-2);
}

/* footer */

footer {
  grid-area: footer;
}

.footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--size-3);
  background-color: var(--gray-2);
  padding: var(--size-3);
  border-radius: var(--radius-2);
}

.footer-social {
  font-size: var(--font-size-1);
}

.footer-social a {
  color: var(--blue-7);
  margin-left: var(--size-3);
}

.footer-social a:hover {
  color: var(--blue-5);
}

.footer-social sl-icon {
  margin-left: var(--size-3);
}

/* left menu bar */

.left-sidebar {
  grid-area: left-sidebar;
}

.left-sidebar-container {
  background-color: var(--gray-2);
  padding: var(--size-3);
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  justify-content: space-between;
  height: 100%;
  border-radius: var(--radius-2);
}

.left-sidebar .left-sidebar-container .left-sidebar-icons {
  display: flex;
  flex-direction: row;
  gap: var(--size-3);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.left-sidebar .left-sidebar-container .left-sidebar-icons a {
  color: var(--red-7);
}

.left-sidebar .left-sidebar-container .left-sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: var(--size-3);
  justify-content: flex-start;
  align-items: flex-start;
}

.left-sidebar .left-sidebar-container .left-sidebar-menu a {
  color: var(--blue-7);
  border-bottom: 1px solid var(--stone-4);
  display: inline-block;
  width: 100%;
  padding-bottom: var(--size-3);
}

/* right general information */

.right-sidebar {
  grid-area: right-sidebar;
}

.right-sidebar-container {
  background-color: var(--gray-2);
  padding: var(--size-3);
  height: 100%;
  border-radius: var(--radius-2);
}

/* Boxes */

.demos {
  display: flex;
  flex-flow: row wrap;
  gap: var(--size-4);
}

.box {
  block-size: var(--size-12);
  max-inline-size: var(--max-inline-body);
  border-width: var(--border-size-3);
  border-color: var(--surface-4);
  box-shadow: var(--shadow-3);
  display: grid;
  place-content: center;
}

.box-square {
  aspect-ratio: var(--ratio-square);
}

.box-landscape {
  aspect-ratio: var(--ratio-landscape);
}

.box-golden {
  aspect-ratio: var(--ratio-golden);
}

/* Display Headings */

.display-2 {
  font-size: var(--font-size-7);
}

/* Buttons */

button.primary {
  background: var(--indigo-8);
  text-shadow: 0 1px 0 var(--indigo-9);
  color: white;
  font-size: var(--font-size-3);
  padding-inline: var(--size-8);
  padding-block: var(--size-3);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-3);
}

button.primary:hover {
  background: var(--indigo-5);
}

[data-icon='cloud']::after {
  content: url('https://api.iconify.design/fa6-brands/github-alt.svg');
  padding: 0;
  margin: 0;
  vertical-align: middle;
}

/* Card */

.card-container {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: space-around;
  max-inline-size: calc(var(--size-content-1) * 4);
  gap: var(--size-5);
  padding: var(--size-5);
}

.card {
  flex-basis: var(--size-content-2);
  display: flex;
  flex-direction: column;
  gap: var(--size-2);
  background: var(--surface-3);
  border: 1px solid var(--surface-1);
  padding: var(--size-4);
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-2);
}

.card > h5 {
  line-height: var(--font-lineheight-1);
}

@media screen and (min-width: 600px) {
  .site {
    grid-template-columns: minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);
    grid-template-rows: min-content 1fr min-content min-content;
    grid-template-areas:
      'header header header'
      'main main right-sidebar'
      'left-sidebar left-sidebar left-sidebar'
      'footer footer footer';
  }
}

@media screen and (min-width: 900px) {
  .site {
    grid-template-columns: minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);
    grid-template-rows: min-content 1fr min-content;
    grid-template-areas:
      'header header header'
      'left-sidebar main right-sidebar'
      'footer footer footer';
  }
}
GitHubCodePen JS Fiddle