Gensass

Gensass is a .scss micro framework that was designed to be used in a Laravel project in order to complement Bootstrap. Since a lot of classes are generated, this package is made to be used with PurgeCss to get rid of unused style.

Gensass comes with a feature that allows you to use any svg as an icon (see Installation > Icons).

Table of content

• Installation
• Icons usage
• Classes usage
• Classes
• Authors

Installation

Package

Install package using npm

    npm install gensass

Icons

1. Add every svg you intent to use as an icon in folder /public/images/icons. The svg name must not contain any spaces.

2. In your package.json, add the following lines :

    "init-icons": "node node_modules/gensass/dist/js/icons.mjs",
    "build": "npm run init-icons && vite build",

Now, everytime your compiler runs it will generate a .scss file with all your icons ready to use.

3. In your app.scss file, you must load your icons. It should look like something like this :

    // Variables
    @import 'variables';

    // Bootstrap
    @import 'bootstrap/scss/bootstrap';

    // Gensass
    @import '/node_modules/gensass/dist/sass/gensass';

    // Project
    @import 'bases/icons';

    /*! purgecss start ignore */
    // Import your style
    // ...
    /*! purgecss end ignore */

Icons usage

Few sizes are predetermined but you can customize it freely using Gensass width and height classes.

| Nom | Width | Height | | :-------- | :------- | :-------------------------------- | | small | 24px | 24px | | medium | 48px | 48px | | large | 96px | 96px |

    <i class="icon icon-sunset icon-medium bg-is-c1"></i>

Classes usage

Many of the generated classes make profit of bootstrap breakpoints, which are the following :

    "xs", "sm", "md", "lg", "xl", "xxl"

Colors

Setup

Gensass uses a list of colors to generate useful classes. To make it work, your _variables.scss must respect a certain format.

To help you setting this up, you will find a _variables.example.scss file in our package.

Your _variables.scss should look like this :

    $colors-list : (
      #FFFFFF,  // 1
      #FFFFFF,  // 2
      #FFFFFF,  // 3
      #FFFFFF,  // 4
      #FFFFFF,  // 5
    );

Usage with scss

Using css variables :

  background-color: var(--c1);

Or with custom function :

  background-color: color(1);

Usage with generated classes

  <div class="is-c1 bg-c3"></div>

Classes

Hover

  <div class="hover-is-c3 hover-bg-c3"></div>

Borders

  <div class="border-w-10px is-border-c3 border-style-dotted"></div>

Offsets

Units : px, rem, %

| Offsets | Units | Classes | | :-------- | :------- | :-------------------------------- | | Top | px, rem, % | t-10px, t-n10, t-10, t-10pc, t-#mediaBreakpoint-10pc | | Right | px, rem, % | r-10px, r-n10, r-10, r-10pc, r-#mediaBreakpoint-10pc | | Bottom | px, rem, % | b-10px, b-n10, b-10, b-10pc, b-#mediaBreakpoint-10pc | | Left | px, rem, % | l-10px, l-n10, l-10, l-10pc, l-#mediaBreakpoint-10pc |

Position

Make usage of bootstrap breakpoints

  <div class="position-relative position-lg-absolute"></div>

Margins

Units : px, rem, %

| Margins | Units | Classes | | :-------- | :------- | :-------------------------------- | | Top | px, rem, % | mt-10px, mt-n10, mt-10, mt-10pc, mt-#mediaBreakpoint-10pc | | Right | px, rem, % | mr-10px, mr-n10, r-10, r-10pc, mr-#mediaBreakpoint-10pc | | Bottom | px, rem, % | mb-10px, mb-n10, mb-10, mb-10pc, mb-#mediaBreakpoint-10pc | | Left | px, rem, % | ml-10px, ml-n10, ml-10, ml-10pc, ml-#mediaBreakpoint-10pc | | MX | px, rem, % | mx-10px, mx-n10, mx-10, mx-10pc, mx-#mediaBreakpoint-10pc | | MY | px, rem, % | my-10px, my-n10, my-10, my-10pc, my-#mediaBreakpoint-10pc |

Opacity

  <div class="opacity-75 opacity-hover-50"></div>

Z-index

  <div class="z-index-50"></div>

Font-weight

Add "thin", "regular", "medium", "semi-bold", "heavy", "black" to Bootstrap classes.

  <div class="fw-thin"></div>

Font-size

Units : px, rem, %

| Margins | Units | Classes | | :-------- | :------- | :-------------------------------- | | Font-size | px, rem, % | font-size-10px, font-size-10, font-size-10pc, font-size-#mediaBreakpoint-10pc |

Width

Units : px, rem, %

| Margins | Units | Classes | | :-------- | :------- | :-------------------------------- | | Width | px, rem, % | w-10px, w-10, w-10pc, w-#mediaBreakpoint-10pc |

Height

Units : px, rem, %

| Margins | Units | Classes | | :-------- | :------- | :-------------------------------- | | Height | px, rem, % | h-10px, h-10, h-10pc, h-#mediaBreakpoint-10pc |

Loader

    <div class="loader">
        <div class="spinner"></div>
    </div>

Utilities

Some useful classes are available with Gensass, you can see the full list in gensass bases/utilities.scss file.

Authors

• @valentin.b1
• @FosseyD