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