Install with npm i fang-ui-lib --save

Usage no npm install needed!

<script type="module">
  import fangUiLib from '';


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"