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

Use NPM and @SASS

npm i [email protected]

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. |

** We will develop more.

The library will take care of the rest.

Good luck in your work.