JBStrap themes
JBStrap offers a variety of predefined themes, making page customization easier than ever. To give you an overview of what themes are and how you can use them, let's start by saying a few words about Bootstrap.
Bootstrap
Bootstrap is a widely used open-source toolkit for web development. It contains HTML, CSS and JavaScript elements to help you easily create eye-catching and fully responsive websites. Bootstrap is easy to use and learn, thanks to its compatibility with all major web browsers and reusable components. It has a consistently designed system of variables and comes with support for JavaScript. As Bootstrap is one of the most popular web development aids, there are plenty of resources out there. If you are interested in the details, you might want to try this quick, hands-on guide or Bootstrap's documentation hub .
Bootstrap comes with many prepackaged themes. A theme is a collection of customization variables and other bits of code that lend your website a uniform appearance and determine your website's layout, behavior and color settings, in other words, the look and feel of your entire website.
JBStrap themes
Now that you have an understanding of Bootstrap themes, let's talk about JBStrap themes. JBStrap itself is partly built on Bootstrap and inherits its layout system and many of its customization options from there. You can use all Bootstrap themes in JBStrap. If you are already experienced in Bootstrap, you will find this a tremendous advantage. Furthermore, we give you a number of predefined themes. Currently, we can offer you the following 6 themes. See the Demo application to see a live example.
How to customize JBStrap themes
JBStrap themes use Bootstrap's variables and give them custom values, thereby making it very easy to tailor them to your needs. You can modify any JBStrap theme SCSS. To customize the appearance of your website, c hange variable values that are responsible for the look of certain website parts. Also, you can extend the current theme by giving new "default" values to Bootstrap and JBStrap variables not found in the current theme. Note: JBStrap currently uses Bootstrap version 4.6 .
How to create JBStrap themes
A JBStrap themes consist of SCSS files. In these files, you can find all the variables needed to modify the look and feel of the website. You can change them by replacing their default values with a custom value. JBStrap themes, apart from general Bootstrap variables, also contain JBStrap component variables. Bootstrap variables and JBStrap component variables determine together what the website looks like.
To customize the general variables and the Bootstrap component variables, you have to give SCSS variables new values. Bootstrap's guide helps you with the process.
To customize JBStrap components, you have to give new values to variables in the following two files: _comp-variables.scss and _comp-variables-group.scss. You can find more information on this in JBStrap's documentation.