Custom Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Installation

1. install cssmolecule

npm install cssmolecule

2. install custom-bootstrap

npm install custom-bs

Usage

• in your main.jsx or main.tsx or main.js file import the following:

import "cssmolecule";
import "custom-bs";
// your sass entry point
import "./scss/main.scss";

Alternatively you can also import the files in your sass.

@import "cssmolecule/main.scss";
@import "custom-bs/scss/bootstrap.scss";

• use it like this

// include what you want you want from the framework
// reboot/normalize
@include reboot;
// utilities
@include api;
// forms
@include forms;
// buttons
@include buttons;
.form {
  // you can use extend, apply or class
  @include extend("form-inline py-3");
  // your custom styles

  input,
  textarea {
    @include extend("form-control my-2 px-4");
  }
  button {
    @include extend("btn btn-primary w-100");
    // customize without using !important
    background-color: red;
  }
}
// to extend a class

.form-2 {
  @include extend("form", ".");
}

Youtube Video

A youtube video explaining how to use it