Getting started

🔙 Home

Table of content

1. Install via npm
2. Import
   • Core
   • Components for your project
   • Redefinition of default values

---

Install via npm

After setting up your Sass (SCSS) workflow, install microbe-ui via npm

$ npm i microbe-ui

We don’t distribute CSS version!
Power of microbe-ui in its full customization via SCSS variables.
Look at API Section to see it

---

🔙 Home

🔝 Table of content

---

Import

Core

First at all, you need to import microbe-ui core:

@import "~microbe-ui/src/core";

Components for your project

Than you can import desired microbe-ui components and helpers, e.g.:

@import "~microbe-ui/src/core";
// add "Module grid" and "Spacer" components
@import "~microbe-ui/src/components/module-grid";
@import "~microbe-ui/src/components/spacer";
@import "~microbe-ui/src/helpers/gutters";

Redefinition of default values

All SCSS microbe-ui variables has !default flag. You can easily change default values for all variables in our API. This opportunity allows you to customize microbe-ui for your current project.

Note! You must re-define variables before import components

Example:

@import "~microbe-ui/src/core";

// re-define before import components
$microbe-breakpoint-sm: 40rem; // change "md" breakpoint value (default value: `568px`) 
$microbe-breakpoint-md: 800px; // change "md" breakpoint value (default value: `768px`)
$microbe-space-xxl: microbe-rem(60) // change "xxl" space (default value: `microbe-rem(48)`)

// add "Module grid" and "Spacer" components
@import "~microbe-ui/src/components/module-grid";
@import "~microbe-ui/src/components/spacer";
@import "~microbe-ui/src/helpers/gutters";

---

🔙 Home

🔝 Table of content

---