Core Concepts

Import Framework v1.0.9

The most recommended way of using Yogurt CSS is installing it with the package manager (Yarn, Npm), and importing the .scss file from the node_modules directory.

# YARN
$ yarn add yogurt-css
# NPM
$ npm i yogurt-css

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

Base Styles

You can inject the Yogurt file on your CSS base style by using the @import directive and expose the utility classes with @extend directive. (See Extract Utility Classes, Refactoring UI).

// @file: `src/plugins.scss`
@import "node_modules/yogurt-css/yogurt";

html {
  @extend
    .font-default,
    .antialiased,
    .text-lg,
    .text-charcoal-100;
}

body {
  @extend
    .bg-gray-100;
}

p {
  @extend
    .text-md,
    .depth-relaxed;
}

a {
  @extend
    .text-orange-500,
    .\(hover\)text-orange-600,
    .\(hover\)underline;
}

h1 {
  @extend
    .text-2xl,
    .font-semibold;
}