creativetimofficial / now-ui-kit-angular Goto Github PK

License: MIT License

TypeScript 11.48% JavaScript 0.54% HTML 35.04% CSS 2.48% SCSS 50.47%

now-ui-kit-angular's Introduction

Now UI Kit Angular

Now UI Kit Angular is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 50 elements and 3 templates.

Now UI Kit is one of the most popular UI Kits online, provided in PSD and Sketch formats by Invision. We wanted to find a way for developers worldwide to benefit from using it. So, in collaboration with Invision, we are launching the HTML version for it!

Now will help you create a clean and simple website that is a perfect fit for today's flat design. It is built using the 12 column grid system, with components designed to fit together perfectly. It makes use of bold colours, beautiful typography, clear photography and spacious arrangements.

Create awesome, lifelike prototypes with InVision and Now so your users can experience and give feedback on your vision!

To get the PSD and Sketch files, please visit Invision (https://www.invisionapp.com/now).

Bootstrap 4 Support Now UI Kit is built on top of the much awaited Bootstrap 4. This makes starting a new project very simple. It also provides benefits if you are already working on a Bootstrap 4 project; you can just import the Now UI Kit style over it. Most of the elements have been redesigned; but if you are using an element we have not touched, it will fall back to the Bootstrap default.

Example Pages We wanted to fully display the power of this kit, so the kit comes packed with examples showing you how to use the components. Inside the product you will find:

Terminal Commands

Install NodeJs from NodeJs Official Page.
Open Terminal
Go to your file project
Run in terminal: npm install -g @angular/cli
Then: npm install
And: npm start
Navigate to localhost:4200

What's included

Within the download you'll find the following directories and files:

Now Ui Kit Angular
├── CHANGELOG.md
├── README.md
├── angular.json
├── documentation
│   ├── css
│   ├── js
│   └── tutorial-components.html
├── e2e
├── karma.conf.js
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app.routing.ts
│   │   ├── components
│   │   │   ├── basicelements
│   │   │   │   ├── basicelements.component.html
│   │   │   │   ├── basicelements.component.scss
│   │   │   │   ├── basicelements.component.spec.ts
│   │   │   │   └── basicelements.component.ts
│   │   │   ├── components.component.html
│   │   │   ├── components.component.ts
│   │   │   ├── components.module.ts
│   │   │   ├── modal
│   │   │   │   ├── modal.component.html
│   │   │   │   ├── modal.component.scss
│   │   │   │   ├── modal.component.spec.ts
│   │   │   │   └── modal.component.ts
│   │   │   ├── navigation
│   │   │   │   ├── navigation.component.html
│   │   │   │   ├── navigation.component.scss
│   │   │   │   ├── navigation.component.spec.ts
│   │   │   │   └── navigation.component.ts
│   │   │   ├── notification
│   │   │   │   ├── notification.component.html
│   │   │   │   ├── notification.component.scss
│   │   │   │   ├── notification.component.spec.ts
│   │   │   │   └── notification.component.ts
│   │   │   ├── nucleoicons
│   │   │   │   ├── nucleoicons.component.html
│   │   │   │   ├── nucleoicons.component.scss
│   │   │   │   ├── nucleoicons.component.spec.ts
│   │   │   │   └── nucleoicons.component.ts
│   │   │   └── typography
│   │   │       ├── typography.component.html
│   │   │       ├── typography.component.scss
│   │   │       ├── typography.component.spec.ts
│   │   │       └── typography.component.ts
│   │   ├── examples
│   │   │   ├── examples.component.html
│   │   │   ├── examples.component.scss
│   │   │   ├── examples.component.spec.ts
│   │   │   ├── examples.component.ts
│   │   │   ├── examples.module.ts
│   │   │   ├── landing
│   │   │   │   ├── landing.component.html
│   │   │   │   ├── landing.component.scss
│   │   │   │   ├── landing.component.spec.ts
│   │   │   │   └── landing.component.ts
│   │   │   ├── login
│   │   │   │   ├── login.component.html
│   │   │   │   ├── login.component.scss
│   │   │   │   ├── login.component.spec.ts
│   │   │   │   └── login.component.ts
│   │   │   └── profile
│   │   │       ├── profile.component.html
│   │   │       ├── profile.component.scss
│   │   │       ├── profile.component.spec.ts
│   │   │       └── profile.component.ts
│   │   └── shared
│   │       └── navbar
│   │           ├── navbar.component.html
│   │           ├── navbar.component.scss
│   │           ├── navbar.component.spec.ts
│   │           └── navbar.component.ts
│   ├── assets
│   │   ├── css
│   │   │   └── demo.css
│   │   ├── fonts
│   │   ├── img
│   │   └── sass
│   │       ├── now-ui-kit
│   │       └── now-ui-kit.scss
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

Useful Links

More products from Creative Tim: http://www.creative-tim.com/bootstrap-themes

Tutorials: https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w

Freebies: http://www.creative-tim.com/products

Affiliate Program (earn money): http://www.creative-tim.com/affiliates/new

Social Media:

Twitter: https://twitter.com/CreativeTim

Facebook: https://www.facebook.com/CreativeTim

Dribbble: https://dribbble.com/creativetim

Google+: https://plus.google.com/+CreativetimPage

Instagram: https://instagram.com/creativetimofficial

now-ui-kit-angular's People

Contributors

Stargazers

Watchers

Forkers

kingemma0430 dommert muhassaf deve0ps samuelliu805 fork-zone supplychainhub mslima2014 ronnysuero sts0mrg0 gsiteiovn munasinha nditah techteamnz charlesdccti aguilamike 5l1v3r1 lmo5 shadabk92 ex2d dalalsunil1986 senbonzakura1234 qjacquet kelvinks shvmgyl15 deathpulse274 mikolayek jersongomez eriveraj26 wijitraprr templatecollection krieg2065 farhanhamdani5 keerthi213 alhayekmahmoud amitsharma05082002 viniciusmorgado anselming itzdevv sshahid1992 adytiamaulana lezpaul26 snd94 masakisteve muhammad-atia duongtungnguyen0899 redenexp riadhchibani aleboaven danieldpn heritier004 axlneo thor-badgerbite carlos1705 pavelvalentov bryzentza manan-arya ahmedshalaby2 janschuettken noufal-ark kgomotso001 andreagithub97 sudhakartuta shiiim123 sedineinunes rafaelmorales08 mohin-100 nanooo23 maki977 vincix7 hemu123456789 poojani20 armandjudicael edup0789 luizinfo daforsx greg120689 jcacao rahulks17 gabrielasotof kevinkeyssx codingkid568 notthewaquar ivacharles starti9 davidlm98 abelfish jessroa3 darka2023 de-v-vision puzoliang anrabearison tgers montas96 modernacyber onur-akar ikramahdadouche perciuspuppy ibraheemcu gigajdn

now-ui-kit-angular's Issues

Problem to show accented characters.

I create a test component:
ng g component components/test

I write in the template file components/test.component.html the following french sentence:
L'élève va à l'école.

But, in the browser, I get the result :
L'�l�ve va � l'�cole.

test

Error on scroll top nav not appear,, i must to click the toggle button first then appear

[Bug] Error - Webpack is outdated

Version

1.3

Reproduction link

https://jsbin.com/sukagelihi/edit?html,console,output

Operating System

Windows 11

Device

Browser & Version

Mozilla

Steps to reproduce

npm install
npm run

What is expected?

To build and compile the project

What is actually happening?

Giving issues :

Error: ./src/assets/css/demo.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read properties of undefined (reading 'tapAsync')
at ExternalModuleFactoryPlugin.apply (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:59:39)
at C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\webpack\lib\ExternalsPlugin.js:30:63
at SyncHook.eval [as call] (eval at create (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
at SyncHook.lazyCompileHook (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:665:23
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at Compiler.compile (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:662:28)
at Compiler.runAsChild (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:328:8)
at Object.pitch (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\mini-css-extract-plugin\dist\loader.js:121:17)

Error: ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read properties of undefined (reading 'tapAsync')
at ExternalModuleFactoryPlugin.apply (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:59:39)
at C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\webpack\lib\ExternalsPlugin.js:30:63
at SyncHook.eval [as call] (eval at create (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
at SyncHook.lazyCompileHook (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:665:23
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at Compiler.compile (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:662:28)
at Compiler.runAsChild (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:328:8)
at Object.pitch (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\mini-css-extract-plugin\dist\loader.js:121:17)

Error: ./src/assets/sass/now-ui-kit.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: Cannot read properties of undefined (reading 'tapAsync')
at ExternalModuleFactoryPlugin.apply (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\webpack\lib\ExternalModuleFactoryPlugin.js:59:39)
at C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\webpack\lib\ExternalsPlugin.js:30:63
at SyncHook.eval [as call] (eval at create (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:19:10), :7:1)
at SyncHook.lazyCompileHook (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:665:23
at AsyncSeriesHook.eval [as callAsync] (eval at create (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), :6:1)
at AsyncSeriesHook.lazyCompileHook (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at Compiler.compile (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:662:28)
at Compiler.runAsChild (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:328:8)
at Object.pitch (C:\Users\Pablo\Desktop\RidingWavesCode\node_modules\mini-css-extract-plugin\dist\loader.js:121:17)

Solution

Additional comments

Node SASs

I can't install whiit the comand "npm install".

in the terminal can't install the node sass

Bugs: Error when build scss

Hi, I try to compile scss from html v1.2.0, but got this error:
in styles.scss:

@import "~bootstrap/scss/bootstrap.scss";

in angular.json:

"styles": [
              "src/styles.scss",
              "src/assets/sass/now-ui-kit.scss",
              "src/assets/sass/demo.scss"
            ],

error return when ng serve:

./src/assets/sass/now-ui-kit.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/assets/sass/now-ui-kit.scss)
Module build failed: 
@import "now-ui-kit/responsive";
                               ^
      Invalid CSS after '...it/responsive";': expected 1 selector or at-rule, was '";'
      in /Users/test-angular6/src/assets/sass/now-ui-kit.scss (line 63, column 33)

Can you check?
Thanks

[Feature Request] test

What is your enhancement?