├── .bowerrc ├── .gitignore ├── README.md ├── blueprints └── ember-cli-bootstrap │ └── index.js ├── index.js ├── package.json └── vendor └── ember-cli-bootstrap └── shim.js /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "vendor" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | npm-debug.log 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ember-cli-bootstrap 2 | =================== 3 | 4 | ###This project is depricated because the [bootstrap_for_ember](https://github.com/ember-addons/bootstrap-for-ember) project is no longer being supported. 5 | 6 | ###ember-cli-bootstrap requires ember-cli version '0.0.41' or later 7 | 8 | This is an ember-cli addon that includes styles from [Twitter Bootstrap](http://getbootstrap.com/) into your ember-cli project. 9 | 10 | This addon utilizes the [bootstrap_for_ember](https://github.com/ember-addons/bootstrap-for-ember) library, which provides a collection of Ember components based on Twitter Bootstrap V3. 11 | You can find documentation for usage [here](https://github.com/ember-addons/bootstrap-for-ember). 12 | 13 | #Usage 14 | 15 | In the root of your ember-cli project directory, run: 16 | ```bash 17 | npm install --save-dev ember-cli-bootstrap 18 | ``` 19 | 20 | Then, from the root of you ember-cli project, run: 21 | ```bash 22 | ember generate ember-cli-bootstrap 23 | ``` 24 | 25 | To prevent JSHint errors, you can import `Bootstrap` as a module with: 26 | ```javascript 27 | import Bootstrap from 'bootstrap'; 28 | ``` 29 | 30 | You should now have access to bootstrap styles and the components 31 | provided by [bootstrap_for_ember](https://github.com/ember-addons/bootstrap-for-ember). Enjoy! 32 | 33 | ##Importing specific bootstrap_for_ember components 34 | By default, all of the bootstrap_for_ember components will be imported 35 | into the project. You can optionally specify exactly which components 36 | should be imported into the project via the `component` option, which 37 | accepts an array of component names: 38 | 39 | 40 | ```javascript 41 | //your-bootstrap-app/Brocfile.js 42 | 43 | /* global require, module */ 44 | 45 | var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 46 | 47 | var app = new EmberApp({ 48 | 'ember-cli-bootstrap': { 49 | 'components': ['bs-alert', 'bs-notifications', 'bs-nav'] 50 | } 51 | }); 52 | 53 | module.exports = app.toTree(); 54 | ``` 55 | 56 | 57 | ## Importing javascript from Twitter Bootstrap 58 | The goal of this addon is to utilize the bootstrap_for_ember library to 59 | be able to implement Twitter Bootstrap's styles and components in a more 60 | 'Embery' way. As such, the addon *does not* include the javascript from 61 | Twitter Bootstrap by default. 62 | 63 | In situations where you need functionality that is not provided by 64 | bootstrap_for_ember, you can optionally import the Twitter Bootstrap 65 | javascript into your ember-cli project by setting the 66 | `importBootstrapJS` option to true in your `Brocfile.js`: 67 | 68 | ```javascript 69 | //your-bootstrap-app/Brocfile.js 70 | 71 | /* global require, module */ 72 | 73 | var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 74 | 75 | var app = new EmberApp({ 76 | 'ember-cli-bootstrap': { 77 | 'importBootstrapJS': true 78 | } 79 | }); 80 | 81 | module.exports = app.toTree(); 82 | ``` 83 | 84 | ## Importing Twitter Bootstrap Theme 85 | Bootstrap comes with an optional theme CSS with various visual enhancements. To include this file you can import it by setting `importBootstrapTheme` to true in your `Brocfile.js`: 86 | 87 | ```javascript 88 | //your-bootstrap-app/Brocfile.js 89 | 90 | /* global require, module */ 91 | 92 | var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 93 | 94 | var app = new EmberApp({ 95 | 'ember-cli-bootstrap': { 96 | 'importBootstrapTheme': true 97 | } 98 | }); 99 | 100 | module.exports = app.toTree(); 101 | ``` 102 | 103 | ## Opting out of Bootstrap CSS 104 | In situations where you prefer to use another strategy for importing Bootstrap CSS, 105 | you can opt out of CSS import by setting the `importBootstrapCSS` option to false in your `Brocfile.js`: 106 | 107 | ```javascript 108 | //your-bootstrap-app/Brocfile.js 109 | 110 | /* global require, module */ 111 | 112 | var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 113 | 114 | var app = new EmberApp({ 115 | 'ember-cli-bootstrap': { 116 | 'importBootstrapCSS': false 117 | } 118 | }); 119 | 120 | module.exports = app.toTree(); 121 | ``` 122 | 123 | ## Opting out of Bootstrap Font 124 | In situations where you prefer to use another strategy for importing the Bootstrap font, 125 | you can opt out of the font import by setting the `importBootstrapFont` option to false in your `Brocfile.js`: 126 | 127 | ```javascript 128 | //your-bootstrap-app/Brocfile.js 129 | 130 | /* global require, module */ 131 | 132 | var EmberApp = require('ember-cli/lib/broccoli/ember-app'); 133 | 134 | var app = new EmberApp({ 135 | 'ember-cli-bootstrap': { 136 | 'importBootstrapFont': false 137 | } 138 | }); 139 | 140 | module.exports = app.toTree(); 141 | ``` 142 | -------------------------------------------------------------------------------- /blueprints/ember-cli-bootstrap/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | normalizeEntityName: function() { 3 | // allows us to run ember -g ember-cli-bootstrap and not blow up 4 | // because ember cli normally expects the format 5 | // ember generate 6 | }, 7 | 8 | afterInstall: function() { 9 | var addonContext = this; 10 | 11 | return this.addBowerPackageToProject('bootstrap', '~3.3') 12 | .then(function() { 13 | return addonContext.addBowerPackageToProject('ember-addons.bs_for_ember', '~0.7.0'); 14 | }); 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | var path = require('path'); 3 | 4 | module.exports = { 5 | name: 'ember-cli-bootstrap', 6 | included: function included(app) { 7 | this._super.included(app); 8 | 9 | var emberCLIVersion = app.project.emberCLIVersion(); 10 | if (emberCLIVersion < '0.0.41') { 11 | throw new Error('ember-cli-bootstrap requires ember-cli version 0.0.41 or greater.\n'); 12 | } 13 | 14 | var options = app.options['ember-cli-bootstrap'] || {}; 15 | var bootstrapPath = app.bowerDirectory + '/bootstrap/dist'; 16 | var emberBsPath = app.bowerDirectory + '/ember-addons.bs_for_ember/dist'; 17 | var javascriptsPath = path.join(emberBsPath, 'js/'); 18 | var jsFiles = options.components ? options.components : fs.readdirSync(path.join(javascriptsPath)); 19 | 20 | // remove underscore from bs-popover component's template name 21 | if (jsFiles.indexOf('bs-popover') > -1 || jsFiles.indexOf('bs-popover.max.js') > -1 ) { 22 | var popoverPath = path.join(javascriptsPath, 'bs-popover.max.js'); 23 | var data = fs.readFileSync(popoverPath, { 'encoding': 'utf8' }); 24 | var modifiedFile = data.replace(/\/_partial-content-/g, '/partial-content-'); 25 | 26 | fs.writeFileSync(popoverPath, modifiedFile, { 'encoding': 'utf8' }); 27 | } 28 | 29 | // Import css from bootstrap 30 | if (options.importBootstrapTheme) { 31 | app.import(path.join(bootstrapPath, 'css/bootstrap-theme.css')); 32 | } 33 | 34 | if (options.importBootstrapCSS !== false) { 35 | app.import(path.join(bootstrapPath, 'css/bootstrap.css')); 36 | app.import(path.join(bootstrapPath, 'css/bootstrap.css.map'), { destDir: 'assets' }); 37 | app.import(path.join(emberBsPath, 'css/bs-growl-notifications.min.css')); 38 | } 39 | 40 | // Import javascript files 41 | app.import(path.join(javascriptsPath, 'bs-core.max.js')); // Import bs-core first 42 | 43 | jsFiles.forEach(function(file) { 44 | var fileName = file.split('.')[0]; 45 | app.import(path.join(javascriptsPath, fileName + '.max.js')); 46 | }); 47 | 48 | if (options.importBootstrapJS) { 49 | app.import(path.join(bootstrapPath, 'js/bootstrap.js')); 50 | } 51 | 52 | // Import glyphicons 53 | if (options.importBootstrapFont !== false) { 54 | app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.eot'), { destDir: '/fonts' }); 55 | app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.svg'), { destDir: '/fonts' }); 56 | app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.ttf'), { destDir: '/fonts' }); 57 | app.import(path.join(bootstrapPath, 'fonts/glyphicons-halflings-regular.woff'), { destDir: '/fonts' }); 58 | } 59 | 60 | // import bootstrap module 61 | app.import(path.join('vendor/ember-cli-bootstrap/shim.js'), { 62 | type: 'vendor', 63 | exports: { 'bootstrap': ['default'] } 64 | }); 65 | } 66 | }; 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-bootstrap", 3 | "description": "Include bootstrap into an ember-cli app", 4 | "version": "0.0.15", 5 | "author": "Lin Reid", 6 | "main": "index.js", 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [ 11 | "ember-addon", 12 | "bootstrap", 13 | "ember", 14 | "ember-cli" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "git://github.com/dockyard/ember-cli-bootstrap.git" 19 | }, 20 | "license": "MIT" 21 | } 22 | -------------------------------------------------------------------------------- /vendor/ember-cli-bootstrap/shim.js: -------------------------------------------------------------------------------- 1 | /* globals Bootstrap */ 2 | 3 | define('bootstrap', [], function() { 4 | "use strict"; 5 | 6 | return { 7 | 'default': Bootstrap 8 | }; 9 | }); 10 | --------------------------------------------------------------------------------