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)

JS-only components:(These components rely on 4kb of shared Bootstrap-JS)

CSS and JS components: (These components rely on 127kb of shared Bootstrap-CSS and 4kb of Bootstrap-JS)

Machine name

bootstrap

Perks

Using Sass
Responsive
Accessible

Drawbacks

Uses jQuery
No Drupal behaviours

Building blocks

CSS
Javascript

Stats

Public component
1 download
3 commits
No open issue

Contributors