Skip to content

Commit

Permalink
Documentation update (#175)
Browse files Browse the repository at this point in the history
* Add Table of Contents
* Addressed Issue #172
  • Loading branch information
Judahmeek authored and justin808 committed Sep 24, 2016
1 parent f2e4e7a commit 57abdba
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 6 deletions.
63 changes: 57 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,30 @@ That being said, Bootstrap 4 probably works just fine! You must use `4.0.0-alpha
2016-08-01: Released 1.1.0. Supports custom bootstraprc location.
2016-02-28: Released 1.0.9. Updated to support Bootstrap 4, alpha 2!

## Table of Contents

+ [Installation](#installation)
+ [Usage](#usage)
- [Bootstrap 4 internal dependency solution](#bootstrap-4-internal-dependency-solution)
+ [Examples](#examples)
+ [Common configuration options](#common-configuration-options)
- [Bootstrap 3 & 4](#bootstrap-3-4)
- [Bootstrap 4 only](#bootstrap-4-only)
* [Tether](#tether)
* [PostCSS](#postcss)
* [Glyphicon alternatives](#glyphicon-alternatives)
+ [Additional configurations](#additional-configurations)
- [Paths to custom assets](#paths-to-custom-assets)
- [Incorporating Bootswatch themes](#incorporating-bootswatch-themes)
- [jQuery](#jquery)
- [Icon fonts](#icon-fonts)
+ [FAQ](#faq)
- [Using Bootstrap mixins and variables](#using-bootstrap-mixins-and-variables)
+ [Contributing](#contributing)
+ [License](#license)
+ [Examples and related libraries](#examples-and-related-libraries)
+ [Useful Q&A](#useful-qa)

## Installation
Get it via npm:

Expand Down Expand Up @@ -112,17 +136,44 @@ scripts:

If no config provided, default one for Bootstrap 3 will be used.

### Bootstrap 4 internal dependency solution

Because of Bootstrap 4's removal of UMD, internal dependencies, such as Popover's dependencies on Tooltip and Dropdown's dependency on Utils, are no longer naively resolved by Webpack (See Issue [#172](https://github.com/shakacode/bootstrap-loader/issues/172). In order to solve this issue, add the following code to your webpack configuration:
```
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
Alert: "exports?Alert!bootstrap/js/dist/alert",
Button: "exports?Button!bootstrap/js/dist/button",
Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports?Modal!bootstrap/js/dist/modal",
Popover: "exports?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports?Tab!bootstrap/js/dist/tab",
Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
Util: "exports?Util!bootstrap/js/dist/util",
})
]
```

## Examples
Check out example apps in [`examples/`](examples) folder:

* Basic usage: [examples/basic](examples/basic)
* See the `npm run bs4:customlocation` tasks for examples on how to pass your .bootstraprc config.
* With CSS Modules: [examples/css-modules](examples/css-modules) (This example shows off hot reloading with Babel 6 as well!)

## Common Options for Bootstrap 3 and 4
## Common configuration options
Here are common options for Bootstrap 3 & 4.

### Bootstrap 3
### Bootstrap 3 & 4

#### `loglevel`

Expand Down Expand Up @@ -268,7 +319,7 @@ $icon-font-name: 'glyphicons' // you'll typically want to change this too.
```
### Bootstrap 4
### Bootstrap 4 only
There is only one additional option for Bootstrap 4:
#### `useFlexbox`
Expand Down Expand Up @@ -303,7 +354,7 @@ Bootstrap 4 seems to require postcss:
1. Add postcss and the the postcss-loader: `npm i --save postcss postcss-loader`
2. Put `postcss` before `sass` in the order of loaders in your `.bootstraprc` file.

#### Glyphicons
#### Glyphicon alternatives
Glyphicons have been removed from Bootstrap 4. The examples demonstrate how to use the font-awesome-loader

## Additional configurations
Expand Down Expand Up @@ -381,7 +432,7 @@ module: {

## FAQ

### Using Bootstrap mixins and variables in your own code
### Using Bootstrap mixins and variables

You should use `sass-resources-loader` in your `webpack` config.

Expand Down Expand Up @@ -428,7 +479,7 @@ See [Contributing](CONTRIBUTING.md) to get started.
## License
MIT.

## Example and Related Libraries
## Examples and related libraries
* [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/), live example at [www.reactrails.com](http://www.reactrails.com/).
* [sass-resources-loader](https://github.com/shakacode/sass-resources-loader/)
* [Simple integration example](./examples/basic)
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"dependencies": {
"chalk": "^1.1.3",
"escape-regexp": "0.0.1",
"exports-loader": "^0.6.3",
"js-yaml": "^3.6.1",
"loader-utils": "^0.2.15",
"resolve": "^1.1.7",
Expand Down

0 comments on commit 57abdba

Please sign in to comment.