Customization

Plugin API v1.1.5

Using plugin API to create your utility module and use it right away without modifying any of the Yogurt core files. Yogurt will generates after you run the build. All you need is write your plugins in the src/plugins.scss file.

Directive

// @param: {String}  $class
// @param: {String}  $property
// @param: {List}    $modifier [()]
// @param: {List}    $variant [()]
// @param: {Bool}    $negative [null]
// @param: {String}  $option [null]

@include yogurt(
  // Classname
  $class: 'text', // (e.g. .text-)
  // CSS Property
  $property: font-size,
  // Classname Modifier
  $modifier: (
    // (output: .text-xs { font-size: 0.75rem })
    xs: 0.75rem,
    // (output: .text-sm { font-size: 0.875rem })
    sm: 0.875rem
  ),
  // Enable Negative Value (true|false)
  $negative: true,
  // Add Operators
  $option: '',
  // Enable Variants Settings
  $variant: (
    'responsive',
    'dark-mode', 'light-mode',
    'reduce-motion',
    'portrait', 'landscape',
    'hover', 'group-hover',
    'focus', 'group-focus', 'focus-visible', 'focus-within',
    'active',
    'visited',
    'checked',
    'disabled'
  )
);

Examples

Create basic utility.

// @file: `src/plugins.scss`
@include yogurt(
  $class: 'text',
  $property: font-size,
  $modifier: (
    xs: 0.75rem,
    sm: 0.875rem
  )
);

Create responsive utility.

// @file: `src/plugins.scss`
@include yogurt(
  $class: 'text',
  $property: font-size,
  $modifier: (
    xs: 0.75rem,
    sm: 0.875rem
  ),
  $variant: (
    'responsive'
  )
);

Create responsive utility with variants.

// @file: `src/plugins.scss`
@include yogurt(
  $class: 'text',
  $property: font-size,
  $modifier: (
    xs: 0.75rem,
    sm: 0.875rem
  ),
  $variant: (
    'responsive',
    'hover', 'group-hover'
  )
);

Create utility with negative values.

// @file: `src/plugins.scss`
@include yogurt(
  $class: 'm',
  $property: margin,
  $modifier: (
    1: 1rem,
    2: 2rem
  ),
  $negative: true
);

Compile

After you finished editing the plugins.scss file, run one of these commands every time you make changes to the Yogurt files. And pretty much it is done, you can try out your new utility modules in your project.

# YARN
$ yarn build
# NPM
$ npm run build

Compiled outputs are located in:

• CSS output directory ./dist/.
• SCSS output directory (root) ./.

(root directory)
├── dist
│   └── (CSS outputs)
└── (SCSS output)