xbrain-bootstrap-xxldeprecated

Bootstrap 4 flex grid system and layout utilities.

Usage no npm install needed!

<script type="module">
  import xbrainBootstrapXxl from 'https://cdn.skypack.dev/xbrain-bootstrap-xxl';
</script>

README

X-Brain Bootstrap 4

Build Status gzip size npm license

Bootstrap 4 flex grid system and layout utilities.

What's Included

Motivation

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.

Installation

Npm

npm install xbrain-bootstrap-xxl

Yarn

yarn add xbrain-bootstrap-xxl

How to Use

Sass and CSS files are ready to be used in your project.

CSS

Pretty straightforward. Just get css/xbrain-bootstrap-xxl.min.css or css/xbrain-bootstrap-xxl.css and add it to your project.

Sass

You will need to include the whole scss folder contents to your project. Then, just import xbrain-bootstrap-xxl.scss into your project's sass file.

Browser Support

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.

Grid Options

The grid options are located inside the scss/xbrain-bootstrap-xxl.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-xxl.scss file.

Customization

You can roll your own build and/or change browser support.

Requirements

Then install the dependencies:

With npm

npm install
gem install sass

With yarn

yarn install
gem install sass

Change Browser Support

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

Change Grid Options

Open scss/xbrain-bootstrap-xxl.scss and change the default options. Then, run:

grunt

We changed the grid gutter width value to 16px because we are using material-ui.