0.1.3 • Published 3 years ago

@edge-code/edge-scss v0.1.3

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

EDGE-scss


SCSS Dynamic @mixin library for developing responsive.

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 install @edge-code/edge-scss

And put the @import url in the project root style-file.scss

@import "node_modules/@edge-code/edge-scss/edge-core";

Usage and Documentation

How use @mixin and @include.

@example your index.html or template component.

<!DOCTYPE html>
<html>
  <head>
    < .../>
  </head>
  <body>
    < .../>

    <div class="my-container">
        <div class="my-row">
            <div class="my-col">
              @Some Content
              <a href="#" class="my-btn"></a>
            </div>

            <div class="my-col">
              @Some Content
            </div>
        </div>
    </div>

    < .../>
  </body>
</html>

In your project style-file.scss or root core.scss

@example.scss

@import "node_modules/@edge-code/edge-scss/edge-core";  //On Top

@include make-box-sizing;
@include make-body(320px);

.my-container {
    @include make-container;    // .container  @mixin

    //Your Declaration Content or Next @mixin
}

.my-row {
    @include make-row;          // .row  @mixin
    //Your Declaration Content or Next @mixin
}

.my-col {
    @include make-col(12);      // .col-12     @mixin
    @include make-col-md(6);    // .col-md-6   @mixin col 
    @include make-col-xl(3);    // .col-xl-3   @mixin col

    //Your Declaration Content or Next @mixin
}

.my-btn {
    @include make-btn(
        $radius: .25rem,    // radius
        $bg-btn: purple,    // background-color
        $color: white,      // color
        $padding: 2rem,     // padding
        $width: 100%,       // width
    );
    //Your Declaration Content or Next @mixin
}

@example.css

*, ::after, ::before {
  box-sizing: border-box;
}
body  {
  display: block;
  margin: 0;
  padding: 0;
  min-width: 320px;
}
.my-container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}
.my-row {
  --edge-gutter-x: 1.5rem;
  --edge-gutter-y: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin-top: calc(-1 * var(--edge-gutter-y));
  margin-right: calc(-0.5 * var(--edge-gutter-x));
  margin-left: calc(-0.5 * var(--edge-gutter-x));
}
.my-col {
  flex: 0 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .my-col {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .my-col {
    flex: 0 0 auto;
    width: 25%;
  }
}
.my-btn {
  --edge-gutter-x: 0;
  --edge-gutter-y: 1.5rem;
  width: fit-content;
  width: -moz-fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  height: calc(1.5 * var(--edge-gutter-y));
  border-radius: 0.25rem;
  color: white;
  background-color: purple;
  padding: 0 2rem;
  width: 100%;
}
.my-btn:active {
  color: white;
  text-decoration: none;
}
.my-btn:hover {
  background-color: #993399;
  color: white;
  text-decoration: none;
}
.my-btn:visited {
  color: white;
  text-decoration: none;
}
@media (min-width: 768px) {
  .my-btn {
    height: calc(1.667 * var(--edge-gutter-y));
  }
}
@media (min-width: 992px) {
  .my-btn {
    height: calc(2 * var(--edge-gutter-y));
  }
}

Breakpoints

BreakpointsValue
XS321px
SM576px
MD768px
LG992px
XL1200px
XXL1400px

@example.scss Breakpoints

.my-class {
  // Example Media Query Min
  @include media-min(md) { 
      //Your Declaration Content or Next @mixin
  }
  @include media-min(xxl) { 
      //Your Declaration Content or Next @mixin
  }
  //Or Max
  @include media-max(xl) { 
      //Your Declaration Content or Next @mixin
  }
}

@example.css

@media (min-width: 768px) {
  .my-class {
    //Your Declaration
  }
}
@media (min-width: 1400px) {
  .my-class {
    //Your Declaration
  }
}

@media (max-width: 1199.98px) {
  .my-class {
    //Your Declaration
  }
}

Breakpoints Individual

@example.scss

.my-class {
  @include media-screen-min(951px) {  // @mixin Media Query Min
      //Your Declaration Content or Next @mixin
  }
  
  @include media-screen-max(950px) {  // @mixin Media Query Max
      //Your Declaration Content or Next @mixin
  }
}

@example.css

@media (min-width: 951px) {
  .my-class {
    //Your Declaration
  }
}

@media (max-width: 950px) {
  .my-class {
    //Your Declaration
  }
}

Breakpoints in GRID default

BreakpointsColumns
02 column
XS2 columns
SM4 columns
MD6 columns
LG8 columns
XL10 columns
XXL12 columns

List @mixin and @include ...

Name @mixinDescription
base @mixin
make-host();Creates and specify a basic declaration with a :host element.
make-html();Creates and specify a basic declaration with a html element.
make-body($val);Creates and specify a basic declaration with a body element. Add a value for the minimum width, but you don't have to.
make-box-sizing();Creates and specify a declaration for all element.
make-clearfix();Creates and specify a declaration for all element.
make-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
make-container();Creates and specify a complete declaration for container element or section. Add value sm, md, lg, xl, xxl and fluid.
make-row();Creates and specify a complete declaration for row element. Flex element.
make-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.
make-col-ready();Creates and specify a basic declaration for column element.
make-col-();Creates and specify a complete declaration for column element. Add a value for the width, but you don't have to. (1 - 12)
make-col-xs-();Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
make-col-sm-();Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
make-col-md-();Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
make-col-lg-();Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
make-col-xl-();Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
make-col-xxl-();Creates and specify a full declaration for an auto-width column element. Add a value for the width. (1-12)
make-grid-ready($gap, $gap);Creates and specify a basic declaration for grid wrap element.
make-grid-main();Creates and specify a basic declaration for main element.
make-grid-aside($gap, $gap);Creates and specify a basic declaration for aside element.
make-grid-header();Creates and specify a basic declaration for header element.
make-grid-footer();Creates and specify a basic declaration for footer element.
images @mixin
make-img-fluid();Creates and specify a basic declaration for an auto-width image element.
make-img-thumbnail();Creates and specify a basic declaration for a thumbnail element.
make-figure();Creates and specify a basic declaration for a figure element.
buttons @mixin
make-btn-ready();Creates and specify a basic declaration for button element.
make-btn($radius, $bg-btn, $color, $padding, $width);Creates and specify an advanced declaration for button element.
colors @mixin
make-color-scheme($name);Creates and specify a declaration for color scheme.
** We will develop more.

The library will take care of the rest.

Good luck in your work.

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7-alpha1

3 years ago

0.0.6-alpha1

3 years ago

0.0.5-alpha1

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago