First Steps

Building styles

Staying consistent with the cascade system is a real challenge. The amount of work you have to put in is almost overwhelming, to the point where it’s hard to imagine how you’d keep up with it over time.

Styling using cascade

Here’s an example of how you can style a button element using the cascade:

Subscribe

<style>
  .btn-indigo {
    background-color: #595cd9;
    border-radius: 0.25rem;
    border-width: 0px;
    color: white;
    cursor: pointer;
    font-weight: 600;
    padding-bottom: 0.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.25rem;
  }

  .btn-indigo:hover {
    background-color: #474aae;
  }
</style>

<button class="btn-indigo">Subscribe</button>

Styling using Yumma CSS

Yumma CSS is a pretty abstract framework that’s closely aligned with Vanilla CSS. It uses an abbreviated naming convention, which keeps your inline-classes nice and short.

Plus, it makes it easier to maintain and scale without any guesswork.

Subscribe

<button class="bg-indigo rad-1 b-0 tc-white c-p fw-600 py-1 px-5 h:bg-d-indigo-2">
  Subscribe
</button>

Since each utility will have a specific style property, you can reuse it over and over again, making your design system consistent.

Quick reference

Here’s a quick reference for the examples above.

Vanilla CSS	Yumma CSS
background-color	bg-*
border-radius	rad-*
border-width	b-*
color	tc-*
cursor	c-*
font-weight	fw-*
padding-y — (bottom & top)	py-*
padding-x — (left & right)	px-*
hover	h:*

---

Styling using colors

Get a set of default colors from Yumma CSS right away. Use the light and dark shades of the utility class to get a specific color and customize your theme.

Customizing colors

If you want to specify a lighter or darker shade of a given color, you can use the [class]-l-[color]-[shade] selector to get a lighter color or the [class]-d-[color]-[shade] selector to get a darker color in a range of 1 to 6, with the exception of neutral colors like black, white, and transparent.

Use [class]-l-* to get a lighter color, and [class]-d-* to get a darker color.

Subscribe Subscribe

<div class="d-g g-16 gtc-1 sm:d-b">
  <button class="b-0 bg-l-indigo-3 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>
  <button class="b-0 bg-d-indigo-3 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>
</div>

Here’s the full spectrum color for the color Indigo.

6

5

4

3

2

1

Base

1

2

3

4

5

6

Indigo

Color palette

Here’s a spectrum of all the Yumma CSS color classes for customizing your theme.

6

5

4

3

2

1

Base

1

2

3

4

5

6

Red

Orange

Yellow

Green

Teal

Cyan

Blue

Indigo

Violet

Pink

Lead

Gray

Silver

Color utilities

Here’s a list of all the Yumma CSS color classes for customizing your theme.

Utility	Description
Accent Color	Controls form control accent color.
Background Color	Controls the background color of an element.
Border Color	Controls the color of the borders of an element.
Caret Color	Controls the text input cursor color.
Outline Color	Controls the color of the outline of an element.
Text Color	Controls the text color of an element.
Text Decoration Color	Controls the color of the text decoration.

---

Conditional styles

Utility modifiers are designed to enable the conditional styling of elements based on user activity, such as when a user hovers over a specific element.

Breakpoint modifiers

Use responsive breakpoints such as sm:*, md:*, lg:*, xl:* and xxl:* to apply specific rules to different screen sizes. For example:

Try changing the size of the preview area to see how the text changes.

This is a small screen.

This is a medium screen.

This is a large screen.

This is an extra large screen.

This is double extra large screen.

<div class="bg-l-indigo-6 p-4 rad-1 ta-c tc-lead">
  <p class="bg-white d-b p-4 rad-1 sm:d-none">This is a small screen.</p>
  <p class="bg-white d-none md:d-none p-4 rad-1 sm:d-b">This is a medium screen.</p>
  <p class="bg-white d-none lg:d-none md:d-b p-4 rad-1">This is a large screen.</p>
  <p class="bg-white d-none lg:d-b p-4 rad-1 ta-c xl:d-none">This is an extra large screen.</p>
  <p class="bg-white d-none p-4 rad-1 ta-c xxl:d-b">This is double extra large screen.</p>
</div>

Breakpoints reference

Here’s a reference for the breakpoints used in Yumma CSS.

Name	Prefix	Screen
Small	sm	640px
Medium	md	768px
Large	lg	1024px
Extra Large	xl	1280px
Double XL	xxl	1536px

Hover modifiers

You can use the h: modifiers in order to target the :hover function across the entirety of the Yumma CSS utility classes.

To illustrate, when overriding an existing utility class conditionally, ensure to utilize the h:* modifier, followed by the designated class to be applied on hover.

Try moving the mouse over the button to see how the background color changes.

Subscribe

<button class="b-0 bg-indigo fw-600 h:bg-d-indigo-2 px-5 py-1 rad-1 tc-white c-p">Subscribe</button>