First Steps

A guide to getting started with Yumma CSS.

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:

<style>
  .button {
    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;
  }

  .button:hover {
    background-color: #40429c;
  }
</style>

<button class="button">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.

<button class="bg-indigo rad-1 b-0 tc-white c-p fw-600 py-1 px-5 h:bg-indigo-8">
  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 example reference

Here’s a quick reference for the examples above.

Property	Utility
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.

Color shading

For instance, if you want a lighter shade, use values from 1 to 6, and for a darker one, use 7 to 12.

There aren’t any shades for colors like black, white, or transparent.

<div class="d-g cg-4 gtc-2">
  <button class="b-0 bg-indigo-4 fw-600 px-5 py-1 rad-1 tc-black">Subscribe</button>
  <button class="b-0 bg-indigo-9 fw-600 px-5 py-1 rad-1 tc-white">Subscribe</button>
</div>

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

Indigo

Color palette

Here’s a range of all the default colors from the Yumma CSS theme.

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.
Fill Color	Controls the filling of SVG elements.
Outline Color	Controls the color of the outline of an element.
Stroke Color	Controls the color of SVG elements.
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.

<div class="bg-indigo-1 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.

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