Download the Aui library containing the customized Bootstrap

Install with npm i fng3-aui-blib --save Latest version 0.0.8

How to use in another project:

After the download you will find the folder fng3-aui-blib inside your projects node_modules To use the library all you have to do is import it inside the desired style file @import 'node_modules/fng3-aui-blib/scss/bootstrap.scss'; To increase priority, in case you are already using another version of bootstrap (Bootstrap-sass, Bootstrap 3 etc) create a div with id=”aui” as a container for your component.

<div class=”container bg-dark”> … </div> <!-- runs from any Bootstrap available -->
<div id=”aui” class=”container bg-dark”> … </div> <!--runs always from Aui Bootstrap  --> 

Keeping a common UI language

In order to create a reusable library any style decision while creating a component should follow these rules:

If I apply to many elements or components, i should be included in the library or edited if a similar class already exists. If I use variables (colors, dimensions etc), I should get them from the library or create them if they don’t exist. Try to use the least amount of classes possible. For a very specific component, the best way may be to create new classes in the library, instead of cramming up 7 or more premade classes. When creating a new class try to make the name as understandable as possible if you create a class that makes the element square call it square When creating a class also make sure it can be used in combination with others class square should only transform the element into a square If someone wants a rounded square, they can use class="square rounded"