A Custom Bootstrap Theme Builder
Introducing Themestr.app
As a developer of custom Bootstrap themes, I’ve been long in search of a SASS-to-CSS customization tool that would allow me to easily visualize different color schemes, fonts and styles to prototype my theme ideas. Themestr.app was born out of this need.
What’s in a custom Bootstrap theme?
Color
When it comes to customizing the default Bootstrap look, changing the color palette is the first thing that comes to mind. The standard color palette hasn’t changed much in 3 iterations of Bootstrap, and the latest Bootstrap 4 is no different.
Bootstrap’s color scheme is accessed using contextual CSS classes that are designed to broadly “convey meaning” and therefore are named according to purpose. To utilize these colors, we simply use the appropriate class such as text-danger, bg-success, alert-info andbtn-primary in our HTML markup.
In Themestr.app, you simply pick a new color scheme, and those boring Bootstrap colors are changed…
Remember that the Bootstrap contextual classes are used to “convey meaning” and provide feedback to the user. Therefore, if you want a red-ish color to mean “danger”, and a yellow-ish to mean “warning”, keep this in mind when customizing the Bootstrap colors.
Color Contrast
For Bootstrap theming, dealing with “Light” and “Dark” colors can be tricky because color contrast needs to be considered. Light and dark contrast well with each other and make text easier to read.
To state the obvious, we can’t see dark text on dark backgrounds, and light text on light backgrounds.
To clarify this from a Bootstrap perspective, let’s roughly classify the colors of the standard Bootstrap palette:
Dark: Most of the colors are darker, so Light text is preferred for these…
Light: However, the -light & -warning classes need Dark colored text…
Therefore, color contrast is a very important consideration for custom themes. Even when creating a dark colored theme, “Light” should be the lightest of the color palette, and “Dark” should be the darkest.
Fonts
Fonts are obviously another huge factor in making all Bootstrap sites look the same. Bootstrap 4’s native font stack is as follows:
// Safari for OS X and iOS (San Francisco)
-apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans-serif,In Themestr.app, you can choose from various Google Fonts to use in your theme. The custom font can be set as the “base” font family ($font-family-base) for the entire theme. But, in most cases you’ll only want the custom font applied to headings ($headings-font-family), and keep the very readable default fonts for smaller text.
And with a few clicks, the look is no longer recognizably Bootstrap…
SASS Variables
To know Bootstrap, is to know that there are a ton of SASS variables. Changing these variables is the very core of Bootstrap customization. Even if you don’t have any experience with SASS, you can use Themestr.app to easily generate the CSS for your custom theme.
To customize Bootstrap using only CSS, then generally accepted method to put the custom CSS styles after the Bootstrap CSS, like…
<link href="/path/to/bootstrap.min.css">
<link href="/path/to/custom.css">But, with SASS it’s different, because SASS is pre-processed into “compiled” CSS. SASS customization works by overriding defaults values. When customizing with SASS, the custom styles are defined before the Bootstrap SCSS files are imported. So with SASS, the order looks like…
// _custom.scss// load these first because our custom style need to reference them
@import "bootstrap/functions"
@import "bootstrap/variables"// define some custom styles
$primary: #ccff00;
$font-family-base: 'Verdanda';// import Bootstrap
@import "bootstrap"
1_ When this _custom.scss file is processed using SASS, the default values defined in the bootstrap/variables.scss are defined first.
2_ Next, the custom values are set, which will override any of the variables that had default values set in bootstrap/variables.scss.
3_ Finally, Bootstrap is imported (@import “bootstrap”) which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS with both the Bootstrap defaults and the custom overrides.
Themestr.app allows you to change most of the default Bootstrap SASS values, and in most cases you won’t need to be concerned with them at all.
Want to learn more about SASS? I recommend this SASS starter article from Mirjam Bäuerlein.
Template vs. Theme?
The term “Theme” is overused, and often a misnomer for “Template”. There are various “Theme” sites that in fact market Website templates, and not just themes.
In context of Themestr.app, “Theme” refers to the style layer or “skin”. The “Theme” encompasses colors, fonts and style. A “Template” refers to a page layout and its’ HTML structure. I think of Theme vs. Template as…
A Template utilizes a Theme. A Theme defines color scheme, fonts and styles. For example, if you want to change the text color or font-family, it’s the “Theme”. If you want to align the links in the Navbar to the right, it’s the “Template”.
Themestr.app
The whole idea of Themestr.app is to make the Bootstrap customization process easier, and allow you to visualize changes along the way. For most users it’s designed to be point-and-click, and advanced users can delve into the SASS as desired.
It’s a 4-step process. Repeat as desired…
① Pick the Colors
Change Bootstrap’s -primary, -secondary, -success, -danger, -info,
-warning, -light and -dark colors.
② Pick the Fonts
Override the default “Roboto” font-family.
③ Change any Bootstrap Variables
There are many, many variables. The variable names are self-explanatory, and the more relevant ones are displayed first.
④ Generate the Theme!
The SASS is automatically generated by Themestr.app. The SASS input is sent to a server-side SASS processor, which outputs the custom CSS theme.
How to Use the Custom Theme
Save the CSS output as a .css file such as custom-theme.css. To keep the theme file separate and smaller in size, the Bootstrap grid classes are not included in the CSS output. This means you’ll still need to reference the Bootstrap CSS, and override it with generated Theme CSS in your HTML.
<link href="/path/to/bootstrap.min.css">
<link href="/path/to/custom-theme.css">Note: At the time of this writing, the generated Theme file is intended to be separate from the bootstrap.css, but that may be optional in the future if enough Themestr.app users prefer to make the entire core Bootstrap and theme compiled into a single file. Stay tuned…
If you’re familiar with SASS, you can simply use the generated SASS, and send it through a SASS processor as desired to generate the CSS.
Thank you for taking the time to learn about Bootstrap customization with Themestr.app. I hope you’ll try it out, or watch the video on how it works.
If you want to keep learning more about Bootstrap 4, check out the complete “How to… Bootstrap” guide: http://bootstrap.themes.guide
