gensass v1.0.6
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 gensassIcons
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.