Bootstrap As A Service
Welcome to Bootstrap As A Service! 👋
This tool allows you to dynamically compile Bootstrap SCSS on-the-fly, with the ability to override Bootstrap variables using simple URL query parameters. It's perfect for developers who want to customize Bootstrap without setting up a full build pipeline.
How It Works
You can request a custom-compiled Bootstrap CSS file by passing valid Bootstrap SCSS variables as query parameters in the URL.
/[email protected]/dist/css/bootstrap.min.css?primary=%23ff6347&secondary=%2300ff00
In the above example, the $primary
and $secondary
Bootstrap variables are overridden
with
new values.
Valid Bootstrap Variables
Only the variables defined in Bootstrap's _variables.scss
file can be overridden. Invalid variables
will result in an error. Here are some commonly used variables you can override:
- primary: The primary color used across the Bootstrap theme.
- secondary: The secondary color used across the Bootstrap theme.
- font-family: Set a custom font family for Bootstrap typography.
- body-bg: Set the background color for the body.
- And many more from the
_variables.scss
file...
Error Handling
If you pass an invalid variable, the API will return a 400 Bad Request error along with a message indicating which variables were invalid. For example:
Invalid Bootstrap variable(s): wrong_var
Example URLs
Non-minified Version
If you want to get the non-minified version of the CSS file, you can simply remove the .min
part from
the URL.
Custom Bootstrap with Red Primary and Green Secondary (Non-minified)
JavaScript
You can also use the API to fetch the JavaScript file. Just replace the .css
part with
.js
in the URL.
FAQ
But why?
I don't know. I was bored and I thought it would be fun to build this. In all seriousness: I am a big fan of Rails and Bootstrap, and since Rails is moving towards a no-build approach, I thought this might be useful at some point. I image the story like this:
- You want to use Bootstrap, because why not?
- You just link to Bootstrap CDN because you have a no-build pipeline and you can customize enough via CSS variables
- At some point you realize that there's that single customization that you'd like and is not yet available via CSS variables. You also don't want to setup an entire build pipeline, just because of one variable. This is exactly when you start using Bootstrap Aa a Service!
- You soon realize that you want to customize more and Bootstrap as a Service is not enough. You drop it and build from Sass again.
Can I use this in production?
Do whatever you want. There's Cloudflare in front of it so maybe the performance is not too bad. Also, your browser caches the CSS file, so why not?
Can I contribute?
Sure! Just open a PR on GitHub or make a donation.