README
Download Fang-UI-Library containing the customized Bootstrap
Install with npm i fang-ui-lib --save
How to use in another project:
After the download you will find the folder fang-ui-lib inside your projects node_modules To use the library all you have to do is import it inside the main style file @import 'node_modules/fng-ui/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 attribute "fang-ui" as a container for your component.
<div class=”container bg-dark”> … </div> <!-- runs from any Bootstrap available -->
<div fang-ui class=”container bg-dark”> … </div> <!--runs always from Fang-UI-Library -->
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"