Keep your projects lean, responsive, and maintainable so you can deliver the best experience and focus on more important jobs.
Lean Sass imports
When using Sass in your asset pipeline, make sure you optimize Boosted by only
@importing the components you need. Your largest optimizations will likely come from the
Layout & Components section of our
// Configuration @import "functions"; @import "variables"; @import "maps"; @import "mixins"; @import "utilities"; // Layout & components @import "root"; @import "reboot"; @import "type"; @import "images"; @import "containers"; @import "grid"; @import "tables"; @import "forms"; @import "buttons"; @import "transitions"; @import "dropdown"; @import "button-group"; @import "nav"; @import "navbar"; @import "card"; @import "accordion"; @import "breadcrumb"; @import "pagination"; @import "badge"; @import "tags"; @import "alert"; @import "progress"; @import "list-group"; @import "close"; @import "toasts"; @import "modal"; @import "tooltip"; @import "popover"; @import "carousel"; @import "spinners"; @import "offcanvas"; @import "placeholders"; // Boosted @import "back-to-top"; @import "footer"; @import "orange-navbar"; @import "stepped-process"; @import "sticker"; @import "title-bars"; // Helpers @import "helpers"; // Utilities @import "utilities/api";
If you’re not using a component, comment it out or delete it entirely. For example, if you’re not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.
boosted.min.js), and even our primary dependency (Popper) with our bundle files (
// Import just what we need // import 'boosted/js/dist/alert'; // import 'boosted/js/dist/button'; // import 'boosted/js/dist/carousel'; // import 'boosted/js/dist/collapse'; // import 'boosted/js/dist/dropdown'; import 'boosted/js/dist/modal'; // import 'boosted/js/dist/offcanvas'; // import 'boosted/js/dist/popover'; // import 'boosted/js/dist/scrollspy'; // import 'boosted/js/dist/tab'; // import 'boosted/js/dist/toast'; // import 'boosted/js/dist/tooltip';
boosted/js/dist use the default export, so if you want to use one of them you have to do the following:
import Modal from 'boosted/js/dist/modal' const modal = new Modal(document.getElementById('myModal'))
Boosted depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our
.browserslistrc file, found in the root of the Boosted repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.
Help wanted with this section, please consider opening a PR. Thanks!
While we don’t have a prebuilt example for using PurgeCSS with Boosted, there are some helpful articles and walkthroughs that the community has written. Here are some options:
Lastly, this CSS Tricks article on unused CSS shows how to use PurgeCSS and other similar tools.
Minify and gzip
Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Boosted dist files, try to stick to the minified versions (indicated by the
.min.js extensions). If you’re building Boosted from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.
While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.
This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.
If you want to learn more about this, there are already a lot of great articles about it:
Always use HTTPS
Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.
Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.