mere-css-utility v0.3.2

Mere-css-utility

A set of basic CSS classes to facilitate the development process.

Features

• Small size (3kb - minified);
• There are base styles for normalizing a document;
• Only the necessary minimum of CSS classes;
• Unified custom indents.

Getting Started

Installation

npm i mere-css-utility

Quick Start

In 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/mere-css-utility@0.3.2/css/mere-css-utility.css">

Documentation

Displays

In your scss file: @import "node_modules/mere-css-utility/scss/utility/displays"

Flexbox

In your scss file: @import "node_modules/mere-css-utility/scss/utility/flexbox"

Typography

In your scss file: @import "node_modules/mere-css-utility/scss/utility/typography"

Indents

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)

Base

In your scss file: @import "node_modules/mere-css-utility/scss/utility/base"

This file contains base CSS styles for reset default browsers styles.