Customization

Plugin API v1.0.8

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.

Note: Use keyword for variant to apply pseudo class variants, such as hover, focus, active, visited, checked, disabled, responsive, responsive-hover, responsive-focus, responsive-active, responsive-visited, responsive-checked, responsive-disabled .

Example

Create basic utility.

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'text',
    property: 'font-size',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  )
)

Create default responsive utility.

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'text',
    variant: 'responsive',
    property: 'font-size',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  )
)

Create responsive utility with variants.

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'text',
    variant: 'responsive-hover',
    property: 'font-size',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  )
)

Create an array of utilities.

// @file: `src/_plugins.scss`
@include plugin(
  (
    utility: 'text',
    property: 'font-size',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  ),
  (
    utility: 'text',
    property: 'font-size',
    variant: 'hover',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  ),
  (
    utility: 'text',
    property: 'font-size',
    variant: 'responsive',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  ),
  (
    utility: 'text',
    property: 'font-size',
    variant: 'responsive-hover',
    modifier: (
      'xs': '0.75rem',
      'sm': '0.875rem'
    )
  ),
  // ...
)

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 module in your project.

# YARN
$ yarn build
# NPM
$ npm run build