I made this tool because customizing Bootstrap should be simple, and I'm slightly addicted to building Bootstrap themes.
There isn't another Bootstrap SASS to CSS customization tool that makes it easier to visualize
custom colors, fonts, icons, and variables. You can choose a starter theme, or build your own.
Once we verify your Tweet from , we'll DM you the theme link.
Theme Builder Help
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.
Advanced users can delve into the SASS as desired. It's a 4-step process...
① Pick the Colors
Change Bootstrap's -primary, -secondary, -success, -danger, -info,
-warning, -light and -dark colors. Click on the checkbox or the name of a theme to select it. Once it's active
you can then customize the colors.
② Pick the Fonts
Override the default "Roboto" font-family. Choose from "Headings" to override only the headings (recommended), or "Base" to override all fonts.
③ 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 `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 need to
reference the Bootstrap CSS as usual,
and then reference the generated custom `theme.css` after the `bootstrap.css` in the HTML. This allows the `theme.css` to override the `bootstrap.css` with the
appropriate classes as defined in the custom theme.
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.