@milo-css/utilities v1.0.2

Milo CSS Utilities

An array of CSS Utility classes to be used in your Milo CSS-based framework.

Installation

npm i @milo-css/utilities

Utilities

Clearfix

@import "node_modules/@milo-css/utilities/clearfix";

Color

@import "node_modules/@milo-css/utilities/color";

Utility classes for background-color and color are created from the colours defined within a colors() map variable. Additional utility classes will be added by adding more key-value pairs to this map.

The variables below are provided by default but can be merged with or overridden in your framework:

$colors: () !default;
$colors: map-merge(
    (
        // Required base colours
        "white":                rgb(255, 255, 255),
        "black":                rgb(17, 17, 17),
        "primary":              rgb(10, 211, 255),
        "secondary":            rgb(235, 236, 238)
    ),
    $colors
);

The variables above will compile to generate the following classes:

Display

@import "node_modules/@milo-css/utilities/display";

Flex

@import "node_modules/@milo-css/utilities/flex";

Use all the below with d-flex on the container of the items to be flexed.

A good resource on flex can be found at css-tricks.com.

Float

@import "node_modules/@milo-css/utilities/float";

Grid

@import "node_modules/@milo-css/utilities/grid";

Use all the below with d-grid position all grid items wihin the parent container.

A good resource on flex can be found at css-tricks.com.

Image

@import "node_modules/@milo-css/utilities/image";

List

@import "node_modules/@milo-css/utilities/list";

Utility classes to be applied to a <ul> or <ol> element. The variable below are provided by default but can be overridden in your framework:

$list-inline-elem-margin-x:     1rem !default;

Overflow

@import "node_modules/@milo-css/utilities/overflow";

Position

@import "node_modules/@milo-css/utilities/position";

Sizing

@import "node_modules/@milo-css/utilities/sizing";

Spacing

@import "node_modules/@milo-css/utilities/spacing";

Produces semantic classes for all margin & padding properties based on a base value applied to keys defined within a spacers() map variable.

The variables below are provided by default but can be overridden in your framework:

$base-spacer:               1rem !default;
$base-spacer-y:             $base-spacer !default;
$base-spacer-x:             $base-spacer !default;

$spacers: (
    // Size     // Lengths
    "0":        (x: 0, y: 0),
    "h":        (x: ($base-spacer-x * .5), y: ($base-spacer-y * .5)),
    "1":        (x: $base-spacer-x, y: $base-spacer-y),
    "1h":       (x: ($base-spacer-x * 1.5), y: ($base-spacer-y * 1.5)),
    "2":        (x: ($base-spacer-x * 2), y: ($base-spacer-y * 2)),
    "2h":       (x: ($base-spacer-x * 2.5), y: ($base-spacer-y * 2.5)),
    "3":        (x: ($base-spacer-x * 3), y: ($base-spacer-y * 3)),
    "4":        (x: ($base-spacer-x * 4), y: ($base-spacer-y * 4)),
    "5":        (x: ($base-spacer-x * 5), y: ($base-spacer-y * 5)),
    "6":        (x: ($base-spacer-x * 6), y: ($base-spacer-y * 6)),
    "7":        (x: ($base-spacer-x * 7), y: ($base-spacer-y * 7)),
    "8":        (x: ($base-spacer-x * 8), y: ($base-spacer-y * 8)),
    "9":        (x: ($base-spacer-x * 9), y: ($base-spacer-y * 9)),
    "10":       (x: ($base-spacer-x * 10), y: ($base-spacer-y * 10)),
) !default;

The variables above will compile to generate the following classes for each variable outlined in the spacers() map where XX is the key, eg. mt-1h:

The following classes are also included:

Text

@import "node_modules/@milo-css/utilities/text";

Utility classes to be applied to text-based elements. The variables below are provided by default but can be overridden in your framework:

$strong-font-weight:        700 !default;
$lead-font-weight:          600 !default;
$small-font-size:           80% !default;
$muted-opacity:             .6 !default;

Visibility

@import "node_modules/@milo-css/utilities/visibility";

Utility classes for background-color and color are created from the colours defined within a colors() map variable. Additional utility classes will be added by adding more key-value pairs to this map.

Produces semantic classes for hiding element based on values defined within a viewport-breakpoints() map variable.

The variables below are provided by default but can be overridden in your framework:

$viewport-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

The variables above will compile to generate the following classes: