Bootstrap 4 (beta)

Currently in beta, due to it not being heavily tested.
This is a component that splits up Bootstrap 4 CSS and JS in to 29 separate components that can all be loaded in individually, with their dependencies correctly in place.
This component is split up in to 18 CSS-only components, 3 JS-only components and 8 components that contain both CSS-and-JS.
Developers almost never use everything inside of Bootstrap, so loading in every part of it, bloats up the filesize of your project, quite a bit.
There are quite a bit of possibilities on how you could use Bootstrap functionality.
The essentials
Before you can use Bootstrap within Compony, you need to include Bootstrap variables from the _Sass-essentials.
So after you have put this component in your components folder
, you should open up _sass-essentials/sass-essentials.scss
and add the bootstrap-essentials:
// _sass-essentials.scss
@import '../components/bootstrap/bootstrap/_bootstrap-essentials/_bootstrap-essentials';
Optional: Feel free to move the bootstrap/bootstrap/_bootstrap-essentials folder
in to the _sass-essentials-folder
so you could instead write:
// _sass-essentials.scss
// Add this line on the bottom
@import '_bootstrap-essentials/_bootstrap-essentials';
You are encouraged to change the _bootstrap-essentials.scss file
!
Let's start with the very basics and work our way up to more complex examples.
Only use Bootstrap Reboot (5kb)
Bootstrap Reboot is Bootstrap's replacement of Normalise.css.
Note: This is a default of Bootstrap, so if you are using this, perhaps strip out Drupal's normalise.css?
Only use the grid of Bootstrap (47kb)
The grid of Bootstrap is now a separate component called bootstrap-grid
. This means you could load it in, without loading in everything else of the Bootstrap library.
You could include the bootstrap-grid library
as follows in your node--article.html.twig
:
{# node--article.html.twig #}
{% extends 'node.html.twig' %}
{% block before %}
{{ attach_library("compony/bootstrap-grid") }}
{% endblock %}
But chances are, you are going to want the grid to be available in every component. If that is the case, go ahead and add it to your global-library dependencies:
# compony.libraries.yml
global:
version: VERSION
css:
component:
components/_global/dist/style.css: {}
js:
components/_global/dist/script.js: {}
dependencies:
- core/drupal
- compony/bootstrap-grid # <========== HERE
Use the general CSS of Bootstrap. (121kb)
If you want to use the defaults of Bootstrap, The library to attach is: compony/bootstrap
.
This library includes Bootstrap Reboot, Bootstrap's grid and all utility-classes. But doesn't include any of the component-specific CSS or Javascript.
Actually, all JavaScript found within Bootstrap turns out to be component-specific, so the compony-bootstrap library
, doesn't have any JS.
Use only certain Bootstrap's components
If you pull Bootstrap apart, it turns out that it comes with 25 different components. Please note that all documentation for Bootstrap 4 still applies, this component, merely introduces an lean way of loading it in now.
To use Bootstrap's Card component
, you would need to attach the compony/bootstrap__card library
to a component. For example like this:
{# node--article.html.twig #}
{% extends 'node.html.twig' %}
{% block content %}
{{ attach_library("compony/bootstrap__card") }}
<div class="card">...</div>
{% endblock %}
The component-specific libraries have been defined that they will load in the right parts of Bootstrap automatically. For example the CSS-only component of card, will in the background also load in the compony/bootstrap library
.
Overview of abstracted components
CSS-only components: (These components rely on 127kb of shared Bootstrap-CSS)
- bootstrap__badge (+2kb)
- bootstrap__breadcrumb (+0.6kb)
- bootstrap__button-group (+3kb)
- bootstrap__card (+6kb)
- bootstrap__code (+0.5kb)
- bootstrap__forms (+9kb)
- bootstrap__images (+0.4kb)
- bootstrap__input-group (+5kb)
- bootstrap__jumbotron (+0.3kb)
- bootstrap__list-group (+4kb)
- bootstrap__navbar (+10kb)
- bootstrap__pagination (+2kb)
- bootstrap__progress (+2kb)
- bootstrap__tables (+5kb)
- bootstrap__typography (+1kb)
JS-only components:(These components rely on 4kb of shared Bootstrap-JS)
- bootstrap__collapse (+11kb)
- bootstrap__scrollspy (+9kb)
CSS and JS components: (These components rely on 127kb of shared Bootstrap-CSS and 4kb of Bootstrap-JS)
- bootstrap__alert (+6kb)
- bootstrap__buttons (+21kb)
- bootstrap__carousel (+20kb)
- bootstrap__dropdown (+39kb with popper.js being 20kb)
- bootstrap__modal (+40kb with popper.js being 20kb)
- bootstrap__nav (+9kb)
- bootstrap__popover (+10kb)
- bootstrap__tooltip (+41kb with popper.js being 20kb)