creativetimofficial / now-ui-kit Goto Github PK

View Code? Open in Web Editor NEW

1.7K 46.0 364.0 62.29 MB

Now UI Kit Bootstrap 4 - Designed by Invision. Coded by Creative Tim

Home Page: https://www.creative-tim.com/product/now-ui-kit

License: Other

CSS 41.41% JavaScript 1.92% HTML 21.38% SCSS 35.29%

bootstrap4 kit invision uikit ui-kit bootstrap-4 bootstrap-theme freebie sass-framework

now-ui-kit's Introduction

Now UI Kit

Now UI Kit 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:

Versions
Demo
Documentation
File Structure
Browser Support
Resources
Reporting Issues
Licensing
Useful Links

Versions

HTML	VUEJS	ANGULAR

Demo

Register	Login	Profile

Documentation

The documentation for the Now UI Kit is hosted at our website.

File Structure

Now Ui Kit
├── CHANGELOG.md
├── assets
│   ├── css
│   │   ├── bootstrap.min.css
│   │   ├── demo.css
│   │   └── now-ui-kit.css
│   ├── fonts
│   ├── img
│   ├── js
│   │   ├── core
│   │   │   ├── bootstrap.min.js
│   │   │   ├── jquery.3.2.1.min.js
│   │   │   └── popper.min.js
│   │   ├── now-ui-kit.js
│   │   └── plugins
│   │       ├── bootstrap-datetimepicker.js
│   │       ├── bootstrap-switch.js
│   │       └── nouislider.min.js
├── documentation
│   ├── template.html
│   └── tutorial-components.html
├── examples
│   ├── landing-page.html
│   ├── login-page.html
│   └── profile-page.html
├── index.html
└── nucleo-icons.html

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Demo: https://demos.creative-tim.com/now-ui-kit/index.html?ref=adnp-readme
Download Page: https://www.creative-tim.com/product/now-ui-kit?ref=adnp-readme
Buy PRO: https://www.creative-tim.com/product/now-ui-kit-pro
Documentation: https://demos.creative-tim.com/now-ui-kit/docs/1.0/getting-started/introduction.html?ref=adnp-readme
License Agreement: https://www.creative-tim.com/license
Support: https://www.creative-tim.com/contact-us
Issues: Github Issues Page
Dashboards:

HTML	VUEJS	ANGULAR

Change log

Please see the changelog for more information on what has changed recently.

Credits

Reporting Issues

We use GitHub Issues as the official bug tracker for the Now UI Kit. Here are some advices for our users that want to report an issue:

Make sure that you are using the latest version of the Argon Dashboard Pro Nodejs. Check the CHANGELOG from your dashboard on our website.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Licensing

Copyright 2019 Creative Tim (https://www.creative-tim.com/?ref=nuk-readme)
Creative Tim License.

Social Media

Twitter: https://twitter.com/CreativeTim?ref=adnp-readme

Facebook: https://www.facebook.com/CreativeTim?ref=adnp-readme

Dribbble: https://dribbble.com/creativetim?ref=adnp-readme

Instagram: https://www.instagram.com/CreativeTimOfficial?ref=adnp-readme

now-ui-kit's People

Contributors

Stargazers

Watchers

Forkers

cristijora cromatido faberpro mamsoudi ktostler alexjoffroy maximl337 adrienbrault ilm-techno-solutions linecode robbinespu lyrl hhy5277 nadeemkhan austinsmom binler yigitaybuga edrdesigner jaspal1982 treewater junedomingo andrew-oko-odion hengkiardo ishan-marikar lury arcteryx ermakovmaxim vpineda7 th1nkful shekarsiri mehedi101 hamidionline melih pandahisham camtonguyen infinityhacks anggun-indra nunodotferreira annetawamono medivec cybernetics dreadchild balmainctf elnorth brunowmoreno sftruelx hamidullahsafi anurajricky zlojkashtan hu19891110 vireshbackup yim-sekny hackur dxps praveenperera lalviarez nick-harvey clincejoshy yehkay maxstermade vicwue losecher timmaybrown macressler anirudhux faker-a wmstudios ryanhmaas mjunaidi wandersoncs bglovgrrr zhusijia laurenburley 1057697328 sikrigagan nagyist aborygen lab-estudo technext indinuity startupengine cherifsy tsoliangwu0130 ajeetbpr steventso hgrasberger zeroseven nirzaq lmtgzs firmanm nabilashraf pandureddy0254 gitshujian he11yeah salman937 skekec solertis dineshdesigner08 ws-os galsys

now-ui-kit's Issues

Update to new version of Bootstrap v4.0.0-beta

No DropDown Functionality for Nav Bar?

I have an user in the nav item box. However you cannot seem to toggle it while it is inside the bar? Am I missing something or what?

https://hastebin.com/elizukeqif.js

Navbar collapse not working on Chrome for Android

For some reason "nav-open" does not get added as html class on click. SImilarly, if I add manually "nav-open", clicking the menu button or outside the navbar does not remove "nav-open" class from html (i.e. the menu stays on scree). This only affects android chrome, it works fine on windows, macos, iOS, and firefox on Android.

incompatible units rem and px

When loading now-ui-kit.scss via webpack with bootstrap.scss, the following error occurs:

Module build failed:
$input-height:                   (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
                                ^
      Incompatible units: 'rem' and 'px'.
      in /Users/olivier/projects/vuejs/vuemedium/node_modules/bootstrap/scss/_variables.scss (line 444, column 34)

According to bootstrap [https://github.com/twbs/bootstrap-sass/issues/1057] this is most likely an errors in your ui kit, not bootstrap. It seems that you are using px units in some variables.

I believe a big aspect of bs4 was the use of rem units! Using px (or even em) units in your ui kit seems to defeat the purpose.

Now UI Kit and Angular 4

Is it possible to use Now UI Kit with AngularJS?

Issue with creative-tim.com site - which does not have its own issue tracker, or so it seems...

This issue might not have anything to do with the Now UI kit, then again it might. This is what I was met by when opening my account page the very first time:

Something's hiding under that bar...

Results obtained with Chromium "58.0.3029.96 built on Debian 9.0, running on Debian 9.0
" (according to 'About Chromium')

wrong form error styling when using form-control-label and/or form-control-feedback

Hello,
Upon adding a label with class form-control-label to any form field or using a div with form-control-feedback, the error styling gets all messed up...

to illustrate this issue please try changing the "Error Input" example in the index.html of your kit with the following:

<div class="col-sm-6 col-lg-3">
    <div class="form-group has-danger form-group-no-border">
        <label for="email" class="form-control-label">E-Mail Address</label>
        <input type="email" value="Error Input" class="form-control form-control-danger" />
        <div class="form-control-feedback">Error example</div>
    </div>
</div>

Translating DatePicker

Im trying to translate the datepicker to spanish

Modals

Having trouble getting modals to work.

My Pug code — I admit it, I merely ran your HTML mark-up through an HTML to Jade compiler — is as follows.

			button.btn.btn-primary.btn-lg(data-toggle='modal', data-target='#myModal')
				| Diálogo &nbsp;
				i.fa.fa-upload.fa-lg

			#myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
				.modal-dialog
					.modal-content
						.modal-header
							button.close(type='button', data-dismiss='modal', aria-hidden='true') ×
							h4#myModalLabel.modal-title Modal title
						.modal-body
							| Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
						.modal-footer
							button.btn.btn-default.btn-simple(type='button', data-dismiss='modal') Close
							button.btn.btn-info.btn-simple(type='button') Save

I have checked my Javascript configuration as well including the scripts in the order found on your page..

		script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js')
		script(type='text/javascript', src='now-ui/assets/js/tether.min.js')
		script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js')
		script(type='text/javascript', src='now-ui/assets/js/plugins/bootstrap-switch.js')
		script(type='text/javascript', src='now-ui/assets/js/plugins/nouislider.min.js')
		script(type='text/javascript', src='now-ui/assets/js/plugins/bootstrap-datepicker.js')
		script(type='text/javascript', src='http://demos.creative-tim.com/now-ui-kit/assets/js/plugins/jquery.sharrre.js')
		script(type='text/javascript', src='now-ui/assets/js/now-ui-kit.js')

What bonehead config error am I making? Thanks!

Homepage white space on right side mobile

Swiping the homepage to the left shows a huge empty white space on the right side.

Fixed by adding:

html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; }

Checkbox issue

Hi I'm having trouble with the check box. When i check the box, there is no check mark, just an "error" image

Any ideas?

Can't resolve '../fonts/nucleo-outline.svg'

Hello all,

the now-ui-kit.css breaks since it can't find the 'nucleo-outline.svg' in the fonts folder. :)

installed this using npm install

thanks..

Any way to have a navbar with some buttons on the left and some to the right ?

Hi !

I would like to know if it's possible to have a navbar that have the navbar-brand then some buttons just next to it, and then some buttons on the far right. I saw that there is a class Justify-content-end that i can change to Justify-content-left to have my buttons on the left, but i don't find a way to put the Justify-content-end for the last 3 buttons.

Here is an exemple of what i would like to achieve

Thx for the help

Menu Collapse Required a Kludge

All is mostly well (with) Now but I had a minor issue to share.

When collapsed the top navbar displayed the hamburger and the X of closure with a black background instead of default grey.

In the end I added bg-default to button.navbar-toggler.toggler-right ... and then a style='border: none;')was needed.

Here is my Pug with a coujple other kludges.

nav.navbar.navbar-toggleable-md.bg-default.fixed-top
	.navbar-translate
		button.navbar-toggler.navbar-toggler-right.bg-default(type='button', data-toggle='collapse', data-target='#navigation', aria-controls='navigation-index', aria-expanded='false', aria-label='Toggle navigation', style='border: none;')
			span.navbar-toggler-bar.bar1
			span.navbar-toggler-bar.bar2
			span.navbar-toggler-bar.bar3
		a.navbar-brand(href='#pablo', style='text-transform: none; font-size: 25px; margin-right: 100px;')
			i.fa.fa-gears.fa-lg.fa-pull-left
			| Engenho Novo LLC
	#navigation.collapse.navbar-collapse
		ul.navbar-nav(style='font-size: 21px;')
			li.nav-item
				a.nav-link(href='#pablo')
					| In Principio
			li.nav-item.active
				a.nav-link(href='#pablo') In Media Res
			li.nav-item
				a.nav-link(href='#pablo') Penúltimas Coisas
			li.nav-item
				a.nav-link(href='#pablo') O Fim da Picada

.container(style='margin-top: 48px;')
	.jumbotron
		.section.text-center(data-background-color='black', style='padding: 40px;')
			h2	Adeus, Mundo Imundo
			h3 <a href='http://demos.creative-tim.com/now-ui-kit/documentation/tutorial-components.html'>Now UI</a> no Harp com Pug
			h4 Clonado na Samboja
			h6(style='text-transform: none;') Honi Soit Qui Mal y Pense
				button.btn-info.btn-lg(style='font-size: 18px; border-color: black; margin: 0 auto; margin-top: 25px;')
					i.material-icons.pull-right autorenew
					| Refresh Me &nbsp; 
			p.center-block
				i.fa.fa-coffee.fa-5x

A Trouble with Date Picker

Hi. I am trying to integrate date picker from this material kit into my project. It seems I've copied all needed snippets while it doesn't work. Can you help me to solve the problem? I am using Bootstrap 4 and here is the link on code pen:
https://codepen.io/Hayko/pen/QgvYMv

NPM/Bower support

Awesome release, could you add support to npm/bower package managers. Thanks!

DateTime Picker in Firefox

When trying top use the Now UI Kit I have come across an issue with the Date Picker element.
Setup like in the demo, the back and forward buttons on the calendar do not work. The same issue happens with clicking the Month, which should zoom out to show month-on-month view, and then zoom to years.

The issue does not happen in Chrome, I am testing in Firefox 54.0.1
I tried it with all add-ons disabled, same effect.

The issue also exists on the demo site:
http://demos.creative-tim.com/now-ui-kit/documentation/tutorial-components.html#datepicker-row

But does not exists when testing on http://www.eyecon.ro/bootstrap-datepicker/ in Firefox.

Mobile view navbar dropdown error

When adding to the navbar dropdown menu, the mobile view sees the submenu space but not the text. The first image shows the menu when clicked to the hamburger, the second when expanded the topic "Klubi"

Now UI Kit link in readme goes to Material Kit Pro demo page.

The text link to 'Now UI Kit' in README.md body goes to 'http://demos.creative-tim.com/material-kit-pro/index.html'. The header link correctly goes to 'http://demos.creative-tim.com/now-ui-kit/index.html'.

React support!

how do I use it with React.js (when react is installed via npm) ?

input and button, looks very bad

bug with input and button, looks very bad

https://imgur.com/a/SQ31i

<div class="input-group"> <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for..."> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Go!</button> </span> </div>

Navbar-brand center?

Hey, Just thought i'd see if there is an easy way of making the nav brand centered. I'm trying to add a button on the left, then the nav brand, then the links. I've been messing with it for a while but can't seem to find a simple easy way to do it. Anybody know?

Modal content issue

When the modal content increases to the point when it becomes scrollable, the modal just shifts way down the page when launched.

As you can see in the screenshot above when I increased the content the modal just shifted way down to the page. I tried this in the example pages that comes with nowuikit when downloaded. Whereas in bootstrap4 docs and example on their website the modal works fine for longer content. Please look into this.

Navbar collaps scroll bug

on _responsive.scss on .navbar-collapse

overflow-y: visible; must change to overflow-y: scroll;

I thik

sorry my english is bad

مشکل سکرول نوبار وجود داره، که باید اورفالو وای ویزیبل رو به سکرول تغییر داد تا درست بشه

consider using a less suggestive avatar stock photo

first of all, thanks for publishing this great looking project under such a liberal license.

that said, please consider using a less suggestive avatar stock photo for the image section on the sample page.

my first reaction when scrolling down that page was "geez, why the f^@# is this dude called tim using a picture of a naked woman. so immature and sexist." (yes, i know tim is the agency name.)

after a quick google image search i figured out this is a free "do whatever you want" stock photo by @araltasher from their unsplash portfolio, more specifically this photo, which does not feature any nudity, which proved my initial reaction was "wrong". that said, the cropping suggests otherwise, at least to me upon first glance.

anyway, i am sure none of this is intentional so i am not calling out anyone here. i just want to share my reaction when looking at that otherwise very nice demo page, hence this message.

keep up the good work, but please reconsider the stock photo. :)

Validation parsing error due to @keyframes issue in NowUiKit CSS

@alexandru-paduraru NowUIKit CSS is failing validation and throwing parser error due to the below piece of code. It's throwing because of the presence of @Keyframes inside the @media query. Please suggest a quick fix as this is not allowing to pass the precompilation in rails production, so I am not able to deploy the app.

The error can also be seen on css lint (attached screenshot):

Below is the piece of code:

@media screen and (max-width: 991px) {
  .navbar-collapse {
    position: fixed;
    display: block;
    top: 0;
    height: 100vh !important;
    width: 300px;
    right: 0;
    z-index: 1032;
    visibility: visible;
    background-color: #999;
    overflow-y: visible;
    border-top: none;
    text-align: left;
    max-height: none !important;
    -webkit-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
    -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }
  .nav-open .navbar-collapse {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); }
  .navbar-collapse:before {
    background: #f96332;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#f96332 0%, #000 80%);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#f96332 0%, #000 80%);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#f96332 0%, #000 80%);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(#f96332 0%, #000 80%);
    /* Standard syntax (must be last) */
    opacity: 0.76;
    filter: alpha(opacity=76);
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; }
  .navbar-collapse .navbar-nav:not(.navbar-logo) .nav-link {
    margin: 0 1rem;
    color: #FFFFFF; }
  .menu-on-left .navbar-collapse {
    right: auto;
    left: 0;
    -webkit-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0); }

  .profile-photo .profile-photo-small {
    margin-left: -2px; }

  [class*="navbar-toggleable-"] .navbar-collapse {
    width: 300px; }

  .button-dropdown {
    display: none; }

  .navbar .navbar-brand {
    padding-top: .5rem;
    padding-bottom: .5rem; }
  .navbar .navbar-nav {
    margin-top: 53px; }
  .navbar .navbar-nav .nav-link {
    padding-top: 0.75rem;
    padding-bottom: .75rem; }
  .navbar .navbar-nav.navbar-logo {
    top: 0;
    height: 53px; }
  .navbar .dropdown.show .dropdown-menu, .navbar .dropdown .dropdown-menu {
    background-color: transparent;
    border: 0;
    transition: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: auto;
    margin: 0 1rem;
    margin-top: -18px; }
  .navbar .dropdown.show .dropdown-menu:before, .navbar .dropdown .dropdown-menu:before {
    display: none; }
  .navbar .dropdown-menu .dropdown-item:focus, .navbar .dropdown-menu .dropdown-item:hover {
    color: #FFFFFF; }
  .navbar .navbar-translate {
    width: 100%;
    position: relative;
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
    -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }
  .navbar .navbar-toggler-bar {
    display: block;
    position: relative;
    width: 22px;
    height: 1px;
    border-radius: 1px;
    background: #FFFFFF; }
  .navbar .navbar-toggler-bar + .navbar-toggler-bar {
    margin-top: 7px; }
  .navbar .navbar-toggler-bar.bar2 {
    width: 17px;
    transition: width .2s linear; }
  .navbar.bg-white:not(.navbar-transparent) .navbar-toggler-bar {
    background: #B8B8B8; }
  .navbar .toggled .navbar-toggler-bar {
    width: 24px; }
  .navbar .toggled .navbar-toggler-bar + .navbar-toggler-bar {
    margin-top: 5px; }

  .wrapper {
    -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }

  .menu-on-left .navbar-brand {
    float: right;
    margin-right: 0;
    margin-left: 1rem; }

  .nav-open .wrapper {
    -webkit-transform: translate3d(-150px, 0, 0);
    -moz-transform: translate3d(-150px, 0, 0);
    -o-transform: translate3d(-150px, 0, 0);
    -ms-transform: translate3d(-150px, 0, 0);
    transform: translate3d(-150px, 0, 0); }
  .nav-open .navbar-translate {
    -webkit-transform: translate3d(-300px, 0, 0);
    -moz-transform: translate3d(-300px, 0, 0);
    -o-transform: translate3d(-300px, 0, 0);
    -ms-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0); }
  .nav-open .menu-on-left .navbar-collapse {
    -webkit-transform: translate3d(0px, 0, 0);
    -moz-transform: translate3d(0px, 0, 0);
    -o-transform: translate3d(0px, 0, 0);
    -ms-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0); }
  .nav-open .menu-on-left .navbar-translate {
    -webkit-transform: translate3d(300px, 0, 0);
    -moz-transform: translate3d(300px, 0, 0);
    -o-transform: translate3d(300px, 0, 0);
    -ms-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0); }
  .nav-open .menu-on-left .wrapper {
    -webkit-transform: translate3d(150px, 0, 0);
    -moz-transform: translate3d(150px, 0, 0);
    -o-transform: translate3d(150px, 0, 0);
    -ms-transform: translate3d(150px, 0, 0);
    transform: translate3d(150px, 0, 0); }
  .nav-open .menu-on-left #bodyClick {
    right: auto;
    left: 300px; }

  .bar1, .bar2, .bar3 {
    outline: 1px solid transparent; }

  .bar1 {
    top: 0px;
    -webkit-animation: topbar-back 500ms linear 0s;
    -moz-animation: topbar-back 500ms linear 0s;
    animation: topbar-back 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

  .bar2 {
    opacity: 1; }

  .bar3 {
    bottom: 0px;
    -webkit-animation: bottombar-back 500ms linear 0s;
    -moz-animation: bottombar-back 500ms linear 0s;
    animation: bottombar-back 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

  .toggled .bar1 {
    top: 6px;
    -webkit-animation: topbar-x 500ms linear 0s;
    -moz-animation: topbar-x 500ms linear 0s;
    animation: topbar-x 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards; }

  .toggled .bar2 {
    opacity: 0; }
  .toggled .bar3 {
    bottom: 6px;
    -webkit-animation: bottombar-x 500ms linear 0s;
    -moz-animation: bottombar-x 500ms linear 0s;
    animation: bottombar-x 500ms 0s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;}
  
  @keyframes topbar-x {
    0% {
      top: 0px;
      transform: rotate(0deg); }
    45% {
      top: 6px;
      transform: rotate(145deg); }
    75% {
      transform: rotate(130deg); }
    100% {
      transform: rotate(135deg); } }
  @-webkit-keyframes topbar-x {
    0% {
      top: 0px;
      -webkit-transform: rotate(0deg); }
    45% {
      top: 6px;
      -webkit-transform: rotate(145deg); }
    75% {
      -webkit-transform: rotate(130deg); }
    100% {
      -webkit-transform: rotate(135deg); } }
  @-moz-keyframes topbar-x {
    0% {
      top: 0px;
      -moz-transform: rotate(0deg); }
    45% {
      top: 6px;
      -moz-transform: rotate(145deg); }
    75% {
      -moz-transform: rotate(130deg); }
    100% {
      -moz-transform: rotate(135deg); } }
  @keyframes topbar-back {
    0% {
      top: 6px;
      transform: rotate(135deg); }
    45% {
      transform: rotate(-10deg); }
    75% {
      transform: rotate(5deg); }
    100% {
      top: 0px;
      transform: rotate(0); } }
  @-webkit-keyframes topbar-back {
    0% {
      top: 6px;
      -webkit-transform: rotate(135deg); }
    45% {
      -webkit-transform: rotate(-10deg); }
    75% {
      -webkit-transform: rotate(5deg); }
    100% {
      top: 0px;
      -webkit-transform: rotate(0); } }
  @-moz-keyframes topbar-back {
    0% {
      top: 6px;
      -moz-transform: rotate(135deg); }
    45% {
      -moz-transform: rotate(-10deg); }
    75% {
      -moz-transform: rotate(5deg); }
    100% {
      top: 0px;
      -moz-transform: rotate(0); } }
  @keyframes bottombar-x {
    0% {
      bottom: 0px;
      transform: rotate(0deg); }
    45% {
      bottom: 6px;
      transform: rotate(-145deg); }
    75% {
      transform: rotate(-130deg); }
    100% {
      transform: rotate(-135deg); } }
  @-webkit-keyframes bottombar-x {
    0% {
      bottom: 0px;
      -webkit-transform: rotate(0deg); }
    45% {
      bottom: 6px;
      -webkit-transform: rotate(-145deg); }
    75% {
      -webkit-transform: rotate(-130deg); }
    100% {
      -webkit-transform: rotate(-135deg); } }
  @-moz-keyframes bottombar-x {
    0% {
      bottom: 0px;
      -moz-transform: rotate(0deg); }
    45% {
      bottom: 6px;
      -moz-transform: rotate(-145deg); }
    75% {
      -moz-transform: rotate(-130deg); }
    100% {
      -moz-transform: rotate(-135deg); } }
  @keyframes bottombar-back {
    0% {
      bottom: 6px;
      transform: rotate(-135deg); }
    45% {
      transform: rotate(10deg); }
    75% {
      transform: rotate(-5deg); }
    100% {
      bottom: 0px;
      transform: rotate(0); } }
  @-webkit-keyframes bottombar-back {
    0% {
      bottom: 6px;
      -webkit-transform: rotate(-135deg); }
    45% {
      -webkit-transform: rotate(10deg); }
    75% {
      -webkit-transform: rotate(-5deg); }
    100% {
      bottom: 0px;
      -webkit-transform: rotate(0); } }
  @-moz-keyframes bottombar-back {
    0% {
      bottom: 6px;
      -moz-transform: rotate(-135deg); }
    45% {
      -moz-transform: rotate(10deg); }
    75% {
      -moz-transform: rotate(-5deg); }
    100% {
      bottom: 0px;
      -moz-transform: rotate(0); } }
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 1; } }
  @-moz-keyframes fadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 1; } }
  @keyframes fadeIn {
    0% {
      opacity: 0; }
    100% {
      opacity: 1; } }
  #bodyClick {
    height: 100%;
    width: 100%;
    position: fixed;
    opacity: 1;
    top: 0;
    left: auto;
    right: 300px;
    content: "";
    z-index: 9999;
    overflow-x: hidden;
    background-color: transparent;
    -webkit-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -moz-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -o-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    -ms-transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1);
    transition: all 0.5s cubic-bezier(0.685, 0.0473, 0.346, 1); }

  .section-nucleo-icons .container .row > [class*="col-"]:first-child {
    text-align: center; }

  .footer .copyright {
    text-align: right; }

  .section-nucleo-icons .icons-container {
    margin-top: 65px; }

  .navbar-nav .nav-link i.fa, .navbar-nav .nav-link i.now-ui-icons {
    opacity: .5; }

  .section-images {
    height: 500px;
    max-height: 500px; }
  .section-images .hero-images-container {
    max-width: 500px; }
  .section-images .hero-images-container-1 {
    right: 10%;
    top: 68%;
    max-width: 269px; }
  .section-images .hero-images-container-2 {
    right: 5%;
    max-width: 135px;
    top: 93%; } }

Idea: SCSS-lint

I was wondering to support scss-lint on sass. So there's a possible code quality improvement

Check mark not working

Hi I'm very confused. I compiled scss and now i'm having this error when i debug:

SyntaxError: expected expression, got '.'[Learn More] now-ui-kit.css:28
line 28 starts with
.bootstrap-switch {

Demo page popover HTML render problem

On the demo page, there is a problem with the popover content. Popover top, bottom, and right have white background with proper contents. However, the left popover has orange background with a <br> tag not rendered in content. The image explains the issue.

disable auto slide crousel

how to disable auto slide in carousel ?

Navbar slider menu does not scroll on mobile

When opening the slider menu on mobile the slider doesn't scroll, only the page content.
Not sure if this is the problem or not.

Uncaught TypeError: Cannot read property 'nodeName' of null at Object.T [as create] (nouislider.min.js:3) at Object.initSliders (now-ui-kit.js:180) at HTMLDocument.<anonymous> ((index):164) at j (jquery.3.2.1.min.js:2) at k (jquery.3.2.1.min.js:2)

Any way to have the normal "drop down" nav on mobile?

I have everything set up correctly but the ui kit nav loads very weird on mobile.

Here is an example, i cant explain what it's doing.

http://flashmanwade.co

I did the responsive.scss sass and complied. still acting weird

Safari login page

Hey,

Example login page on safari is completely out of style. That's because of using 100vh which safari is not supporting yet. Suggesting to add height 100% to html, body and then to page-header in order to handle it within all the browsers properly.

navbar collapse not working

So here's my code, I tried with the one from the docs and still nothing though:

        <nav class="navbar navbar-toggleable-md bg-info">
            <div class="container">
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                        data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-bar bar1"></span>
                    <span class="navbar-toggler-bar bar2"></span>
                    <span class="navbar-toggler-bar bar3"></span>
                </button>

                <a class="navbar-brand" href="https://event-manager.app">Event Manager</a>

                <div class="collapse navbar-collapse" id="navigation">
                    <div class="navbar-translate">
                        <ul class="navbar-nav">
                            <li class="nav-item active">
                                <a class="nav-link" href="https://event-manager.app">Home</a>
                            </li>
                            <li class="nav-item">
                                <a href="https://event-manager.app/dashboard" class="nav-link">Francis Morissette</a>
                            </li>
                            <li class="nav-item">
                                 <logout class="nav-link"></logout>
                            </li>
                        </ul>
                    </div>
                </div>
        </nav>

If I double-click, I get a "already collapsing" error in the console.

npm package out of date

I did an npm install of the now-ui-kit package, but it installed version 1.0.1. Is there a way to get it upgraded to the latest version?

Form data shows in the address bar

I'm trying to create a signin/signup form using PHP. And anytime I hit on the submit button instead of submitting the data shows up in the address bar.
sorry for me bad english

Bootstrap 4 Beta support?

Boostrap v4.0.0-beta was released yesterday. I know that it's a little bit early, but has anyone tried to use now-ui-kit with Bootstrap's most recent version?

Can not change switch/toggle buttons size

I'm using NowUI 1.0.0, after check your css file, I saw some predefine classes for toggle button like: bootstrap-switch-mini, bootstrap-switch-small, bootstrap-switch-large but it does not take any effect at all.

Nested menus

Hello,
it seems impossible to create nested menus, in the nav for example.
Could I trouble you for a fix?

Thank you.

Wrong h5 tag close

Hi, using this UI Kit with VueJS it give me a syntax error:
At line 1076 in index.html
<h5 class="description">The kit comes with three pre-built pages to help you get started faster. You can change the text and images and you're good to go. More importantly, looking at them will give you a picture of what you can built with this powerful Bootstrap 4 ui kit.</h4>

CDN support?

Will this great package be available on any CDNs?

Is there any Sidebar for now ui

Huge padding for nav-tabs in responsive mode width < 768px

This botches things on all iPhones except for plus models. I believe something more reasonable in ems is more appropriate here (say, 1 or 2 em).

_responsive.scss:

@media screen and (max-width: 768px){
///.....
.nav-tabs{
        display: inline-block;
        width: 100%;
        padding-left: 100px;
        padding-right: 100px;
        text-align: center;

        .nav-item > .nav-link{
            margin-bottom: 5px;
        }
    }
}

Please use Bootstrap from CDN

Instead of bundling bootstrap.min.css, use from CDN:
https://getbootstrap.com/docs/4.0/getting-started/introduction/

Thanks

Datepicker doesn't work

For fixing this issue please go in your project in assets/_scss/now-ui-kit/plugins/_plugin-datepicker.scss and search for the following lines of code:

.datepicker .day div,
.datepicker th {
  @include transition($general-transition-time, $transition-ease);
  text-align: center;
  width: 30px;
  height: 30px;
  line-height: 2.2;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 50%;
  font-weight: $font-weight-light;
  font-size: $font-size-base;
  border: none;
  position: relative;
  cursor: pointer;
}

Here you just have to add the property ‘ z-index: -1; ’ and after you do that please compile your scss with Koala( koala-app.com ). Please be sure that your output path is ‘ assets/css/now-ui-kit.css ‘. Everything will work fine after you will do the modification. Hope that will help you!

Regards,
Dragos

Mobile menu on all media sreens

Hi to everyone, i want to use the mobile menu on all the media sreen not only at the mobile ones. To do that i modified the css to make the "navbar-toggler" button allways visible as block and i modified the now-ui-kit.css file at the line 3469, the 991 media screen, and set it to @media screen and (max-width: 150000px) . And i thought it had worked perfectly, but now i realize it doesn't.
I load the page, and if i click on the navbar-toggler the "nav-open" class doesn't appear at the html tag. BUT, if i resize the browser screen to a movile size it works (as expected), AND if i rezise the browser to the desktop resolutions everything works great!!!.

wrong closing tag on your index-page

you are closing a <h5> with a </h4> in the section-download

<h5 class="description">We've just launched<a href="http://demos.creative-tim.com/now-ui-kit-pro/presentation.html" target="_blank">Now UI Kit PRO</a>. It has a huge number of components, sections and example pages. Start Your Development With A Badass Bootstrap 4 UI Kit. </h4>

Navbar with container-fluid

Hi! If you want to put all the elements from navbar in container-fluid please follow the next steps.

You must take the uploaded scss partials and replace them in assets/scss/now-ui-kit/_responsive.scss and assets/scss/now-ui-kit/_navbar.scss.

_navbar.scss.zip
_responsive.scss.zip

After you do that the final step is to compile your scss with Koala. Please be sure that your output path is assets/css/now-ui-kit.css.

Regards,
Dragos

Transparent Background Nav Bar Toggle - Offset Button Outline

Unsure if anyone else can replicate this issue to confirm?

Change clear-filter color from orange to ...?

As the title suggests, there is now way to easily change the filter-color from orange to something else.

I might as well make a general suggestion:

Why don't you get rid of "orange" in scss/html, name it primary color and make it conform to the $primary-color variable? For example, if I set my primary color as blue, I should be able to set filter-color="primary", have a blue fade and call it a day. Do you think this makes sense?