The standard 12-column grid provided by Bootstrap is alive & well and empowers us to easily create mobile-first layouts with sensible defaults across many different device-sizes. Please refer to the documentation for the finer points of manipulating columns and grid sizes.
Rather than use the clunky, non-semantic grid selectors like .col-xs-*
, etc. to manipulate your columns, it is preferable to encapsulate this logic in your scss files using the provided mixins.
DON’T do this…
Do this, instead…
@import 'crds-styles/assets/stylesheets/bootstrap';
section {
@include make-row;
}
article, aside {
@include make-md-column(6);
}
application.scss
The above, recommended approach decouples the presentational markup from the page structure, which allows for more flexibility across breakpoints and easier long-term maintenance. The entire list of grid-specific mixins provided by crds-styles
can be viewed on Github.