This.. is... Bōōtstrāp!
Now simple and elegant
Customize Bootstrap
with a modern approach.
Generate your custom CSS file.
CSS Variables No Compile Bootstrap Classes
« My name is Marco, and I also use Bootstrap... »
I'm passionate about front-end, and I've been using Bootstrap for many years.
...but something was missing, so I added my own approach.
☝️ Why another fork of Bootstrap??
I believe that Bootstrap is a comprehensive CSS framework, ready to use out of the box. It's used in various ways, sometimes compiled and often through a CDN. Basic CSS rules (like fonts and colors) are sometimes overwritten via a new CSS file
According to recent developments in CSS compatibility, it's possible to use Bootstrap without having to compile the code, while still retaining the ability to easily customize certain parameters.
The native CSS variables have also revolutionized my approach.
👌 Simplify and customize
The code used for this project is taken from Bootstrap, version v. 5.3, with the addition of a modern approach
So, all the classes of the framework can be used; for all information regarding the usage of the components, refer to the Bootstrap website.
🤍 This site is built using only Bootstrap classes.
For any feedback, open an issue on Github. To suggest new ideas, use the label POP
Collaborator
Stefano Valente
Link
Github repository Support dev🖖 My approach!
Using some simple native CSS variables, it's possible to quickly customize Bootstrap.
- No compile required
- Native CSS variables
- BS convention
Simple and sustainable
Everything you need to set up for quick customization is readily available within the CSS file. Few and clear variables tailored for various uses. No need for compile and ready for preview.
Primary color Secondary color Font color Link color Font family Font size Border radius
@import url("font/font.css");
:root {
/* --- Set your font family --- */
--bs-font-sans-serif: "Georama", Arial, sans-serif;
--bs-body-font-size: 0.875rem;
--bs-body-color: #212529;
--bs-body-color-rgb: 33, 37, 41;
--bs-btn-color: var(--bs-white);
--bs-btn-color-rgb: var(--bs-white-rgb);
/* --- Set your primary and secondary color --- */
--bs-primary: #ff0095;
--bs-primary-rgb: 255, 0, 149;
--bs-secondary: #103875;
--bs-secondary-rgb: 16, 56, 117;
/* --- Set your border-radius --- */
--bs-border-radius: 0.25rem;
}Easy to maintain or modify later, simply by editing the native variables at the top of the CSS file.
How to use it
Download and insert the following CSS file into the head of your project.
Include the Bootstrap JS file for JavaScript functionalities (accordion, modal, etc.).