Edge-scss NPM | npm.io

EDGE is simple SCSS @mixin library originating from Bootstrap (v5.0).

Primarily created for Angular 7 and newer.
To achieve as little as possible in CSS compilation.

Assumptions

Experiences with SCSS, SASS, NPM.

@Mixins are modified and treated to be reusable. For some you can add custom values.

Playground

Install

npm i edge-scss@0.1.5-alpha4

And put this code the project to component-file.scss

@use 'edge-scss' as edge;

Usage and Documentation

List @mixin and @include ...

@include edge.$name-mixin;

Name @mixin	Description
base @mixin
`preflights();`	Creates and specify a declaration a basic element.
`host();`	Creates and specify a basic declaration with a :host element.
`html();`	Creates and specify a basic declaration with a html element.
`body();`	Creates and specify a basic declaration with a body element. Add a value for the minimum width, but you don't have to.
`box-sizing();`	Creates and specify a declaration for all element.
`clearfix();`	Creates and specify a declaration for all element.
`list-unstyled();`	Creates and specify a basic declaration for list element.
breakpoints @mixin
`media-screen-min() { @content };`	Creates and specify a derivative declaration for @media query with own content declaration. Specify a own value.
`media-screen-max() { @content };`	Creates and specify a derivative declaration for @media query with own content declaration. Specify a own value.
`media-min() { @content };`	Creates and specify a derivative declaration for @media query with own content declaration. Specify a prescribed value.
`media-max() { @content };`	Creates and specify a derivative declaration for @media query with own content declaration. Specify a prescribed value.
`media-between() { @content };`	Creates and specify a derivative declaration for @media query with own content declaration. Specify a prescribed value.
layout @mixin
`container();`	Creates and specify a complete declaration for container element or section. Add value sm, md, lg, xl, xxl and fluid.
`row();`	Creates and specify a complete declaration for row element. Flex element.
`row-cols();`	Specify on a parent element(e.g., .row) to force immediate children into NN number of columns. Supports wrapping to new lines, but does not do a Masonry style grid.
`col-ready();`	Creates and specify a basic declaration for column element.
`col-();`	Creates and specify a complete declaration for column element. Add a value for the width, but you don't have to. (1 - 12)
`col-xs-();`	Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
`col-sm-();`	Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
`col-md-();`	Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
`col-lg-();`	Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
`col-xl-();`	Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
`col-xxl-();`	Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
`grid-ready($gap-col, $gap-row);`	Creates and specify a basic declaration for grid wrap element.
`grid-main();`	Creates and specify a basic declaration for main element.
`grid-aside($gap-col, $gap-row);`	Creates and specify a basic declaration for aside element.
`grid-header();`	Creates and specify a basic declaration for header element.
`grid-footer();`	Creates and specify a basic declaration for footer element.
dialog @mixin
`overlay();`	Creates and specify a basic declaration for modal overlay.
`modal();`	Creates and specify a basic declaration for modal container.
colors @mixin
`color-scheme($name);`	Creates and specify a declaration for color scheme.
UI
images @mixin
`img-fluid();`	Creates and specify a basic declaration for an auto-width image element.
`img-thumbnail();`	Creates and specify a basic declaration for a thumbnail element.
`img-aspect();`	Creates and specify a declaration for a aspect-ratio.
`figure();`	Creates and specify a basic declaration for a figure element.
buttons @mixin
`btn-ready();`	Creates and specify a basic declaration for button element.
`btn($width, $height, $padding, $radius, $border, $background, $color, );`	Creates and specify an advanced declaration for button element.
`btn-close($width, $color);`	Creates and specify an advanced declaration for close button element.