microbe-ui

Narrowly targeted specific UI library

API

🔙 Home

Table of content

Functions
Mixins
Variables
Components
- Module Grid
- Owl
- Spacer

Functions

`microbe-em()`

Convert a pixel value to the em value

Parameters

Name	Description	Type	Default value
`value`	pixel value, units are optional	`Number`	—
`base`	base value for calculations	`Number`	`16`

Returns

Number

Examples

microbe-em(16) // 1em
microbe-em(24px) // 1.5em
microbe-em(20, 20) // 1em
microbe-em(24, 32) // .75em

🔙 Home

🔝 Table of content

`microbe-important()`

If $microbe-important-qualifier is enabled - will add !important qualifier to CSS value

Parameters

Name	Description	Type	Default value
`value`	any CSS value	`*`	—

Returns

* - CSS value with/or !important qualifier

Examples

$microbe-important-qualifier: true;
div {
      background:  microbe-important(none); // none !important;
      font-size:   microbe-important(microbe-em(24px)); // 1.5em !important;
      margin-left: microbe-important(calc(#{microbe-em(24px)} * -1)); // -1.5em !important;
}

$microbe-important-qualifier: false;
div {
      background:  microbe-important(none); // none;
      font-size:   microbe-important(microbe-em(24px)); // 1.5em;
      margin-left: microbe-important(calc(#{microbe-em(24px)} * -1)); // -1.5em;
}

🔙 Home

🔝 Table of content

`microbe-rem()`

Convert a pixel value to the rem value

Parameters

Name	Description	Type	Default value
`value`	pixel value, units are optional	`Number`	—
`base`	base value for calculations	`Number`	`16`

Returns

Number

Examples

microbe-rem(16) // 1rem
microbe-rem(4px) // 0.25rem
microbe-rem(20, 20) // 1rem
microbe-rem(40, 20px) // 2rem

🔙 Home

🔝 Table of content

`microbe-strip-units()`

Get unitless value (trim units)

Parameters

Name	Description	Type	Default value
`value`	—	`Size`	—

Returns

Number - trimmed value

Examples

microbe-strip-units(10px) //  10
microbe-strip-units(20rem) // 20
microbe-strip-units(5vw) //   5

🔙 Home

🔝 Table of content

Mixins

`microbe-absolute-center`

Parameters

Name	Description	Type	Default value
`$width`	—	`Size`	—
`$height`	—	`Size`	`$width`
`$set-absolute`	—	`Bool`	`true`

Examples

@include microbe-absolute-cube(3rem)
// position: absolute;
// top: 50%;
// left: 50%;
// width: 3rem;
// height: 3rem;
// margin: -1.5rem 0 0 -1.5rem;
@include microbe-absolute-cube(4rem, 60px)
// position: absolute;
// top: 50%;
// left: 50%;
// width: 4rem;
// height: 60px;
// margin: -30px 0 0 -2rem;

🔙 Home

🔝 Table of content

`microbe-absolute-gap`

Parameters

Name	Description	Type	Default value
`$x`	top & bottom	`Number`	—
`$y`	left & right	`Number`	—
`$set-absolute`	—	`Bool`	`true`

Examples

@include microbe-absolute-cube(10px)
// position: absolute;
// top: 10px;
// right: 10px;
// bottom: 10px;
// left: 10px;

@include microbe-absolute-cube(10px, 20px)
// position: absolute;
// top: 10px;
// right: 20px;
// bottom: 10px;
// left: 20px;

🔙 Home

🔝 Table of content

`microbe-absolute-square`

Parameters

Name	Description	Type	Default value
`$percent`	—	`Number`	—
`$set-absolute`	—	`Bool`	`true`

Examples

@include microbe-absolute-square(54%)
// position: absolute;
// top: 27%;
// left: 27%;
// width: 54%;
// height: 54%;

@include microbe-absolute-square(120%)
// position: absolute;
// top: -10%;
// left: -10%;
// width: 120%;
// height: 120%;

🔙 Home

🔝 Table of content

`microbe-flex-cell-width`

Parameters

Name	Description	Type	Default value
`$width`	cell size	`Size`	—

🔙 Home

🔝 Table of content

`microbe-media`

Generate @media queries with content

Parameters

Name	Description	Type	Default value
`$breakpoint`	number / print / landscape / portrait	`Number / Keyword`	—
`$direction`	min / max	`Keyword`	`min`
`$dimension`	width / height / device-width / device-height	`Keyword`	`width`

Examples

.example-block {
    font-size: 12px;
    @include microbe-media(1024px) {
        font-size: 16px;
    }
    @include microbe-media(1024px, max) {
        color: red;
    }
    @include microbe-media(640px, min, height) {
        font-weight: bold;
    }
    @include microbe-media(landscape) {
        background: #eee;
    }
    @include microbe-media(portrait) {
        @include microbe-media(520px, max) {
            background-color: red;
        }
    }
    @include microbe-media(print) {
        background: none !important;
    }
}

/* render result */
.example-block {
    font-size: 12px;
}
@media only screen and (min-width: 1024px) {
    .example-block {
        font-size: 16px;
    }
}
@media only screen and (max-width: 1023px) {
    .example-block {
        color: red;
    }
}
@media only screen and (min-height: 640px) {
    .example-block {
        font-weight: bold;
    }
}
@media (orientation: landscape) {
    .example-block {
        background: #eee;
    }
}
@media only screen and (orientation: portrait) and (max-width: 519px) {
    .example-block {
        background-color: red;
    }
}
@media print {
    .example-block {
        background: none !important;
    }
}

🔙 Home

🔝 Table of content

Variables

Spaces

Available list of spaces:

Name	Description	Value	Scope
`$microbe-space-xxs`	Space size xxs (xx-small)	`microbe-rem(2)`	default
`$microbe-space-xs`	Space size xs (x-small)	`microbe-rem(4)`	default
`$microbe-space-sm`	Space size sm (small)	`microbe-rem(8)`	default
`$microbe-space-md`	Space size md (medium)	`microbe-rem(12)`	default
`$microbe-space-df`	Space size df (default)	`microbe-rem(16)`	default
`$microbe-space-lg`	Space size lg (large)	`microbe-rem(24)`	default
`$microbe-space-xl`	Space size xl (x-large)	`microbe-rem(32)`	default
`$microbe-space-xxl`	Space size xxl (xx-large)	`microbe-rem(48)`	default
`$microbe-space-hg`	Space size hg (huge)	`microbe-rem(80)`	default

Spaces map

All spaces, that not equal to false - are gathered to one map variable $microbe-spaces-map. This variable used as iterator on process of generations css code.

Name	Description	Value	Scope
`$microbe-spaces-map`	Map with filtered space variables	`_microbe-generate-vars-map(spaces)`	private

🔙 Home

🔝 Table of content

Breakpoints

Available list of spaces:

Name	Description	Value	Scope
`$microbe-breakpoint-xxs`	Breakpoint screen xxs (xx-small)	`375px`	default
`$microbe-breakpoint-xs`	Breakpoint screen xs (x-small)	`480px`	default
`$microbe-breakpoint-sm`	Breakpoint screen sm (small)	`568px`	default
`$microbe-breakpoint-md`	Breakpoint screen md (medium)	`768px`	default
`$microbe-breakpoint-df`	Breakpoint screen df (default)	`1024px`	default
`$microbe-breakpoint-lg`	Breakpoint screen lg (large)	`1280px`	default
`$microbe-breakpoint-xl`	Breakpoint screen xl (x-large)	`1420px`	default
`$microbe-breakpoint-xxl`	Breakpoint screen xxl (xx-large).	`1660px`	default
`$microbe-breakpoint-hd`	Breakpoint screen hd (full-hd).	`1980px`	default

Breakpoints map

All spaces, that not equal to false - are gathered to one map variable $microbe-breakpoints-map. This variable used as iterator on process of generations css code.

Name	Description	Value	Scope
`$microbe-breakpoints-map`	Map with filtered breakpoint variables	`_microbe-generate-vars-map(breakpoints)`	private

🔙 Home

🔝 Table of content

IE fallback

$microbe-ie-fallback default value: false

Use degradation for IE support

CSS Custom properties will be transformed to CSS values

🔙 Home

🔝 Table of content

`!important` qualifier

$microbe-important-qualifier default value: true

Enable !important qualifier

🔙 Home

🔝 Table of content

Components

Module Grid

// import component directly
@import "~microbe-ui/src/components/module-grid";

Name	Description	Value	Scope
`$microbe-module-grid-cols`	Columns count	`12`	default
`$microbe-module-cell-span`	Cell positions count	`12`	default
`$microbe-module-cell-width-custom-property-name`	CSS Custom property name for cell width value	`--microbe-module-cell-width`	default

🔙 Home

🔝 Table of content

Owl

// import component directly
@import "~microbe-ui/src/components/owl";

Name	Description	Value	Scope
`$microbe-owl-size-custom-property-name`	CSS Custom property name for “owl” module size	`--microbe-owl-size`	default

Read more about “Lobotomized Owls”:
https://alistapart.com/article/axiomatic-css-and-lobotomized-owls/

🔙 Home

🔝 Table of content

Spacer

// import component directly
@import "~microbe-ui/src/components/spacer";

Name	Description	Value	Scope
`$microbe-spacer-size-custom-property-name`	CSS Custom property name for spacer size	`--microbe-spacer-size`	default

🔙 Home

🔝 Table of content

API

Table of content

Functions

microbe-em()

Parameters

Returns

Examples

microbe-important()

Parameters

Returns

Examples

microbe-rem()

Parameters

Returns

Examples

microbe-strip-units()

Parameters

Returns

Examples

Mixins

microbe-absolute-center

Parameters

Examples

microbe-absolute-gap

Parameters

Examples

microbe-absolute-square

Parameters

Examples

microbe-flex-cell-width

Parameters

microbe-media

Parameters

Examples

Variables

Spaces

Spaces map

Breakpoints

Breakpoints map

IE fallback

!important qualifier

Components

Module Grid

Owl

Spacer

`microbe-em()`

`microbe-important()`

`microbe-rem()`

`microbe-strip-units()`

`microbe-absolute-center`

`microbe-absolute-gap`

`microbe-absolute-square`

`microbe-flex-cell-width`

`microbe-media`

`!important` qualifier