reapop-theme-bootstrap
Bootstrap theme for Reapop
Compatibility
Tested and works with Reapop v0.6.0 in :
Supported browsers
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
---|---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
Installation
npm install reapop-theme-bootstrap --save
Integration
Update webpack config
You have to define some loaders to handle files of theme. If it's not already the case, you need to install :
- style-loader with
npm install style-loader --save-dev
- css-loader with
npm install css-loader --save-dev
- sass-loader with
npm install sass-loader --save-dev
- url-loader with
npm install url-loader --save-dev
- file-loader with
npm install file-loader --save-dev
Look at this example, you can use it in for your project. Check out configuration of Reapop Demo to see a complete example.
// CSS loader with some configuration// read https://github.com/webpack/css-loader to understand each query parametersvar CSSLoader ='css?sourceMap&-minimize''modules''importLoaders=1''localIdentName=[name]__[local]__[hash:base64:5]';moduleexports =module:loaders:test: /\.scss$/loaders: 'style' CSSLoader 'sass'test: /\.woff??$/loader: "url-loader?limit=10000&minetype=application/font-woff"test: /\.?$/loader: "file-loader";
Install Font Awesome and Bootstrap
This theme doesn't include bootstrap and Font Awesome to let you install them the way you want:
With Webpack
- Install Bootstrap with
npm install bootstrap --save
- Install Font Awesome with
npm install font-awesome --save
and import them in your app. Example :
import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css';
import '!style-loader!css-loader!font-awesome/css/font-awesome.min.css';
With BootstrapCDN
Add these lines in <head>
of your main index.html
file :
Set the theme
;;// 1. import Bootstrap and Font Awesome;;// 2. import reapop theme;{// 3. set `theme` propreturn<div><NotificationsSystem theme=theme/></div>;}
Customize the theme
Follow this guide : Reapop - Customize or create a theme
License
Reapop-theme-bootstrap is under MIT License