
Introduction
Yogurt is a CSS framework for crafting custom UI designs by using very smaller building block to build a component, even a basic component like a button can look entirely different from one to another in your material designs and having a complex template design that you'd end up needing to override the CSS will only make the creation process more frustrating.
Yogurt does not include any component classes, unlike many other CSS frameworks. Yogurt using the humanized naming convention such as font-size
, padding
, margin
, line-height
, color
, and so on, it's easy to reason about, easy to manipulate and more readable code. Yogurt also delivers a balance between consistency and flexibility design without overwriting existing stylesheets and unlike many CSS frameworks. Play well with your CSS, library, and frameworks. It has no side effects. Support up to 4k screen size enabled by default.
Concept
The margin
, padding
, font-size
, and so on are calling the utility components. Using the human-friendly CSS class naming combines with values makes perfect sense to mix among the utilities to form a complex styling. The value is usually linear changing the properties of a utility in a very precise manipulation, which gives you low-level control over this framework. Almost all utilities can be configured with the responsive option, by combining the screen size prefix
with a utility (e.g. (sm)text-md
, the text size in md
value only activate on screen size sm
as in screen width 640px).
Tag Shorthand
Yogurt CSS use <y>
tag to replacing the use of <div>
tag, which you still can use the <div>
tag. The <y>
is a branding and also to reduce letters from <div>
. Recommended for non-SEO web project.
<!-- Example -->
<y>
Hello World!
</y>
You can use <y>
tag for almost everything, except for some standard HTML tags that cannot be replaced with <y>
.
Utility Class Design
Yogurt CSS utility class name design consists of 3 components,
{(prefix)}{class}-{modifier}
- prefix ~ by adding parenthesis
()
before the class, allow you to manipulate the utility variants such as(responsive)
,(hover)
,(group-hover)
,(group-focus)
,(active)
,(focus)
,(visited)
,(checked)
and so on. - class ~ is an utility class name (e.g. text, border, flex, cursor and so on).
- modifier ~ by adding dash
-
after the class, allow you to precisely manipulate the utility values such as text size, color shades, spacing, effects, filters and so on.
<!-- Example -->
<y class="(hover)text-charcoal-100">
Text change color when hovered!
</y>
Best Practice
When writing HTML with Yogurt CSS, the best way is to put the class=""
to a top vertical formation as the highest priority this is to give better reading visibility. Suggesting the id=""
will be the last.
<!-- Example -->
<y class="..."
title="..."
id="...">
Hello World!
</y>
Read more about the Installation