0.1.4 • Published 6 years ago
ember-bootstrap-slim v0.1.4
ember-bootstrap-slim
A tiny Ember addon to add Bootstrap to your Ember app. Nothing more, nothing less.
What you get:
- Bootstrap's minified css added to your app's vendor.css
Versions
- Bootstrap: 4.0.0
- Ember CLI: 3.0.1
Installation
ember install ember-bootstrap-slim
Usage
- Install via
ember install ember-bootstrap-slim
. - Add bootstrap classes to your html / hbs elements.
- Look at the pretty things.
How It Works
- Ember is still a bit in process of moving from bower to npm, and importing a file from a node module isn't yet quite as intuitive as it was to import from a bower component. Ember actually only recommends importing from bower_components or from vendor. So...the question is - how do we get the node module into the vendor folder easily?
- ember-bootstrap-slim creates a new Broccoli funnel to add the desired file(s) from the bootstrap node_module into the app's vendor tree. It is then accessible to be imported into the app
- In theory, any file from any node_module can be imported into an Ember app this way, provided the path and file name are correct
index.js
var Funnel = require('broccoli-funnel');
module.exports = {
name: 'ember-bootstrap-slim',
included(app, parentAddon) {
this._super.included.apply(this, arguments);
let target = (parentAddon || app);
target.import('vendor/bootstrap.min.css');
},
treeForVendor() {
return new Funnel(`${this.project.root}/node_modules/bootstrap/dist/css`, {
files: ['bootstrap.min.css']
});
}
};
Quick Example Walkthrough
- Install ember-cli
npm install -g ember-cli@latest
- Create a new ember app
ember new ember-example
- Install ember-bootstrap-slim
ember install ember-bootstrap-slim
- Create a new ember component
ember g component bootstrap-test
- In
app/templates/application.hbs
:<h2 id="title">Welcome to Ember</h2> {{bootstrap-test}}
- In
app/templates/components/bootstrap-test.hbs
:<button class="btn btn-success">Test Button</button>
- Start the server
ember s
- Visit http://localhost:4200 to see your bootstrap-styled app.
Contributing
Installation
git clone https://github.com/rdhelms/ember-bootstrap-slim.git
cd ember-bootstrap-slim
npm install
Running the linter
npm run lint:js
Running tests
npm test
Running the dummy application
ember serve
- Visit the dummy application at http://localhost:4200.
For more information on using ember-cli, visit https://ember-cli.com/.
License
This project is licensed under the MIT License.