Skip to content

Commit

Permalink
Merge pull request #1617 from kaliber5/bs5-docs
Browse files Browse the repository at this point in the history 
Add BS5 and remove remove BS3 instructions to docs app
  • Loading branch information
@simonihmig
simonihmig committed Sep 17, 2021
2 parents 05227ed + 9aa7382 commit b80076e
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 230 deletions.
18 changes: 10 additions & 8 deletions docs/app/controllers/getting-started/setup.js
View file
@@ -1,11 +1,13 @@
import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

export default Controller.extend({
blueprintDetailsCollapsed: true,
export default class SetupController extends Controller {
@tracked
blueprintDetailsCollapsed = true;

actions: {
toggleBlueprintDetails() {
this.toggleProperty('blueprintDetailsCollapsed');
},
},
});
@action
toggleBlueprintDetails() {
this.blueprintDetailsCollapsed = !this.blueprintDetailsCollapsed;
}
}
1 change: 0 additions & 1 deletion docs/app/router.js
View file
Expand Up @@ -29,7 +29,6 @@ Router.map(function () {
this.route('getting-started', function () {
this.route('setup');
this.route('assets');
this.route('bootstrap-4');
});
this.route('addons');
this.route('license');
Expand Down
101 changes: 15 additions & 86 deletions docs/app/templates/getting-started/assets.hbs
View file
Expand Up @@ -5,18 +5,18 @@
in <code>bootstrap.js</code>, such as toggle, navbar, modal, etc., with equivalent, CSS class-compatible
native Ember components.</p>

<p>If you are not using a preprocessor, ember-bootstrap will import the static CSS files. If you are using a preprocessor
like LESS or SASS, ember-bootstrap imports the preprocessor-ready versions of the styles.</p>
<p>If you are not using a preprocessor, ember-bootstrap will import the static CSS files. If you are using Sass as a preprocessor,
ember-bootstrap imports the preprocessor-ready versions of the styles.</p>

{{#bs-alert type="warning" dismissible=false}}
<BsAlert @type="warning" @dismissible={{false}}>
<h4>No bootstrap.js</h4>
ember-bootstrap deliberately excludes
<code>bootstrap.js</code> because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results. This is the main motivation behind ember-bootstrap.
It is possible to import
<code>bootstrap.js</code> from bower_components or the vendor folder. This is NOT recommended or
<code>bootstrap.js</code> from manually. However this is NOT recommended or
supported, and you will be on your own. You have been warned!
{{/bs-alert}}
</BsAlert>

<h1 id="addon-options">Importing assets</h1>

Expand Down Expand Up @@ -44,80 +44,31 @@ module.exports = function(defaults) {
</code></pre>
</div>

<p>
Bootstrap comes with an optional theme CSS with various visual enhancements. To include this file you can import it
by setting <code>importBootstrapTheme</code> to true in the 'ember-bootstrap' config of your
<code>ember-cli-build.js</code>.
</p>


<h2>Using CSS preprocessors</h2>
<h2>Using a CSS preprocessor</h2>

<p>
ember-bootstrap supports <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a> (with
<a href="https://github.com/gdub22/ember-cli-less" target="_blank" rel="noopener noreferrer">ember-cli-less</a>)
as well as <a href="http://sass-lang.com/" target="_blank" rel="noopener noreferrer">Sass</a> (with
<a href="https://github.com/aexmachina/ember-cli-sass" target="_blank" rel="noopener noreferrer">ember-cli-sass</a>)
as CSS preprocessors. When it detects one of these upon first installation of ember-bootstrap, it will install the
necessary packages ('bootstrap' itself or 'bootstrap-sass') and add an <code>@import</code> statement to your
<code>app.less</code> or <code>app.scss</code> file respectively:
ember-bootstrap supports <a href="http://sass-lang.com/" target="_blank" rel="noopener noreferrer">Sass</a> (with
<a href="https://github.com/adopted-ember-addons/ember-cli-sass" target="_blank" rel="noopener noreferrer">ember-cli-sass</a>)
as a CSS preprocessor. When it detects it upon first installation of ember-bootstrap, it will install the
necessary packages and add an <code>@import</code> statement to your <code>app.scss</code> file respectively:
</p>

<pre class="highlight"><code class="language-less">// app.less
@import "ember-bootstrap/bootstrap";
</code></pre>

<pre class="highlight"><code class="language-sass">// app.scss
@import "ember-bootstrap/bootstrap";
</code></pre>

<p>This will add the whole bootstrap stylesheets allowing you to customize them easily using the available variables.</p>

{{#bs-alert type="info" dismissible=false}}
<BsAlert @type="info" @dismissible={{false}}>
<strong>Important note:</strong> this only works when you have the CSS preprocessor addon installed before installing ember-bootstrap
itself. If that is not the case, make sure to run the default install blueprint after installing the preprocessor addon:
<code>ember generate ember-bootstrap</code>! This will execute the necessary setup steps as described above.
{{/bs-alert}}
itself. If that is not the case, then run the default install blueprint using the <code>preprocessor</code> option:
<code>ember generate ember-bootstrap --preprocessor=sass</code>! This will execute the necessary setup steps as described above.
</BsAlert>

<p>
It is possible to import only the assets your app needs but the definitions varies according to the chosen configuration.
</p>

<p><b>BS3 - Less</b></p>
<pre class="highlight"><code class="language-less">// app.less

// Required
@import "ember-bootstrap/variables";
@import "ember-bootstrap/mixins";

// Optional - Bootstrapping/Resetting
@import "ember-bootstrap/normalize";
@import "ember-bootstrap/print";

// Optional - Everything else
@import "ember-bootstrap/scaffolding";
@import "ember-bootstrap/type";
@import "ember-bootstrap/buttons";
</code></pre>

<p><b>BS3 - Sass</b></p>
<pre class="highlight"><code class="language-sass">// app.scss

// Required
@import "ember-bootstrap/bootstrap/variables";
@import "ember-bootstrap/bootstrap/mixins";

// Optional - Bootstrapping/Resetting
@import "ember-bootstrap/bootstrap/normalize";
@import "ember-bootstrap/bootstrap/print";

// Optional - Everything else
@import "ember-bootstrap/bootstrap/scaffolding";
@import "ember-bootstrap/bootstrap/type";
@import "ember-bootstrap/bootstrap/buttons";
</code></pre>

<p><b>BS4 - Sass only</b></p>
<pre class="highlight"><code class="language-sass">// app.scss

// Required
Expand All @@ -136,27 +87,5 @@ module.exports = function(defaults) {
</code></pre>

<p>
You can also checkout which files are avaliables for import in <code>node_modules/bootstrap/less</code> for BS3 Less,
<code>node_modules/bootstrap-sass/assets/stylesheets/bootstrap</code> for BS3 Sass or <code>node_modules/bootstrap/scss</code> for BS4.
You can also checkout which files are available for import in <code>node_modules/bootstrap/scss</code>.
</p>

<h2>Importing the Bootstrap Glyphicons font</h2>
<p>By default the icon font that comes with Bootstrap 3(!) is added to your app's assets folder.
When you do not want to use it (maybe because of replacing it for
<a href="https://github.com/martndemus/ember-font-awesome" target="_blank" rel="noopener noreferrer">Font Awesome</a>),
you can opt out of the font import by setting the <code>importBootstrapFont</code> option
to false in your <code>ember-cli-build.js</code>:</p>

<div><pre class="highlight"><code>//your-bootstrap-app/ember-cli-build.js

module.exports = function(defaults) {
var app = new EmberApp(defaults, {
'ember-bootstrap': {
'importBootstrapFont': false
}
});

return app.toTree();
};
</code></pre>
</div>
60 changes: 0 additions & 60 deletions docs/app/templates/getting-started/bootstrap-4.hbs
View file

This file was deleted.

13 changes: 0 additions & 13 deletions docs/app/templates/getting-started/index.hbs
View file
Expand Up @@ -35,17 +35,4 @@
{{#link-to "getting-started.assets" class="btn btn-primary"}}Tell me more{{/link-to}}
</div>
</div>

<div class="card">
<div class="card-body">
<h3 class="card-title">Bootstrap 4</h3>
<p class="card-text">
ember-bootstrap comes with support for Bootstrap 4. Learn how to switch your project to use
Bootstrap 4.
</p>
</div>
<div class="card-footer">
{{#link-to "getting-started.bootstrap-4" class="btn btn-primary"}}Tell me more{{/link-to}}
</div>
</div>
</div>
78 changes: 16 additions & 62 deletions docs/app/templates/getting-started/setup.hbs
View file
Expand Up @@ -6,22 +6,6 @@

<pre class="highlight">ember install ember-bootstrap</pre>

<BsAlert @type="warning" @dismissible={{false}}>
<h4 class="alert-heading">Additional dependencies</h4>
<ul>
<li>
If you need to support Internet Explorer 11, be sure to include the
<a href="https://github.com/babel/ember-cli-babel#polyfill" class="alert-link">Babel polyfill</a>!
</li>
<li>
The examples in these docs use angle bracket invocation. If you are still using an Ember version less than v3.4,
you will need to install
<a href="https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill" class="alert-link">ember-angle-bracket-invocation-polyfill</a>.
The older curly syntax still works without the polyfill.
</li>
</ul>
</BsAlert>

<h2>Configuration</h2>

<h3>Using the default blueprint</h3>
Expand All @@ -33,30 +17,26 @@

<h4>Use a CSS preprocessor</h4>

<p>To use a CSS preprocessor like Sass or Less instead of plain CSS (highly recommended!), you can use this command to install and set this up:</p>

<pre class="highlight">ember generate ember-bootstrap --preprocessor=sass // or --preprocessor=less</pre>

<p>See the {{#link-to "getting-started.assets"}}Assets guide{{/link-to}} for details.</p>
<p>To use a Sass as a CSS preprocessor instead of plain CSS (highly recommended!), you can use this command to install and set this up:</p>

<h4>Switch to Bootstrap 3</h4>
<pre class="highlight">ember generate ember-bootstrap --preprocessor=sass</pre>

<p>You can switch to Bootstrap 3 by running this command:</p>
<p>See the <LinkTo @route="getting-started.assets">Assets guide</LinkTo> for details.</p>

<pre class="highlight">ember generate ember-bootstrap --bootstrap-version=3</pre>
<h4>Switch to Bootstrap 5</h4>

<p>As Bootstrap 3 includes Less support, you can enable that as well in your Ember app:</p>
<p>You can switch to Bootstrap 5 by running this command:</p>

<pre class="highlight">ember generate ember-bootstrap --bootstrap-version=3 --preprocessor=less</pre>
<pre class="highlight">ember generate ember-bootstrap --bootstrap-version=5</pre>

{{#bs-button type="info" onClick=(action "toggleBlueprintDetails")}}
<BsButton @type="info" @onClick={{this.toggleBlueprintDetails}}>
About the default blueprint
{{/bs-button}}
</BsButton>


{{#bs-collapse collapsed=blueprintDetailsCollapsed}}
<BsCollapse @collapsed={{this.blueprintDetailsCollapsed}}>

{{#bs-alert class="mt-4" type="info" dismissible=false}}
<BsAlert class="mt-4" @type="info" @dismissible={{false}}>

<h4>About the default blueprint</h4>

Expand All @@ -74,22 +54,19 @@
Removes unneeded dependencies on ember-cli-less and ember-cli-sass
</li>
<li>
Installs ember-cli-less or ember-cli-sass if appropriate
</li>
<li>
Creates <code>app.less</code> or <code>app.scss</code> if appropriate and it doesn't exist
Installs <code>ember-cli-sass</code> and <code>app.scss</code> if appropriate
</li>
<li>
Adds the appropriate "@import" statement to your <code>app.less</code> or <code>app.scss</code> if it&apos;s
Adds the appropriate "@import" statement to your <code>app.scss</code> if it&apos;s
not there already
</li>
<li>
Safely edits your
<code>ember-cli-build.js</code> to ensure the proper ember-bootstrap settings for your configuration
</li>
</ul>
{{/bs-alert}}
{{/bs-collapse}}
</BsAlert>
</BsCollapse>

<hr>

Expand All @@ -112,27 +89,13 @@
<tbody>
<tr>
<td>bootstrapVersion</td>
<td>3 / 4</td>
<td>4 / 5</td>
<td>4</td>
<td>
<p>
Specify the Bootstrap version to use. To make sure you have the right dependencies installed, you should use the
default blueprint mentioned above to set this!
</p>
<p>See the {{#link-to "getting-started.bootstrap-4"}}Bootstrap 4 guide{{/link-to}} for more details.</p>
</td>
</tr>
<tr>
<td>importBootstrapTheme</td>
<td><code>true</code> / <code>false</code></td>
<td><code>false</code></td>
<td>
<p>
Include the optional <code>bootstrap-theme.css</code>. Only applicable for Bootstrap 3 and when not using a
preprocessor.
</p>

<p>See the {{#link-to "getting-started.assets"}}Assets guide{{/link-to}} for more details.</p>
</td>
</tr>
<tr>
Expand All @@ -141,16 +104,7 @@
<td><code>true</code> if no preprocessor</td>
<td>
<p>Include the default static <code>bootstrap.css</code>. Only applicable when not using a preprocessor.</p>
<p>See the {{#link-to "getting-started.assets"}}Assets guide{{/link-to}} for more details.</p>
</td>
</tr>
<tr>
<td>importBootstrapFont</td>
<td><code>true</code> / <code>false</code></td>
<td><code>true</code> if Bootstrap 3</td>
<td>
<p>Include the Glyphicons font. Only applicable for Bootstrap 3.</p>
<p>See the {{#link-to "getting-started.assets"}}Assets guide{{/link-to}} for more details.</p>
<p>See the <LinkTo @route="getting-started.assets">Assets guide</LinkTo> for more details.</p>
</td>
</tr>
<tr>
Expand Down

0 comments on commit b80076e

Please sign in to comment.