Scss Helpers Library

Scss Helpers Lbrary is a toolkit of mixins and classes designated to help you to style your SCSS.

Quick start guide

1. Add the library to your project

    $ npm install @luaguillande/scss_helpers

2. Import

2.1 Import as needed in app.scss

  @import '~@luaguillande/scss_helpers/_text';
  @import '~@luaguillande/scss_helpers/_colors';
  @import '~@luaguillande/scss_helpers/_display';
  @import '~@luaguillande/scss_helpers/_flexbox';
  @import '~@luaguillande/scss_helpers/_paddings';
  @import '~@luaguillande/scss_helpers/_margins';
  @import '~@luaguillande/scss_helpers/_helpers';
  @import '~@luaguillande/scss_helpers/normalize';

2.2 Or import all the files

    @import '~@luaguillande/scss_helpers/all';

3. Set your colors

Set the theme in a _color_set.scss then map the colors in the @include in the app.scss (or the file where your are importing the library). You also can create new class names by changing the variable name. Now you wil be able to use the variables in other scss files importing the _color_set file and also use like classes in your html.

  //_color_set.scss

  $primary:  #f9cd16;
  $secondary: #3C3C3B;
  $error: #ff5d48;
  // ...

  //app.scss
  
  @include colors(
      $primary:  $primary,
      $secondary: $secondary,
      $error: $error,
      // ...
  )

4. Use the classes in your html

  <div class="primary-text secondary pa-5 mx-10 my-3">My Div</div>

5. Classes List

Margins and Paddings

The Paddings and Margins are responsive and can be changed according the device

{property}{direction}-{device}-{size}

Property | Direction | Device | Sizes --- | --- | --- | --- p for paddings | pa, py, px, pl, pr, pt, pb | nothing, xs, sm, md, lg, xl | 1 to 24 m for paddings | ma, my, mx, ml, mr, mt, mb | nothing, xs, sm, md, lg, xl | 1 to 24

Property | Media Query --- | --- nothing | Aplies in all devices xs | max-width 420px sm | max-width 800px md | max-width 1025px lg | max-width 1601px xl | min-width 1601px

Paddings

Property | Direction --- | --- pa | padding py | padding-top and padding-bottom px | padding-left and padding-right pl | padding-left pr | padding-right pt | padding-top pb | padding-bottom

Margins

Property | Direction --- | --- ma | margin my | margin-top and margin-bottom mx | margin-left and margin-right ml | margin-left mr | margin-right mt | margin-top mb | margin-bottom

Example:

  <div class="pa-10 pa-xs-2 my-lg-10">My Div</div>

Colors

For backgrounds: {name} For text colors: {name}--text

Example:

  <div class="primary white--text">My Div</div>

You can also use 5 lighter and darker color variables automatically generated from your theme.

  <div class="primary-lighten-1--text secondary--darken-3">My Div</div>

In scss files:

@import '_color_set.scss

  .my-class{
    color: $primary,
    border 1px solid $secondary
    background-color: $error
  }

Align Text

Classes to help the text alignment

Class | Property --- | --- text-left | text-align: left text-right | text-align: right text-center | text-align: center

Example:

  <div class="text-left">My Div</div>

Text Transform

Classes to change the text case

Class | Property --- | --- text-uppercase | text-transform:: uppercase text-lowercase | text-transform:: lowercase text-capitalize | text-transform:: capitalize

Example:

  <div class="text-uppercase">My Div</div>

Font Weight

Classes to change the font-weight

Class | Property --- | --- font-100| font-weight: 100 font-200| font-weight: 200 font-300| font-weight: 300 font-400| font-weight: 400 font-500| font-weight: 500 font-600| font-weight: 600 font-700| font-weight: 700 font-800| font-weight: 800 font-900| font-weight: 900

Display by Device

Classes to change the display property. Use d-{device}-{value}

Class | Attribute | Device --- | --- | --- d-none | display: none | all devices d-block | display: block | all devices d-flex | display: flex | all devices d-grid | display: grid | all devices d-inline | display: inline | all devices d-inline-flex | display: inline-flex | all devices d-inline-block | display: inline-block | all devices d-{device}-none | display: none | apply media query d-{device}-block | display: block | apply media query d-{device}-flex | display: flex | apply media query d-{device}-grid | display: grid | all devices d-{device}-inline | display: inline | apply media query d-{device}-inline-flex | display: inline-flex | all devices d-{device}-inline-block | display: inline-block | all devices

Property | Media Query --- | --- xs | max-width 420px sm | min-width 421px md | min-width 800px lg | min-width 1025px xl | min-width 1601px

Example:

  <div class="d-xs-none d-sm-flex">My Div</div>

FlexBox

Classes to help the layout with display:flex

Use the class="d-flex" to apply the display:flex style.

Wrapping

Class | Property | Details --- | --- | --- flex-wrap | flex-wrap: wrap | breaks child elements into new lines when space runs out flex-no-wrap | flex-wrap: nowrap | keeps child elements on the same line, even if there is no space flex-{device}-wrap | display: flex | apply media query flex-{device}-no-wrap | display: inline | apply media query

Property | Media Query --- | --- xs | max-width 420px sm | min-width 421px md | min-width 800px lg | min-width 1025px xl | min-width 1601px

Vertical Align

Class | Property | Details --- | --- | --- align-center | align-items: center | vertically centers the child element align-flex-end | align-items: flex-end | aligns the child element at the end of the parent element align-stretch | align-items: stretch | vertically distribute the child elements align-baseline | align-items: baseline | align the child elements in baseline

Horizontal Align

Class | Property | Details --- | --- | --- justify-center | justify-items: center | horizontally centers the child element justify-flex-end | justify-items: flex-end | horizontally aligns the child element at the end of the parent element justify-space-between | justify-items: space-between | horizontally distribute the child elements justify-space-around | justify-items: space-around | horizontally distribute the child elements

Example:

  <div class="d-flex flex-wrap justify-space-around align-center">My Div</div>

Helpers

Ellipsis for text-overflow.

Class | Property | Details --- | --- | --- ellipsis | scss .ellipsis{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden } | Make truncate effect.

]

Example:

  <div class="ellipsis">My Div</div>

Smooth Scroll

The _helpers.scss file includes a smooth scroll set tho the scroll behavior.

Scroll

You can import the _scroll.scss in your app.sccs and set a color to make a beautiful scrollbar.

$scroll-color: $primary;

@import "node_modules/@luaguillande/scss_helpers/_scroll";

or

$scroll-color: '#333';

@import "node_modules/@luaguillande/scss_helpers/_scroll";

Normalize

This package includes the Normalize Library v8.0.1.

Enjoy!

@luaguillande - 31solutions.com