Bootstrap 4 (Beta)

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

@import '_colors.scss';
@import '_animations.scss';
@import '_box-shadows.scss';
@import '_mixins.scss';
@import '_typography.scss';
@import '_variables.scss';

// Add this line on the bottom
@import '_bootstrap-essentials/_bootstrap-essentials';

 

Let's start with the very basics and work our way up to more complex examples.

 

Only use the grid of Bootstrap 

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

 

Specifications

Machine name

bootstrap

Perks

Using Sass
Responsive
Accessible

Drawbacks

Uses jQuery
No Drupal behaviours

Building blocks

CSS
Javascript

Stats

Public component
0 downloads
commits
No open issue