Utility Classes

Building apps with vanilla CSS can be a lot of work, but it doesn’t have to be. Yumma CSS uses an abbreviated naming convention for its utility classes, which makes it easier to scale and maintain with less code, faster debugging, and more readable and understandable code.

Using vanilla CSS

If you use regular, you’ll end up with larger files, which will take longer to split and will be harder to maintain and scale.

Preview

Code

<div class="card">
  <div class="card-content">
    <h4 class="card-title">Heading</h4>
    <p class="card-description">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</p>
    <a class="card-link">Link to page</a>
  </div>
  <button class="card-button">Button</button>
</div>
<style>
  .card {
      max-width: 23.75rem;
      border: 1px solid #e5e7e9;
      background-color: #ffffff;
      box-shadow: 1px 3px 5px -2px rgba(0, 0, 0, 0.1);
      max-width: 23.75rem;
      overflow: hidden;
      padding: 1.5rem;
      border-radius: 0.5rem;
  }

  @media (min-width: 768px) {
      .card {
          grid-column-start: 2;
          grid-row-start: 1;
      }
  }

  .card-content {
      flex-grow: 1;
  }

  .card-title {
      font-size: 1.5rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      color: #32323e;
  }

  .card-description {
      font-size: 1rem;
      margin-bottom: 1rem;
      color: #797983;
  }

  .card-link {
      font-size: 1rem;
      color: #d4418a;
      text-decoration-line: underline;
  }

  .card-button {
      background-color: #d4418a;
      font-weight: 600;
      height: 3rem;
      margin-bottom: 1rem;
      margin-top: 1.5rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      border-radius: 0.25rem;
      color: #ffffff;
      font-size: 1rem;
  }

  .card-button:hover {
      background-color: #bf3b7c;
  }

  /* CSS Reset */

  *,
  *::before,
  *::after {
      border-width: 0;
      border-style: solid;
      box-sizing: border-box;
  }

  * {
      margin: 0;
      color: inherit;
      font-family: system-ui, sans-serif;
  }

  p,
  h4, {
      overflow-wrap: break-word;
  }
</style>

---

Using Yumma CSS

Yumma CSS uses abbreviated naming convention, which will make the files smaller. This will make it easier to maintain and scale applications without having to learn a whole new markup.

Preview

Code

<div class="max-w-96 ovf-h rad-2 b-1 bc-l-silver-6 bg-white p-6 bs-xs">
  <div class="fg-1">
    <h4 class="mb-2 fs-sm fw-600 lh-1 tc-d-lead-2">Heading</h4>
    <p class="mb-4 tc-l-lead-3 ">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia velit fugit voluptates quod, placeat quam maxime earum voluptas provident, natus omnis saepe beatae vitae.</p>
    <a class="fs-b lh-1 tc-pink tdl-u">Link to page</a>
  </div>
  <button class="mb-4 mt-6 h-12 rad-1 bg-pink px-6 fw-600 tc-white h:bg-d-pink-1">Button</button>
</div>