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