Skip to content

docs: update stories featuring bootstrap #10122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs: update stories featuring bootstrap #10122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions docs/documentation/stories/global-lib.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,14 @@ Some javascript libraries need to be added to the global scope, and loaded as if
they were in a script tag. We can do this using the `apps[0].scripts` and
`apps[0].styles` properties of `.angular-cli.json`.

As an example, to use [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) this is
what you need to do:
As an example, many [Bootstrap 4](https://getbootstrap.com/docs/4.0/getting-started/introduction/) components require [JQuery](https://jquery.com/), [Popper.js](https://popper.js.org/), and Bootstrap's JavaScript plugings to function.
If we want to use those components, we will need to install JQuery and Popper.js in addition to Bootstrap:

First install Bootstrap from `npm`:

```bash
npm install jquery --save
npm install popper.js --save
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not something you added, but can we add that neither jquery nor popper.js are needed if you pretend to use only CSS? With the current docs people tend to feel that they have to install them obligatory.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I totally agree with you. I will update my PR accordingly.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated the PR. Tell me what you think about the changes.

npm install bootstrap@next --save
npm install bootstrap --save
```

Then add the needed script files to `apps[0].scripts`:
Expand Down
30 changes: 4 additions & 26 deletions docs/documentation/stories/include-bootstrap.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,7 @@ With the new project created and ready you will next need to install bootstrap t
Using the `--save` option the dependency will be saved in package.json

```sh
# version 3.x
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we typically add instructions for adding old packages to projects? I'd suggest we remove the v.3 installation notes altogether.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. You are right. I updated the PR.

npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save
```

### Configuring Project
Expand Down Expand Up @@ -74,33 +70,19 @@ cd my-app
### Installing Bootstrap

```sh
# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save
npm install bootstrap --save
```

### Configuring Project

Create an empty file `_variables.scss` in `src/`.

If you are using `bootstrap-sass`, add the following to `_variables.scss`:

```sass
$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
```
Create an empty file `_variables.scss` in `src/`. The `_variables.scss` file allows us to customize Bootstrap by overriding Sass variables
used by Boostrap. For instance, you can add `$primary: red;` to use red as primary color.

In `styles.scss` add the following:

```sass
// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
@import '~bootstrap/scss/bootstrap';
```

### Testing Project
Expand All @@ -117,10 +99,6 @@ Verify the bootstrap styled button appears.
To ensure your variables are used open `_variables.scss` and add the following:

```sass
// version 3
$brand-primary: red;

// version 4
$primary: red;
```

Expand Down