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.
Experiences with SCSS, SASS, NPM.
@Mixins are modified and treated to be reusable. For some you can add custom values.
npm i edge-scss@0.1.5-alpha4
And put this code the project to component-file.scss
@use 'edge-scss' as edge;
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. |