Getting Started

Using Yogurt via CDN

<!-- HTML -->
<link defer href="https://unpkg.com/yogurt-css@1.1.4/dist/yogurt-1.1.4_solidcore.min.css" rel="stylesheet" rel="preload" as="style" media="all">

<!-- CSS -->
@import "https://unpkg.com/yogurt-css@1.1.4/dist/yogurt-1.1.4_solidcore.min.css";
Note: The CDN build is a published version and always behind the latest update at the Github repository. (See Utility Map for new changes.)Note: The CDN build file size is huge, ideal for prototyping. Unrecommended to use in production. Learn more about how to reduce the framework size efficiently. (See Import Framework , File Size Control )Note: Using CDN does not have the benefit to use the @extend directive. (See Extract Utility Classes )

Using Yogurt via Package Manager v1.0.9

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

You can include the Yogurt CSS file from the node_modules directory with an HTML <link> tag or import the yogurt.scss into .scss file with @import directive.

# JS (v1.1.0)
import 'yogurt-css'

# SCSS/SASS
@import 'node_modules/yogurt-css/yogurt';

# HTML
<link href="node_modules/yogurt-css/dist/yogurt-1.1.4_solidcore.css">
<link href="node_modules/yogurt-css/dist/yogurt-1.1.4_solidcore.min.css">
Note: The node_modules is a published version and always behind the latest update at the Github repository.Note: The CDN build file size is huge, ideal for prototyping. Unrecommended to use in production. Learn more about how to reduce the framework size efficiently. (See Import Framework , File Size Control )

Using Yogurt via CLI

To create a new project, run:

# YARN
$ yarn create create-yogurt-app my-new-project
# NPM
$ npx create-yogurt-app my-new-project

The CLI gives you an optional tool to quickly installs and sets up a new frontend project with essential build tools such as preprocessors, postprocessors, etc. Use the tool for the production-ready build.

If you install the create-yogurt-app package to run locally, simply run yogurt <project_name>,

# YARN
$ yarn global add create-yogurt-app
# NPM
$ npm i -g create-yogurt-app
# USAGE
$ yogurt my-new-project
Note: The CLI always comes with the latest build, including the unpublished changes.Yogurt Playground