I'm very surprised that there was no developer able to answer my question! Even on the github no one dared to think about it!
In fact, everything turned out to be very simple!
Yes, using the CDN we get the compiled css file. Styles in the bootstrap are written using sass. Moreover, the styles are written separation and modular. So it means that I do not need to load the entire bootstrap to my server. I want to deliver cached version of Bootstrap’s compiled CSS and I only need to add my breakpoints. Fortunately, there is a specific bootstrap file which is responsible for the Grid. It is bootstrap-grid.scss:
/*!
* Bootstrap Grid v4.0.0 (https://getbootstrap.com)
* Copyright 2011-2018 The Bootstrap Authors
* Copyright 2011-2018 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
@at-root {
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}
html {
box-sizing: border-box;
-ms-overflow-style: scrollbar;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
@import "functions";
@import "variables";
@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";
@import "grid";
@import "utilities/display";
@import "utilities/flex";
Now I just need to add sequentially the code from the files above adding my breakpoints. Add non-Grid code not necessary. For example, the code responsible for the color. Here is my mcve at codepen.
You did your research on this, although I thought your question meant literally from CDN, not using SASS. This is a solution using SASS (not entirely from CDN). It's not the correct way to customize Bootstrap since it's altering the default breakpoint values. The correct method is to @import bootstrap, and then override the variable/maps in your own custom.scss which is already explained in this answer
You'll find the smallest breakpoint isn't working, and none of the supporting grid utility classes (display, spacing, flexbox, etc...) will work when customizing this way.
@ZimSystem, At the very beginning of the article, I wrote that I use sass
@ZimSystem, You are right about the .xxxs class. Because in myxin, the smallest size removes the prefix. I fixed it, html instead of col-xxxs-1, I wrote col-1.