edge-scss

---

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

---

---

Use NPM and @SASS

npm i edge-scss@0.1.5-alpha4

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

@use 'edge-scss' as edge;

---

---

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

---