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