Press/to search

Core Concepts

Refactoring UI

Refactoring UI is a tedious job for frontend developers. Yogurt was designed to solve this problem in a very simple way. Here you will understand some basics of how to refactor (migrate) the existing style sheets or CSS framework you use in your project with Yogurt.

We will be using the @extend directive to extract the Yogurt utility classes and replacing the existing CSS properties of your style sheet. (See Extract Utility Classes, Create Empty Project).

Note: Require Sass/SCSS preprocessor to use the @extend directive. (See Using Yogurt via CLI .)

Examples

Some quick example text to build on the card title and make up the bulk of the card's content.

Here we have existing classes in the HTML file, and we might not want to change the class names so lightly. In some cases, those class names might be used by the Javascript. So we leave it as it should be untouched.

<div class="card">
<img src="..." class="card-img-top">
<div class="card-body">
<p class="card-text">
...
</p>
</div>
</div>

We use the @extend directive to expose the Yogurt utility classes to replacing the existing selectors CSS properties, look like the below,

Note: If your existing stylesheet file is in .css , you will need to rename them to .scss ,and with Sass/SCSS Preprocessor installed.
// after refactoring with Yogurt in `.scss` existing file.

.card {
@extend
.max-w-xxs,
.bg-white,
.border,
.border-gray-400,
.rounded;
}

.card-img-top {
@extend
.h-32,
.w-full,
.object-cover,
.object-top,
.overflow-hidden,
.bg-gray-500,
.rounded-t;
}

.card-body {
@extend
.p-4;
}

.card-text {
@extend
.inline-block,
.text-md,
.font-normal,
.depth-relaxed;
}