Bootstrap: The Good Parts

Bootstrap--The-Good-Parts.md

Bootstrap is hard to customize and rather bulky; when you enclude the entire library on your page, rarely are you utilizing all of the parts. Luckily, with the help of StealJS, we can load just the needed parts within a DoneJS application ON DEMAND and NON-DESTRUCTIVELY. You know how difficult it can be if you've tried to accomplish this in the past with old versions of Bootstrap within a framework of your choice. Well, if you're willing to adopt DoneJS (or at least the module loader StealJS), you'll be off to the races with a lightweight app that loads just the bare minmium of needed CSS and JS.

This guide will be broken into parts:

• Installing DoneJS
• Generating a new DoneJS project
• Installing Boostrap v4
• Installing Tether
• Generating a new DoneJS component
• Editing the package.json
• Using node-sass to compile Bootstrap
• Including compiled Bootstrap parts into your DoneJS component
• See the fruits of your labor

Installing DoneJS

npm install -g donejs 

Generating a new DoneJS project

donejs add app my-app

Installing Boostrap v4

npm install bootstrap@4.0.0-alpha.2 --save

Installing Tether

Boostrap's tooltip and popover will depend tether.js.

npm install tether --save

Generating a new DoneJS component

donejs add component bootstrap/tooltip bootstrap-tooltip

Editing the package.json

  "system": {
    "meta": {
      "bootstrap/dist/js/umd/tooltip": {
        "deps": ["tether"]
      },
      "bootstrap/dist/js/umd/popover": {
        "deps": ["tether"]
      },
      "tether": {
        "format": "global"
      }
    }
  }

Using node-sass to compile Bootstrap

Download bs-scss from here like so:

svn export https://github.com/leoj3n/my-app.git/trunk/bs-scss

Then compile it:

npm install -g node-sass
node-sass --output-style compressed ./bs-scss --output ./src/bootstrap/css

To watch for changes, and automatically recompile, install concurrently:

npm install concurrently --save-dev

Add a bootstrap script to the scripts section of package.json:

  "scripts": {
    "bootstrap": "concurrently --kill-others 'npm run develop' 'node-sass --output-style compressed --watch ./bs-scss --output ./src/bootstrap/css'"
  }

Run the script on your command-line like:

donejs bootstrap

Edit bs-scss/_variables-mixins.scss to customize Bootstrap variables like $body-color and $grid-breakpoints.

Including compiled Bootstrap parts into your DoneJS component

Update bootstrap/tooltip/tooltip.js:

import Component from "can-component";
import DefineMap from "can-define/map/";
import template from './tooltip.stache';
import $ from 'jquery';
import 'bootstrap/dist/js/umd/tooltip';
import './../css/tooltip.css';
import './tooltip.less';

export const ViewModel = DefineMap.extend({
  message: {
    value: 'This is the bootstrap-tooltip component'
  }
});

export default Component.extend({
  tag: 'bootstrap-tooltip',
  events: {
    inserted: function() {
      $(this.element).find('[data-toggle="tooltip"]').tooltip();
    }
  },
  ViewModel: ViewModel,
  template
});

Update bootstrap/tooltip/tooltip.stache:

<button class="btn btn-secondary" type="button" data-toggle="tooltip" data-placement="right" title="{{message}}">
  <content></content>
</button>

Add to index.stache:

<can-import from="./bootstrap/css/normalize.css" />
<can-import from="./bootstrap/css/print.css" />
<can-import from="./bootstrap/css/reboot.css" />
<can-import from="./bootstrap/css/type.css" />
<can-import from="./bootstrap/css/images.css" />
<can-import from="./bootstrap/css/code.css" />
<can-import from="./bootstrap/css/grid.css" />
<can-import from="./bootstrap/css/tables.css" />
<can-import from="./bootstrap/css/forms.css" />
<can-import from="./bootstrap/css/buttons.css" />

<can-import from="./bootstrap/css/utilities.css" />
<can-import from="./bootstrap/css/utilities-background.css" />
<can-import from="./bootstrap/css/utilities-spacing.css" />
<can-import from="./bootstrap/css/utilities-responsive.css" />

<can-import from="./bootstrap/tooltip/tooltip" />

<bootstrap-tooltip>This is how you use a TOOLTIP!</bootstrap-tooltip>

See the fruits of your labor

donejs develop
# or `donejs bootstrap` if you will be changing the scss files

Hello @leoj3n good job, it is very useful.

Would you like to make an example with the library Gentelella for donejs?