Customization

Utility Modules

You can manually exclude or include the utility modules by comment out the lines in the .scss utility module files, separate by the variants. The final build file size will be smaller or bigger depends on how much utility you need.

For the most recommended and effective way to strip down unused CSS classes is using PurgeCSS or using Yogurt CLI tool. (See also, Purge Unused Classes).

Configuration

You can customize the Yogurt default configuration file by adding or removing the values (or modifiers) that you don't need. If you find a utility that is not included in the build, you can create your utility using the Plugin API.

// @file `src/_config.scss`
$screens:
  (xs, 320px),
  (sm, 640px),
  (md, 768px),
  (lg, 1024px),
  (xl, 1280px),
  (\32k, 1920px), // 2k
  (\33k, 2560px), // 3k
  (\34k, 3840px), // 4k
  (\35k, 5120px), // 5k
  (\36k, 5760px), // 6k
  (\37k, 7000px), // 7k
  (\38k, 7680px); // 8k
...

To customize the existing utility modules is located in these directories,

./src/
└── variants
    ├── non-responsive
    │   ├── default
    │   └── pseudo
    ├── responsive
    │   ├── default
    │   └── pseudo
    └── theme    
        └── default

Example

// @file `src/variants/non-responsive/default/_default.scss`

/* accessibility */
@include screenReader($class: $default)

/* backgrounds */
@include backgroundColorAmber($class: $default)
...