@luaguillande/scss_helpers v1.5.6

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}

Paddings

Margins

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

Example:

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

Text Transform

Classes to change the text case

Example:

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

Font Weight

Classes to change the font-weight

Display by Device

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

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

Vertical Align

Horizontal Align

Example:

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

Helpers

Ellipsis for text-overflow.

]

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