refactor(theme): separate bootstrap styles into @nebular/bootstrap (#707

)

Closes #230 

BREAKING CHANGE:

All bootstrap override styles were moved from the @nebular/theme package to the new @nebular/bootstrap package. If you don't need bootstrap support you can simply no use this package.
@nebular/theme package introduced a dependency of normalize.css.
@nebular/auth package now depends on @nebular/bootstrap (temporary).

How To Update:
- install Nebular Bootstrap
`npm i @nebular/bootstrap`
- then add it into your `styles.scss`
```scss
@import '~@nebular/bootstrap/styles/globals';
// ...

@include nb-install() {
  // ...
  @include nb-bootstrap-global();
}
```

angular.json

@@ -265,7 +265,7 @@
               "docs/google46533d2e7a851062.html"
             ],
             "styles": [
-              "node_modules/bootstrap/scss/bootstrap-reboot.scss",
+              "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/docsearch.js/dist/cdn/docsearch.min.css",
               "node_modules/highlight.js/styles/dracula.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
@@ -322,7 +322,6 @@
             "scripts": [
             ],
             "styles": [
-              "node_modules/bootstrap/scss/bootstrap-reboot.scss",
               "node_modules/highlight.js/styles/dracula.css",
               "node_modules/nebular-icons/scss/nebular-icons.scss",
               "docs/app/@theme/styles/styles.scss"

docs/app/@theme/styles/styles.scss

@@ -3,13 +3,10 @@
 @import 'small-social';
 @import 'feather';
 
-// TODO refactor after bootstrap removal
+@import '../../../../src/framework/theme/styles/global/normalize';
 @import '../../../../src/framework/theme/styles/global/components';
 @import '../../../../src/framework/theme/styles/global/typography/typography';
-@import '../../../../src/framework/theme/styles/global/bootstrap/buttons';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
+@import '../../../../src/framework/bootstrap/styles/globals';
 
 @include nb-install-global() {
   @include nb-layout-theme();
@@ -18,9 +15,9 @@
   @include nb-menu-theme();
   @include nb-actions-theme();
   @include nb-search-theme();
+  @include nb-bootstrap-global();
 
   @include nb-typography();
-  @include nb-b-buttons-theme();
 
   @include nbd-common();
 };

docs/app/@theme/styles/themes.scss

@@ -1,8 +1,6 @@
 @import '../../../../src/framework/theme/styles/theming';
 @import '../../../../src/framework/theme/styles/themes/default';
-
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '../../../../src/framework/theme/styles/global/bootstrap/breakpoints';
+@import '../../../../src/framework/theme/styles/global/breakpoints';
 
 $grid-breakpoints: map-merge($grid-breakpoints, (macpro: 1280px));
 

docs/articles/bootstrap-integration.md

@@ -0,0 +1,63 @@
+# Bootstrap Integration
+
+Nebular provides an additional module to override bootstrap styles according our themes.
+
+<div class="note note-info section-end">
+  <div class="note-title">Note</div>
+  <div class="note-body">
+    If you use our [ngx-admin starter kit](docs/guides/install-based-on-starter-kit) then you already have the bootstrap module in place.
+  </div>
+</div>
+
+To enable bootstrap support you have to do the following:
+
+- Install nebular bootstrap and bootstrap itself packages: 
+
+```bash
+npm i @nebular/bootstrap bootstrap
+```
+
+- Add bootstrap in `angular.json`: 
+
+```json
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.css",
+]
+```
+
+Then if you just want to use predefined themes you have to import prebuilt styles for required theme in `angular.json`:
+
+```json
+"styles": [
+  "node_modules/@nebular/bootstrap/styles/prebuilt/cosmic.css",
+  "node_modules/@nebular/bootstrap/styles/prebuilt/default.css",
+  "node_modules/@nebular/bootstrap/styles/prebuilt/corporate.css",
+]
+```
+
+Another way, if you need to customize themes you have to do the following steps:
+
+- Import nebular bootstrap into `styles.scss`:
+
+```scss
+@import '~@nebular/bootstrap/styles/globals';
+```
+
+- Include `nb-bootstrap-global` in styles.scss:
+
+```scss
+@import '~@nebular/bootstrap/styles/globals';
+
+@include nb-install() {
+  @include nb-bootstrap-global();
+}
+```
+
+And that's it. Bootstrap is installed now.
+
+<hr>
+
+## Related Articles
+
+- [Enable Theme System](docs/guides/enable-theme-system)
+- [Theme System Concepts](docs/guides/theme-system)

docs/articles/concept-3rd-party.md

@@ -2,12 +2,11 @@
 
 Currently Nebular Theme system is integrated with the following 3rd party modules:
 
-- Bootstrap 4;
 - ng2-smart-table;
 - angular2-toaster.
 
 It means that we've created style overriding for these modules, so that you can change component's look & feel using Nebular theme variables.
-For example, if you change the `color-primary` variable, bootstrap components using this color will be changed accordingly.
+For example, if you change the `color-primary` variable, components using this color will be changed accordingly.
 
 
 Or that's how we described variables for the `angular2-toaster` module:

docs/articles/index.md

@@ -19,7 +19,6 @@ Nebular modules are distributed as separated `npm` packages, here's a list of cu
 - Nebular Theme `@nebular/theme`
   - Theme System - set of SCSS rules, which allows you to modify application look & feel by changing variables, with fewer custom styles.
   - UI Kit - pure Angular components with two style themes and no 3rd party dependencies.
-  - Style overriding for Bootstrap, so that the application has a consistent look & feel across libraries.
   - Server-side rendering compatibility!
   - Right-to-left writing system support for all components.
 - Nebular Auth `@nebular/auth`
@@ -28,6 +27,8 @@ Nebular modules are distributed as separated `npm` packages, here's a list of cu
   - Helpers for token management (storing, passing with HTTP requests, etc).
 - Nebular Security `@nebular/security` 
   - module for roles and permissions management.
+- Nebular Bootstrap `@nebular/bootstrap`
+  - Style overriding for Bootstrap, so that the application has a consistent look & feel across libraries.
 - Admin dashboard starter kit <a href="https://github.com/akveo/ngx-admin" target="_blank">ngx-admin</a> - Angular application based on Nebular modules with beautiful IOT components.
 
 Other ideas

docs/articles/install-into-existing.md

@@ -14,12 +14,8 @@ In case you want to start based on our ngx-admin starter kit, please check out [
 <hr>
 
 ## Installing dependencies
-At this step, we assume you already have Angular modules installed. Now let's install Angular Bootstrap which is the only peer dependency left:
 
-```bash
-npm i -S bootstrap
-```
-<hr>
+At this step, we assume you already have Angular modules installed.
 
 ## Install Nebular modules
 
@@ -54,11 +50,10 @@ Same way you can enable Auth Module (more details under [Auth Module Concepts &
 ## Install Styles
 Now, let's import Nebular styles
 
-Include Bootstrap and default Nebular theme CSS files into your `angular.json` file (or `.angular-cli.json` for Angular < 6.0):
+Include default Nebular theme CSS files into your `angular.json` file:
 
 ```scss
 "styles": [
-  "../node_modules/bootstrap/dist/css/bootstrap.css",
   "../node_modules/@nebular/theme/styles/prebuilt/default.css", // or cosmic.css
 ],
 ```

docs/structure.ts

@@ -85,6 +85,17 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'Bootstrap Integration',
+        children: [
+          {
+            type: 'block',
+            block: 'markdown',
+            source: 'bootstrap-integration.md',
+          },
+        ],
+      },
       {
         type: 'page',
         name: '3rd-party components',

package.json

@@ -98,7 +98,7 @@
     "leaflet": "1.0.3",
     "marked": "0.3.9",
     "nebular-icons": "1.0.6",
-    "normalize.css": "6.0.0",
+    "normalize.css": "8.0.0",
     "rxjs": "^6.1.0",
     "socicon": "3.0.5",
     "zone.js": "^0.8.26"

scripts/gulp/tasks/bump-versions.ts

@@ -12,6 +12,7 @@ task('bump', () => {
     './src/framework/theme/package.json',
     './src/framework/auth/package.json',
     './src/framework/security/package.json',
+    './src/framework/bootstrap/package.json',
   ], { base: './' })
     .pipe(modify({
       key: 'version',
@@ -21,12 +22,25 @@ task('bump', () => {
 });
 
 task('bump-peer', () => {
+  src([
+    './src/framework/bootstrap/package.json',
+  ], { base: './' })
+    .pipe(modify({
+      key: 'peerDependencies.@nebular/theme',
+      value: VERSION,
+    }))
+    .pipe(dest('./'));
+
   src([
     './src/framework/auth/package.json',
   ], { base: './' })
     .pipe(modify({
       key: 'peerDependencies.@nebular/theme',
       value: VERSION,
     }))
+    .pipe(modify({
+      key: 'peerDependencies.@nebular/bootstrap',
+      value: VERSION,
+    }))
     .pipe(dest('./'));
 });

src/framework/auth/package.json

@@ -33,6 +33,7 @@
     "@angular/forms": "^6.0.0",
     "@angular/http": "^6.0.0",
     "@nebular/theme": "2.0.0-rc.10",
+    "@nebular/bootstrap": "2.0.0-rc.10",
     "rxjs": "^6.1.0"
   }
 }

src/framework/bootstrap/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@nebular/bootstrap",
+  "version": "2.0.0-rc.10",
+  "description": "@nebular/bootstrap",
+  "author": "akveo",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akveo/nebular.git"
+  },
+  "bugs": {
+    "url": "https://github.com/akveo/nebular/issues"
+  },
+  "homepage": "https://github.com/akveo/nebular#readme",
+  "keywords": [
+    "angular",
+    "typescript",
+    "ng2-admin",
+    "ngx-admin",
+    "theme",
+    "nebular"
+  ],
+  "peerDependencies": {
+    "bootstrap": "^4.0.0",
+    "@nebular/theme": "2.0.0-rc.10"
+  }
+}

src/framework/theme/styles/global/bootstrap/_button-group.scss → src/framework/bootstrap/styles/_button-group.scss

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import './default-buttons';
+@import 'default-buttons';
 
 @mixin btn-group-separator($color) {
   background-color: shade($color, 20%);

src/framework/theme/styles/global/bootstrap/_buttons.scss → src/framework/bootstrap/styles/_buttons.scss

@@ -4,11 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import './shape-buttons';
-@import './size-buttons';
-@import './default-buttons';
-@import './hero-buttons';
-@import './outline-buttons';
+@import 'shape-buttons';
+@import 'size-buttons';
+@import 'default-buttons';
+@import 'hero-buttons';
+@import 'outline-buttons';
 
 @mixin nb-b-buttons-theme() {
 

src/framework/theme/styles/global/bootstrap/_dropdowns.scss → src/framework/bootstrap/styles/_dropdowns.scss

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import './outline-buttons';
+@import 'outline-buttons';
 
 @mixin dropdown-menu-background($color) {
   background-color: $color;

src/framework/theme/styles/global/bootstrap/_forms.scss → src/framework/bootstrap/styles/_forms.scss

@@ -3,10 +3,10 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-@import './size-form-control';
-@import './default-form-control';
-@import '../../core/mixins';
-@import './custom-forms';
+@import 'size-form-control';
+@import 'default-form-control';
+@import '../../theme/styles/core/mixins';
+@import 'custom-forms';
 
 // locally used mixin
 @mixin checkmark($size, $color, $wight, $opacity: 1) {

src/framework/theme/styles/global/bootstrap/_bootstrap.theme.scss → src/framework/bootstrap/styles/_globals.scss

@@ -4,21 +4,20 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import './breakpoints';
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
 @import '~bootstrap/scss/grid';
-@import './buttons';
-@import './button-group';
-@import './dropdowns';
-@import './icon-buttons';
-@import './forms';
-@import './input-group';
-@import './modals';
-@import './layout';
+@import 'buttons';
+@import 'button-group';
+@import 'dropdowns';
+@import 'icon-buttons';
+@import 'forms';
+@import 'input-group';
+@import 'modals';
+@import 'layout';
 
-@mixin nb-bootstrap-theme() {
+@mixin nb-bootstrap-global() {
   @include nb-b-buttons-theme();
   @include nb-b-button-group-theme();
   @include nb-b-dropdowns-theme();

src/framework/theme/styles/global/bootstrap/_input-group.scss → src/framework/bootstrap/styles/_input-group.scss

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../core/mixins';
+@import '../../theme/styles/core/mixins';
 
 @mixin nb-b-input-group-theme() {
 

src/framework/theme/styles/global/bootstrap/_modals.scss → src/framework/bootstrap/styles/_modals.scss

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import '../../core/mixins';
+@import '../../theme/styles/core/mixins';
 
 @mixin nb-b-modals-theme() {
 

src/framework/theme/styles/global/bootstrap/_outline-buttons.scss → src/framework/bootstrap/styles/_outline-buttons.scss

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-@import './default-buttons';
+@import 'default-buttons';
 
 @mixin btn-outline() {
   .btn.btn-outline-primary {