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;
}

Create Empty Project Manually

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

These steps will help you understand the basic idea of how to install and configure the preprocessor and how to remove unused CSS classes from Yogurt. Let's get started.

Just to be sure you have NodeJS installed.

Create a new empty project directory.

$ mkdir new-project
$ cd new-project
# YARN
$ yarn init -y
# NPM
$ npm i init -y

Install mandatory gulp node modules.

# YARN
$ yarn add gulp gulp-sass gulp-sass-glob gulp-postcss gulp-purgecss gulp-rename autoprefixer --dev
# NPM
$ npm i gulp gulp-sass gulp-sass-glob gulp-postcss gulp-purgecss gulp-rename autoprefixer --save-dev

Create an empty gulpfile.js task file.

$ nano gulpfile.js

In the gulpfile.js, add these lines below to the file.

const gulp = require('gulp')
const sass = require('gulp-sass')
const sassGlob = require('gulp-sass-glob')
const postCss = require('gulp-postcss')
const purgeCss = require('gulp-purgecss')
const autoPrefixer = require('autoprefixer')
const rename = require('gulp-rename')

// Sass Preprocessor
gulp.task('sass', () => {
  return gulp.src('node_modules/yogurt-css/yogurt.scss')
    .pipe(sassGlob())
    .pipe(sass({ outputStyle: 'compressed' })
      .on('error', sass.logError))
    .pipe(postCss([autoPrefixer()]))
    // export `.scss` to `.css` in directory `css/`
    .pipe(gulp.dest('css'))
})

// Remove unused CSS Classes
gulp.task('purge-css', () => {
  return gulp.src('css/yogurt.css')
    .pipe(purgeCss({
        content: [
          // target CSS class to look for...
          'index.html'
        ],
        // make compatible for `Yogurt CSS` framework
        defaultExtractor: content => content.match(/[\w-/:()]+(?<!:)/g) || [],
        // add whitelisting e.g. '/-webkit-scrollbar-thumb$/'
        whitelistPatterns: [],
        keyframes: true
    }))
    // export new CSS in directory `css/`
    .pipe(rename('style.css'))
    .pipe(gulp.dest('css'))
})

Install yogurt-css module.

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

Create a new directory for exported or preprocessed CSS.

$ mkdir css

Create an empty index.html file.

$ nano index.html

Add the basic HTML template below to the index.html. And import the final build CSS file css/styles.css with <link> tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link defer href="css/style.css" rel="stylesheet" rel="preload" as="style" media="all">
  </head>
  <body></body>
</html>

Your new project setup is now ready for Sass preprocessing and purging unused CSS with the PurgeCSS.

Run the command below and check the CSS file located in css/style.css has only a few CSS classes that take a few couple hundred bytes of file size. The rest has stripped down by the PurgeCSS that refers to the target .html files.

# build Yogurt CSS
$ gulp sass
# create new `style.css` and remove
# unused CSS classes from `index.html`
$ gulp purge-css

Try to add a new line in the <body> tag.

<y class="text-2xl">TEXT</y>

Try run the build command again. This time the css/style.css file has added more CSS classes that index.html is being used.

# build Yogurt CSS
$ gulp sass
# create new `style.css` and remove
# unused CSS classes from `index.html`
$ gulp purge-css