Skip to content

Commit

Permalink
refactor(theme): separate bootstrap styles into @nebular/bootstrap (#707
Browse files Browse the repository at this point in the history
)

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();
}
```
  • Loading branch information
tibing-old-email authored and nnixaa committed Sep 12, 2018
1 parent d6a211f commit a25f615
Show file tree
Hide file tree
Showing 47 changed files with 304 additions and 108 deletions.
3 changes: 1 addition & 2 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
Expand Down
9 changes: 3 additions & 6 deletions docs/app/@theme/styles/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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();
};
Expand Down
4 changes: 1 addition & 3 deletions docs/app/@theme/styles/themes.scss
Original file line number Diff line number Diff line change
@@ -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));

Expand Down
63 changes: 63 additions & 0 deletions docs/articles/bootstrap-integration.md
Original file line number Diff line number Diff line change
@@ -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)
3 changes: 1 addition & 2 deletions docs/articles/concept-3rd-party.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
3 changes: 2 additions & 1 deletion docs/articles/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand All @@ -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
Expand Down
9 changes: 2 additions & 7 deletions docs/articles/install-into-existing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
],
```
Expand Down
11 changes: 11 additions & 0 deletions docs/structure.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
6 changes: 3 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
14 changes: 14 additions & 0 deletions scripts/gulp/tasks/bump-versions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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('./'));
});
1 change: 1 addition & 0 deletions src/framework/auth/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
27 changes: 27 additions & 0 deletions src/framework/bootstrap/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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%);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -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() {

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit a25f615

Please sign in to comment.