Bootstrap 4 flex grid system and layout utilities.
Here's what you get that Bootstrap 4 currently doesn't provide out of the box:
If you don't need any of the above, Bootstrap 4 already includes a grid only version with its Bootstrap CSS and JS bundle.
npm install xbrain-bootstrap
yarn add xbrain-bootstrap
Sass and CSS files are ready to be used in your project.
Pretty straightforward. Just get css/xbrain-bootstrap.min.css
or css/xbrain-bootstrap.css
and add it
to your project.
You will need to include the whole scss
folder contents to your project. Then,
just import xbrain-bootstrap.scss
into your project's sass file.
We use autoprefixer to add prefixes
to the css
files. By default, the last 2 versions for each major browser is
supported. To change this, follow the customization instructions bellow.
NOTE: Sass files do not include any browser specific prefixes. If you include them in your project, you will need to use your own post css tool to add prefixes for different browsers.
The grid options are located inside the scss/xbrain-bootstrap.scss
file. If you are going
to be using the sass files in your project, changing those will suffice. If you
are going to be using the CSS files, then you will need to change the options
and then compile. For more details, see the customization instructions bellow.
NOTE: If you are using the sass files and you want to avoid your options
getting overridden by an update, then copy and paste the options to your own
sass file and include them before the xbrain-bootstrap
file.
You can roll your own build and/or change browser support.
Then install the dependencies:
npm install
gem install sass
yarn install
gem install sass
To change the default browser support (last 2 versions currently), you will need
to first change the query in the browserlist
file, located at the root of this
project. Read more about the
supported queries.
Then, run:
grunt browser
Open scss/xbrain-bootstrap.scss
and change the
default options.
Then, run:
grunt
We changed the grid gutter width value to 16px because we are using material-ui.