Styling Elements

Applying utility classes

Apply utility classes to your HTML elements to style them. You can apply multiple classes to a single element.

Subscribe

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

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-*
hover:	h:*
padding-x — (left & right)	px-*
padding-y — (bottom & top)	py-*

Combining utility classes

You can combine utility classes to create complex styles.

New

Sneakers

Comfortable and stylish, these sneakers are perfect for any occasion.

$59.99 Add to Cart

<div class="bg-white bs-lg d-f fd-c g-4 max-w-80 p-5">
  <div class="p-r">
    <span class="bg-black fs-xs fw-700 l-2 p-a px-2 py-1 t-2 tc-white">New</span>
    <img class="h-40 of-c w-full" src="https://images.unsplash.com/photo-1628855567353-0bbe097bac15" alt="Sneaker" />
  </div>

  <h3 class="fs-md fw-600 tc-black">Sneakers</h3>

  <p class="fs-sm tc-lead">Comfortable and stylish, these sneakers are perfect for any occasion.</p>

  <div class="ai-c d-f jc-sb mt-auto">
    <span class="fs-lg fw-700 tc-black">$59.99</span>
    <button class="bg-black f:oc-black f:oo-2 f:os-s f:ow-2 fw-500 px-4 py-2 tc-white">Add to Cart</button>
  </div>
</div>

Here’s a quick reference for the examples above.

Property	Utility
border-radius	rad-*
box-shadow	bs-*
display	d-*
flex-direction	fd-*
focus:	f:*
font-size	fs-*
font-weight	fw-*
gap	g-*
height	h-*
left	l-*
margin-top	mt-*
max-width	max-w-*
object-fit	of-*
outline-offset	oo-*
outline-style	os-*
outline-width	ow-*
overflow	o-*
padding-x — (left & right)	px-*
padding-y — (top & bottom)	py-*
padding	p-*
position	p-*
text-color	tc-*
top	t-*
width	w-*

Why not vanilla CSS?

If you’re still not convinced about utility classes, here are a few reasons why you might want to consider them.

• No reusability - inline styles can’t be reused across components
• No consistency - inline styles make it hard to maintain a consistent design system
• No organization - inline styles can quickly become a mess
• No theming - inline styles make it hard to switch between different themes

With Yumma CSS every utility class will feel familiar to you since it’s pretty much just an abbreviated version of the property it represents. For example, d-f is for display: flex;, o-auto is for overflow: auto;, and so on.

Why use utility classes?

Utility classes solve many of the problems that come with traditional CSS approaches, especially when working on larger projects. Here’s why they make such a difference.

If your building projects with vanilla CSS chances are you’re probably familiar with some of the issues below.

• Invalid and outdated syntax - deprecated properties, old vendor prefixes, browser hacks
• Redundant styles - duplicate rules, specificity wars, unused selectors
• Refactoring risks - cleanup efforts, refactoring difficulties, global scope issues
• Naming conventions - inconsistent class names across different developers and time periods
• Performance issues - big bundle sizes, bloated CSS files, visual regressions

Utility classes solve these problems by taking a completely different approach to styling.

• Predictable and consistent - each utility does one thing reliably
• Composable and flexible - combine utilities to create complex styles
• Faster development - no context switching, immediate feedback, reusable patterns

One of the biggest time-savers with utility classes is that you don’t have to come up with names for everything. Instead of spending time thinking about whether to call something .card-header, .product-title, or .section-heading, you just use the utilities you need.