A set of basic CSS classes to facilitate the development process.
- Small size (3kb - minified);
- There are base styles for normalizing a document;
- Only the necessary minimum of CSS classes;
- Unified custom indents.
npm i mere-css-utilityIn your SCSS file:
@import "node_modules/mere-css-utility/scss/mere";
------------------------------------
or you can use only needed packages
------------------------------------
@import 'node_modules/mere-css-utility/scss/utility/base';
@import 'node_modules/mere-css-utility/scss/utility/displays';
@import 'node_modules/mere-css-utility/scss/utility/flexbox';
@import 'node_modules/mere-css-utility/scss/utility/indents';
@import 'node_modules/mere-css-utility/scss/utility/typography';
In your JS file:
import "node_modules/mere-css-utility/scss/mere.scss";
------------------------------------
or you can use only needed packages
------------------------------------
import 'node_modules/mere-css-utility/scss/utility/base.scss';
import 'node_modules/mere-css-utility/scss/utility/displays.scss';
import 'node_modules/mere-css-utility/scss/utility/flexbox.scss';
import 'node_modules/mere-css-utility/scss/utility/indents.scss';
import 'node_modules/mere-css-utility/scss/utility/typography.scss';
------------------------------------
or you can use CSS build
------------------------------------
import 'node_modules/mere-css-utility/css/mere-css-utility.css';
In your HTML file:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/mere-css-utility.css">
In your scss file: @import "node_modules/mere-css-utility/scss/utility/displays"
| CSS class | Meaning |
|---|---|
| .d-inline | display: inline |
| .d-inline-block | display: inline-block |
| .d-block | display: block |
| .d-flex | display: flex |
In your scss file: @import "node_modules/mere-css-utility/scss/utility/flexbox"
| CSS class | Meaning |
|---|---|
| .ai-flex-start | align-items: flex-start |
| .ai-flex-end | align-items: flex-end |
| .ai-center | align-items: center |
| .jc-flex-start | justify-content: flex-start |
| .jc-flex-end | justify-content: flex-end |
| .jc-center | justify-content: center |
| .jc-space-between | justify-content: space-between |
| .jc-space-around | justify-content: space-around |
| .fd-row | flex-direction: row |
| .fd-row-reverse | flex-direction: row-reverse |
| .fd-column | flex-direction: column |
| .fd-column-reverse | flex-direction: column-reverse |
| .fw-wrap | flex-wrap: wrap |
In your scss file: @import "node_modules/mere-css-utility/scss/utility/typography"
| CSS class | Meaning |
|---|---|
| .fs-1 | font-size: 0.75rem |
| .fs-2 | font-size: 1rem |
| .fs-3 | font-size: 1.25rem |
| .fs-4 | font-size: 1.5rem |
| .fs-5 | font-size: 2rem |
| .fs-6 | font-size: 2.5rem |
| .fw-light | font-weight: light |
| .fw-normal | font-weight: normal |
| .fw-medium | font-weight: medium |
| .fw-bold | font-weight: bold |
| .ta-center | text-align: center |
| .ta-right | text-align: right |
| .ta-left | text-align: left |
| .tt-uppercase | text-transform: uppercase |
| .tt-lowercase | text-transform: lowercase |
| .tt-capitalize | text-transform: capitalize |
In your scss file: @import "node_modules/mere-css-utility/scss/utility/indents"
A set of classes mb, mt, mr, ml, pt, pb, pr, pl with number postfix from 0 to 5.
Default $base-indent: 8px. If you want to rewrite base indent change the variable $base-indent.
$base-indent: 10px;
@import 'node_modules/mere-css-utility/scss/mere';
or
$base-indent: 10px;
@import 'node_modules/mere-css-utility/scss/utility/indents';
${i} - is the number of indentation, which is a factor for $base-indent
For example .mb-3 is equal margin-bottom: 24px (8px * 3) and .mr-0 is equal margin-right: 0 (8px * 0)
| CSS class | Meaning |
|---|---|
| .mb-${i} | margin-bottom: ${i} * $base-indent |
| .mt-${i} | margin-top: ${i} * $base-indent |
| .mr-${i} | margin-right: ${i} * $base-indent |
| .ml-${i} | margin-left: ${i} * $base-indent |
| .pb-${i} | padding-bottom: ${i} * $base-indent |
| .pt-${i} | padding-top: ${i} * $base-indent |
| .pr-${i} | padding-right: ${i} * $base-indent |
| .pl-${i} | padding-left: ${i} * $base-indent |
In your scss file: @import "node_modules/mere-css-utility/scss/utility/base"
This file contains base CSS styles for reset default browsers styles.