0.0.1 • Published 5 years ago
wilhelm v0.0.1
Installation
Wilhelm is available via npm or yarn.
npm install wilhelm
# or
yarn add wilhelmAfter installing, simply reference Wilhelm in your scss file.
@import '_wilhelm.scss';Using Wilhelm
Up to now these mixins are available:
| Name | Description |
|---|---|
wilhelm-grid() | This turns the current element to a basic CSS Grid container. |
wilhelm-grid-item() | wilhelm-grid-item turns the current element into a Grid item. It has to be places within wilhelm-grid. |
wilhelm-flex() | This turns the current element into a basic CSS Flexbox container. |
wilhelm-flex-item() | wilhelm-flex-item turns the current element into a Grid item. It has to be places within wilhelm-flex. |
To include a Wilhelm mixin, simply use
.element {
@include wilhelm-grid;
}Options & Defaults
If no configuration is given when using a Wilhelm mixin, the default is used. If you pass configuration, this configuration will override the specific part of the default. To ensure that the overall styling still works, the rest of the default configuration will remain intact and will be used.
wilhelm-grid
| Property | Value |
|---|---|
| display | grid |
| grid-column-gap | 0 |
| grid-row-gap | 0 |
| justify-content | stretch |
| grid-auto-rows | 1fr |
wilhelm-grid-item
| Property | Value |
|---|---|
| justify-items | stretch |
| align-self | stretch |
| grid-auto-columns | 1fr |
wilhelm-flex
| Property | Value |
|---|---|
| display | flex |
| flex-direction | row |
| flex-wrap | nowrap |
| justify-content | flex-start |
| align-items | stretch |
| align-content | stretch |
wilhelm-flex-item
| Property | Value |
|---|---|
| order | 0 |
| flex-grow | 0 |
| flex-shrink | 1 |
| flex-basis | auto |
| align-self | stretch |
Passing options
You can pass any valid option you like.
.element {
@include wilhelm-grid-item( $grid-row-gap: 20px );
}
.another-element {
@include wilhelm-grid-item( $justify-self: "end" );
}0.0.1
5 years ago