Colors

Brand #009CC1
Text #1D1D1B
Primary #F18700
Accent #182642
Muted #B2B2B2
Good #5CB85C
Info #60C4DE
Warning #FFB819
Bad #F42534

When copying specific color codes, please make sure to take these directly from the official Brand Guidelines.

Static assets

Resource Description
assets/textkernel.svg Responsive SVG logo
assets/textkernel@2x.png Double-sized PNG logo for high resolution displays (1726x300 pixels)
assets/textkernel.png Small-scale PNG logo (863x150 pixels)
assets/textkernel-tagline.svg Responsive SVG logo with tagline
assets/textkernel-tagline@2x.png Double-sized PNG logo with tagline for high resolution displays (1489x400 pixels)
assets/textkernel-tagline.png Small-scale PNG logo with tagline (745x200 pixels)
assets/favicons/ Favicons for various devices

Nice! is bundeled with some frequently used assets such as the Textkernel logo. Always make sure to use these readily available assets instead of using customized ones. Assets that are bundeled with Nice! are guaranteed to be of high quality and to use accurate colors.
The use of SVG images is highly recommended because as these can scale any size without quality loss.

Getting started

Install with NPM

Nice! is available as an NPM module. Install it with the following command:

$ npm install @textkernel/nice

Clone the repository

Alternatively, you can clone the Github repository. This will not include the precompiled dist/ folder.

$ git clone https://github.com/textkernel/nice.git

Start with a basic HTML structure

Make sure you use the HTML5 doctype and apply the necessary meta-tags:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="dist/nice.min.css" /> <!-- Optional favicons in multiple sizes --> <link rel="icon" href="assets/favicons/textkernel/favicon-16x16.png" /> <link rel="icon" href="assets/favicons/textkernel/favicon-32x32.png" /> <link rel="icon" href="assets/favicons/textkernel/favicon-96x96.png" /> </head> <body> ... </body> </html>

Font icons

It is recommended that you use FontAwesome with Nice!, however, you need to include it yourself (either by linking to a CDN or downloading the package into your project).
A custom font iconset is included for all Textkernel products listed below. The font family is called “TKProducts”. All font icons are scalable vector graphics, meaning they can be resized without loss of quality.

Please note FontAwesome is not included with Nice!. Only Textkernel brand icons are.

<i class="product-icon extract"></i> <i class="product-icon harvester"></i> <i class="product-icon jobfeed"></i> <i class="product-icon match"></i> <i class="product-icon search"></i> <i class="product-icon sourcebox"></i> <i class="product-icon wte"></i> <i class="product-icon tkportal"></i> <i class="product-icon connector"></i> <i class="product-icon textkernel"></i>

Grid system

.nice-container
.nice-row
.nice-col-4
.nice-col-3
.nice-col-5
.nice-row
.nice-shift-3.nice-col-5
.nice-col-4
Container .nice-container
Full-width container .nice-container-fluid
Row .nice-row
Default column .nice-col-[1-12]
Column (mobile breakpoint) .nice-col-mobile-[1-12]
Column (tablet breakpoint) .nice-col-tablet-[1-12]
Column (desktop breakpoint) .nice-col-desktop-[1-12]
Column (mobile and tablet) .nice-col-mobile-and-tablet-[1-12]
Offset .nice-shift-[1-11]
Offset (mobile breakpoint) .nice-shift-mobile-[1-11]
Offset (tablet breakpoint) .nice-shift-tablet-[1-11]
Offset (desktop breakpoint) .nice-shift-desktop-[1-11]

Nice! has an integrated grid system as well as a range of Flexbox helper classes.

Container

Containers have a maximum width and center themselves relatively to their parent element in the DOM tree. There are two types of containers: .nice-container (fixed-width) and .nice-container-fluid (full-width).

Rows

Rows can be used for wrapping columns horizontally and should be used inside a container.

Columns

The grid system is based on a 12-column layout, meaning that all columns in a row should add up to 12. A column can have an offset by using .nice-shift-x, where `x` represents the number of columns it should be shifted to the right with a maximum of 11. Columns should be used as direct children of a row.

Responsive grid

Columns can span variable widths by targeting specific media types. Suppose you want to have a 12-column layout on a desktop-sized viewport, but have it span 6 columns on a mobile view: you would then use .nice-col-12 .nice-col-mobile-6. Similar classes are available for desktop and tablet view. Make sure to always specify a general column size (without specific media target).

Flexible grid

Please note: Flexible grids are only supported by modern browsers. If your application requires comprehensive cross browser compatibility, it is recommended to only use the regular grid system for your layout.

  • .nice-flex-container

    Defines the flex container and enables flex content for all direct children.
  • .align-[start|end|center|baseline|stretch]

    Defines the way in which items are aligned along the cross axis on the current line.
  • .justify-[start|end|center|space-between|space-around]

    Defines how the items are distributed along the main axis.
  • .no-wrap .wrap .wrap-reverse

    Change the way in which items are wrapped, and in which direction (rtl / ltr).
  • .grow-[stretch|double]

    Defines the ability for a flex item to grow if necessary. If all items are set to `.grow-stretch`, the remaining space in the container will be distributed equally to all children. If one of the children has `.grow-double`, the remaining space would take up twice as much space as the others (or it will try to, at least).
  • .direction-[row|row-reverse|column|column-reverse]

    Establishes the main-axis, thus defining the direction flex items are placed in the flex container.

Page header

You can see an example of this component at the top of this page. The header component is responsive out of the box, meaning the menu becomes off-canvas and toggleable on mobile views.

In case you need the header to stick to the top of the viewport, apply the additional fixed class to the top level header element and nice-fixed-header to the body element.

<header class="nice-header fixed"> <div class="nice-header-container"> <h1 class="nice-header-brand"> <a href="#"> <!-- SVG logo with PNG fallback. Size may need adjustment. --> <svg height="30" width="172"> <image xlink:href="assets/textkernel.svg" src="assets/textkernel@2x.png" height="30" width="172" /> </svg> </a> </h1> <div class="nice-header-collapse"> <span class="nice-header-product"> Product! v1.0 </span> <form action="#" class="nice-header-form"> <div class="nice-header-input-wrapper"> <input type="text" placeholder="Search..." class="nice-form-control" /> </div> </form> <ul class="nice-header-menu menu-pills"> <li class="align-left"> <a href="#" class="icon fa-book"> Link </a> <ul> <li class="has-children align-left"> <a href="#">Sub-item</a> <ul> <li> <a href="#"> Sub-sub-item </a> </li> </ul> </li> <li> <a href="#">Sub-item</a> </li> </ul> </li> <li class="highlight primary brand accent info good warning bad"> <a href="#"> Link </a> </li> <li class="fixed-width w125 w150 w175 w200"> <a href="#" target="_blank"> Link </a> </li> <li> <a href="http://textkernel.com" target="_blank"> Textkernel </a> </li> </ul><!-- .nice-header-menu.menu-pills --> <ul class="nice-header-menu menu-alt"> <li> <a href="#" class="icon fa-external-link"> Alternative link </a> </li> </ul><!-- .nice-header-menu.menu-alt --> </div><!-- .nice-header-collapse --> <!-- A .nice-header-toggle is optional: Only include it when your app is responsive and you use the off-canvas menu --> <button type="button" class="nice-header-toggle collapsed"> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> </header>
Top level menu items accept certain optional classes that are listed below
Class Description Variations
highlight Adds a bottom border highlight primary|good|bad|warning|info
fixed-width Enforces a fixed-width on the menu item (100 pixels by default) w125|w150|w175|w200

Buttons

The justified button group uses table layout by default for better browser support. Alternatively, you can omit the justified class and apply Flexbox classes instead.

Dropdowns can be used in button groups as well.

<a href="#" class="nice-btn primary good bad warning link small large bold disabled"> Primary button </a> <a href="#" class="nice-btn icon fa-check"> Button with icon </a> <div class="nice-btn-group stacked small large"> <button type="button" class="nice-btn"> First </button> <button type="button" class="nice-btn"> Second </button> <button type="button" class="nice-btn"> Third </button> <div class="nice-dropdown"> <button class="nice-btn"> Dropdown <i class="icon fa-angle-down"></i> </button> <ul class="dropdown-menu"> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li class="separator"></li> <li> <a href="#">Item 3</a> </li> </ul> </div> </div>

Toggle switches

Toggle switches are built on top of checkboxes and labels and are functionally the same. Don't forget to provide your checkbox with an id, and refer to that id in the for-property of the corresponding label.
When adding .off-muted to the toggle button, the (optional) label text will be gray when the switch is turned off.

<input type="checkbox" class="nice-toggle" id="toggle1" checked disabled /> <label class="nice-toggle-btn accent primary info good warning bad off-muted small" for="toggle1">Optional label text</label>

Dropdowns

<div class="nice-dropdown drop-up align-left"> <button class="nice-btn"> Dropdown <i class="icon fa-angle-down"></i> </button> <ul class="dropdown-menu shown"> <li class="heading"> <span>This is a dropdown heading</span> </li> <li class="description"> <span>This is a short description for this dropdown</span> </li> <li> <a href="#">Item 1</a> </li> <li class="info good warning bad"> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> <li class="separator"></li> <li> <a href="#">Separated item</a> </li> <li class="separator"></li> <li class="disabled"> <a href="#">Disabled item</a> </li> </ul> </div>

Scale selection

The use of span.nice-scale-label for tick labels is optional.

<div class="nice-scale"> <ol class="nice-scale-selection"> <li> <label> <input type="radio" name="scale-1" value="1" /> <span></span> <span class="nice-scale-label">1</span> </label> </li> <li> <label> <input type="radio" name="scale-1" value="2" /> <span></span> <span class="nice-scale-label">2</span> </label> </li> <li> <label> <input type="radio" name="scale-1" value="3" /> <span></span> <span class="nice-scale-label">3</span> </label> </li> <li> <label> <input type="radio" name="scale-1" value="4" /> <span></span> <span class="nice-scale-label">4</span> </label> </li> <li> <label> <input type="radio" name="scale-1" value="all" /> <span></span> <span class="nice-scale-label">All</span> </label> </li> </ol> </div>

Range slider

The range slider element is based on the HTML5 range slider input type, which isn't supported by all browsers. Before implementation, make sure all browsers that your application should support are covered.

<input type="range" class="nice-range-slider" min="100" max="1000" step="50" value="150" />

Form elements

My field
<form> <div class="nice-form-group"> <label for="demo-input-1">Some label</label> <input type="text" placeholder="Nice input..." class="nice-form-control" id="demo-input-1" /> </div> <div class="nice-form-group"> <label for="demo-input-2">Password</label> <input type="password" placeholder="Nice password..." class="nice-form-control" id="demo-input-2" /> </div> <div class="nice-form-group"> <label for="demo-input-3" class="small">Small form control</label> <input type="text" placeholder="This field is smaller..." class="nice-form-control small" id="demo-input-3" /> </div> <!-- Single selects --> <div class="nice-form-group"> <select class="nice-form-control"> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> <option>Item 4</option> <option>Item 5</option> </select> </div> <!-- Multiselects --> <div class="nice-form-group"> <select class="nice-form-control" size="5" multiple="multiple"> <option>Item 1</option> <option>Item 2</option> <option>Item 3</option> <option>Item 4</option> <option>Item 5</option> </select> </div> <!-- Textareas --> <div class="nice-form-group"> <textarea class="nice-form-control" placeholder="Nice textarea..."></textarea> </div> <!-- Input groups and addons --> <div class="nice-form-group"> <div class="nice-control-group small"> <span class="nice-input-addon info good warning bad"> My field </span> <input type="text" class="nice-form-control" placeholder="Some placeholder..." /> <span class="nice-control-group-btn"> <button type="button" class="nice-btn"> Try me </button> </span> </div> </div> <!-- Radio buttons --> <div class="nice-form-group"> <div class="nice-radio"> <label> <input type="radio" name="nice-radio-example" /> Radio A </label> </div> </div> <!-- Checkboxes --> <div class="nice-form-group"> <div class="nice-checkbox"> <label> <input type="checkbox" name="nice-checkbox-example[]" /> Checkbox A </label> </div> </div> </form> <!-- Inline forms --> <form class="nice-form-inline"> <div class="nice-form-group"> <label for="demo-input-3">Name</label> <input type="text" class="nice-form-control" placeholder="Foo Bar" id="demo-input-3" /> </div> <div class="nice-form-group"> <label for="demo-input-4">Email</label> <input type="text" class="nice-form-control" placeholder="bar.foo@textkernel.com" id="demo-input-4" /> </div> <button class="nice-btn"> <i class="icon fa-envelope-o"></i> </button> </form> <!-- Horizontal forms --> <form class="nice-form-horizontal"> <div class="nice-form-group"> <label for="demo-input-5" class="nice-col-3 nice-control-label">Name</label> <div class="nice-col-9"> <input type="text" class="nice-form-control" placeholder="Foo Bar" id="demo-input-5" /> </div> </div> <div class="nice-form-group"> <label for="demo-input-6" class="nice-col-3 nice-control-label">Email</label> <div class="nice-col-9"> <input type="text" class="nice-form-control" placeholder="bar.foo@textkernel.com" id="demo-input-6" /> </div> </div> <div class="nice-form-group"> <div class="nice-col-9 nice-shift-3"> <button class="nice-btn"> <i class="icon fa-envelope-o"></i> Submit message </button> </div> </div> </form>

Tags

<div class="nice-tags-container"> <div class="nice-tag primary accent muted info good warning bad"> <span class="nice-tag-label"> Germany </span> <span class="nice-tag-badge"> 16 <div class="nice-tag-dropdown hover"> <ul> <li> <a href="#"> Item 1 </a> </li> <li> <a href="#"> Item 2 </a> </li> </ul> </div> </span> <button class="nice-tag-btn"> <i class="icon fa-trash-o"></i> </button> </div> <input type="text" class="nice-tag-input" placeholder="Add new tag..." /> </div>

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo at nulla convallis iaculis at ac urna. Nullam finibus sodales elementum. Vestibulum eget semper urna. Fusce gravida turpis eu sem tempus, quis sodales libero pellentesque. Sed tempus augue et felis varius, nec bibendum lorem pulvinar

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo at nulla convallis iaculis at ac urna. Nullam finibus sodales elementum. Vestibulum eget semper urna. Fusce gravida turpis eu sem tempus, quis sodales libero pellentesque. Sed tempus augue et felis varius, nec bibendum lorem pulvinar
  • This tab is hidden

Wrapping the tab panel inside .nice-tabs-wrapper is optional. You might not want to use it when integrating the tabs inside another component such as a panel or modal dialog.

<div class="nice-tabs-wrapper"> <!-- Wrapper is optional: omit when integrating the tab panel inside another component (e.g. modal or panel) --> <ul class="nice-tabs small bold"> <li class="current"> <a href="#" class="icon fa-home"> First <span class="nice-badge"> 96 </span> </a> </li> <li class="brand"> <a href="#">Second</a> </li> <li class="accent"> <a href="#">Third</a> </li> <li class="primary"> <a href="#">Fourth</a> </li> <li> <a href="#">Fifth</a> </li> </ul> <ul class="nice-tab-content"> <li class="current"> This tab is currently active </li> <li> This tab is hidden </li> </ul> </div>

Modal dialogs

This is a modal dialog

A less important sub heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim sapien non orci lobortis interdum. Sed aliquam lacus ut varius molestie. Pellentesque suscipit ligula nec ex vestibulum, facilisis tristique purus sagittis. Morbi ullamcorper felis dolor, quis ultrices orci interdum at. Sed quam ligula, ornare non metus ullamcorper, posuere volutpat sem. Nunc eu fringilla ligula. Phasellus eget maximus neque, hendrerit vestibulum justo.

Use .viewport-center to center your modal both vertically and horizontally with respect to browser viewport. Additionally, you can increase the size of your centered modal dialog using .tall and .wide. The latter will only take effect when the modal is centered.
For modal overlays (which will cover everything behind the modal under a black, transparent overlay), you can use .nice-modal-overlay. It is recommended to place this element directly before closing the body and to place the modal element inside the overlay element.

<div class="nice-modal accent primary info good warning bad viewport-center tall wide"> <div class="nice-modal-content"> <div class="nice-modal-header"> <a href="#" class="nice-modal-close"> <i class="icon fa-times"></i> </a> <h4>This is a modal dialog</h4> </div> <div class="nice-modal-sub"> A less important sub heading </div> <div class="nice-modal-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dignissim sapien non orci lobortis interdum. Sed aliquam lacus ut varius molestie. Pellentesque suscipit ligula nec ex vestibulum, facilisis tristique purus sagittis. Morbi ullamcorper felis dolor, quis ultrices orci interdum at. Sed quam ligula, ornare non metus ullamcorper, posuere volutpat sem. Nunc eu fringilla ligula. Phasellus eget maximus neque, hendrerit vestibulum justo. </div> <div class="nice-modal-footer"> <a href="javascript:void(0);" class="nice-btn link icon fa-question"> Help </a> <div class="nice-btn-group pull-right"> <button class="nice-btn">Cancel</button> <button class="nice-btn primary">Save</button> </div> </div> </div> </div>

Stepper

Wizard

Steppers are useful for sequential task flows. You can also wrap them inside modal dialogs. Use <small> within step labels to provide additional information about that step.

<div class="nice-stepper"> <div class="nice-stepper-title"> <i class="fa fa-magic"></i> Wizard </div> <div class="nice-stepper-content"> <ol class="nice-stepper-steps"> <li class="nice-stepper-step step-past"> <a href="#" class="step-container"> <div class="step-bullet"> <i class="fa fa-check"></i> </div> <div class="step-label"> First step </div> </a> </li> <li class="nice-stepper-step step-past step-previous"> <a href="#" class="step-container"> <div class="step-bullet"> <i class="fa fa-check"></i> </div> <div class="step-label"> Second step <small> Optional </small> </div> </a> </li> <li class="nice-stepper-step step-current"> <a href="#" class="step-container"> <div class="step-bullet"> 3 </div> <div class="step-label"> Last step </div> </a> </li> </ol> <div class="nice-stepper-body"> <p> Here goes your content. </p> </div> </div> <div class="nice-stepper-footer"> <div class="stepper-footer-left"> <div class="nice-btn-group"> <button type="button" class="nice-btn"> Previous </button> <button type="button" class="nice-btn" disabled> Next </button> </div> </div> <div class="stepper-footer-right"> <button type="button" class="nice-btn primary"> Done </button> </div> </div> </div>

Login dialog

The login dialog should be used on a page without further content, other than an (optional) header and footer. The positions itself horizontally in the center of the parent container. Any other positioning should be done either with Javascript, or by applying flex classes. The .nice-logo-brand, .nice-login-intro-logo and .nice-logo-version elements are optional. Make sure to clearly state the application name the user is signing in to.

Try clicking 'Sign in' to see the loading animation

<div class="nice-login"> <div class="nice-login-brand"> <span class="text-brand">textkernel</span> </div> <div class="nice-login-intro"> <div class="nice-login-intro-logo"> <i class="product-icon sourcebox"></i> </div> <div class="nice-login-intro-content"> Welcome to <strong>Textkernel</strong>. Please log in using your credentials to access your account. </div> <div class="nice-login-loading shown"></div> </div> <div class="nice-login-content"> <div class="nice-form-group"> <label for="nice-login-username">Username</label> <input type="email" placeholder="Username..." class="nice-form-control" id="nice-login-username" /> </div> <div class="nice-form-group"> <label for="nice-login-account">Account</label> <input type="text" placeholder="Account name..." class="nice-form-control" id="nice-login-account" /> </div> <div class="nice-form-group"> <label for="nice-login-password">Password</label> <input type="password" placeholder="Password..." class="nice-form-control" id="nice-login-password" /> </div> <div class="nice-form-group"> <input type="checkbox" class="nice-toggle" id="login-remember" /> <label class="nice-toggle-btn" for="login-remember"> Remember me on this device </label> </div> </div> <div class="nice-login-footer"> <a href="#" class="nice-btn link icon fa-question">Lost your credentials?</a> <div class="nice-btn-group pull-right"> <button type="button" class="nice-btn"> Cancel </button> <button type="submit" class="nice-btn primary icon fa-sign-in"> Sign in </button> </div> </div> <div class="nice-login-version"> Textkernel v1.2.3 <span class="text-brand pull-right"> by Textkernel </span> </div> </div>

Breadcrumbs

<ol class="nice-breadcrumb small"> <li> <a href="#" class="icon fa-home"> Level 1 </a> </li> <li> <a href="#"> Level 2 </a> <ul> <li> <a href="#"> Some child node 1 </a> </li> <li> <a href="#"> Some child node 2 </a> </li> <li> <a href="#"> Some child node 3 </a> </li> </ul> </li> <li> <a href="#" class="current"> Level 3 </a> </li> </ol>

Pagination

<nav> <ul class="nice-pagination bordered small large" role="navigation"> <li class="disabled"> <span> &laquo; Previous </span> </li> <li class="current"> <span>1</span> </li> <li> <a href="#">2</a> </li> <li> <a href="#">3</a> </li> <li> <a href="#">4</a> </li> <li> <a href="#">5</a> </li> <li> <a href="#">Next &raquo;</a> </li> </ul> </nav>

Menus

<ul class="nice-menu"> <li class="current"> <a href="#" class="icon fa-home">Home</a> </li> <li> <a href="#" class="icon fa-map-pin">Cities</a> </li> <li> <a href="#">Regions</a> </li> <li class="disabled"> <a href="#" class="icon fa-globe">Countries</a> </li> </ul> <!-- Stacked menus --> <ul class="nice-menu stacked narrow has-icons"> <li class="current"> <a href="#" class="icon fa-home">Home</a> </li> <li> <a href="#" class="icon fa-map-pin">Cities</a> <ul> <li> <a href="#">Amsterdam</a> </li> <li> <a href="#">Paris</a> </li> <li class="disabled"> <a href="#">Berlin</a> </li> <li> <a href="#">Rome</a> </li> <li> <a href="#">Madrid</a> </li> </ul> </li> <li class="pad-left"> <a href="#">Regions</a> </li> <li class="disabled"> <a href="#" class="icon fa-globe">Countries</a> </li> </ul>

Panels

This is a panel without heading
Panel with heading
This panel has a heading
Very well
This is a good panel
This panel has a inverse heading
For Your Information test
Panels with table
This panel has a table
# City Country
1 Amsterdam The Netherlands
2 Paris France
2 Berlin Germany
3 Rome Italy
4 Madrid Spain

Panels are required to have a .nice-panel-content, .nice-stepper or table.nice-table child, and can have an optional .nice-panel-heading. A panel heading can either be the first of last child of .nice-panel. Panels can additionally be provided with any contextual color class (including "brand"). This will affect the panel heading background color as well as the panel shadow color.

<div class="nice-panel brand primary info good warning bad gray"> <div class="nice-panel-heading"> Optional panel heading </div> <div class="nice-panel-content"> Panel content goes here </div> <div class="nice-panel-heading"> The panel heading can also go at the bottom </div> </div>

Stacked lists

  • Search!
  • Working Hours

  • Advertiser Type

  • Item C
  • Item D
<nav class="nice-stacked-list sidebar"> <a class="list-item" href="#"> Menu item A <span class="nice-badge primary accent info good warning bad"> 23 </span> </a> ... </nav> <ul class="nice-stacked-list sidebar left"> <li class="list-item"> <div class="nice-stacked-list-controls"> <a href="#" class="nice-stacked-list-control">Button 1</a> <a href="#" class="nice-stacked-list-control">Button 2</a> </div> </li> <li class="list-item list-heading"> Search! </li> <li class="list-item"> <h3 class="item-heading"> Item heading </h3> Item A </li> <li class="list-item"> Item B </li> ... </ul>

Alerts

Hey you! Here is some information
Warning
Heads up This is a warning
Uh oh... Something is wrong
Great success All good!
Dismiss

If you want your alert to stick to a certain corner of the viewport, try adding .position-fixed together with .top|.bottom .left|right.

<div class="nice-alert info good warning bad top bottom left right position-fixed"> <strong>Hey you!</strong> Here is a notification </div> With heading <div class="nice-alert warning"> <div class="nice-alert-heading"> Warning </div> <strong>Heads up</strong> This is a warning </div> With dismiss icon <div class="nice-alert bad"> <a href="#" class="nice-alert-dismiss"> <i class="icon fa-angle-down"></i> </a> <strong>Uh oh...</strong> Something is wrong </div> With dismiss button on the side <div class="nice-alert good"> <div class="nice-alert-wrapper"> <div class="nice-alert-content"> <strong>Great success</strong> All good! </div> <a href="#" class="nice-alert-button"> Dismiss </a> </div> </div> </div>

Tooltips & Popovers

This is a tooltip
This is a popover
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat diam eget tortor facilisis, ut iaculis augue feugiat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat diam eget tortor facilisis, ut iaculis augue feugiat.
<!-- Tooltips --> <div class="nice-tooltip top bottom left center right info good warning bad"> This is a tooltip </div> <!-- Popovers --> <div class="nice-popover no-arrow top bottom left center right info good warning bad"> <div class="nice-popover-title"> This is a popover </div> <div class="nice-popover-body"> <img src="..." class="nice-popover-image right" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In placerat diam eget tortor facilisis, ut iaculis augue feugiat. </div> <div class="nice-popover-controls"> <a href="#" class="nice-popover-control text-bold">Show me more</a> <a href="#" class="nice-popover-control">Dismiss</a> </div> </div>

Cards

This is a card
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper nulla ac quam hendrerit pharetra.
In semper vel lectus sed finibus. Donec in erat risus. Aenean in lectus massa. Phasellus id malesuada arcu, vel ultricies enim
In semper vel lectus sed finibus. Donec in erat risus. Aenean in lectus massa. Phasellus id malesuada arcu, vel ultricies enim
Yet another card
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper nulla ac quam hendrerit pharetra.

Textkernel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper nulla ac quam hendrerit pharetra.
<summary class="nice-card primary brand good warning bad has-controls"> <div class="nice-card-title"> <h3> Textkernel </h3> </div> <img class="nice-card-image" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=300%C3%97150&w=300&h=150" /> <div class="nice-card-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ullamcorper nulla ac quam hendrerit pharetra. </div> <div class="nice-card-sub icon fa-reply"> In semper vel lectus sed finibus. Donec in erat risus. Aenean in lectus massa. Phasellus id malesuada arcu, vel ultricies enim </div> <div class="nice-card-controls"> <a href="#" class="nice-card-control"> Dismiss </a> <a href="#" class="nice-card-control disabled"> Read more </a> </div> </summary>

Progress and loading

65%
40%
100%
65%
50%
Loading...
<div class="nice-progress accent brand good bad pulse"> <div class="nice-progress-fill" style="width: 65%;"> 65% </div> </div>
 
 
 
 
 
<div class="nice-loading medium large brand primary good bad"></div>

Code blocks

Sample API response JSON
{ "$schema": "http://json-schema.org/draft-04/schema#", "title": "Product set", "type": "array", "items": { "title": "Product", "type": "object", "properties": { "id": { "description": "The unique identifier for a product", "type": "number" }, "name": { "type": "string" }, "price": { "type": "number", "minimum": 0, "exclusiveMinimum": true }, "tags": { "type": "array", "items": { "type": "string" }, "minItems": 1, "uniqueItems": true }, "dimensions": { "type": "object", "properties": { "length": {"type": "number"}, "width": {"type": "number"}, "height": {"type": "number"} }, "required": ["length", "width", "height"] }, "warehouseLocation": { "description": "Coordinates of the warehouse with the product", "$ref": "http://json-schema.org/geo" } }, "required": ["id", "name", "price"] } }

You can also use inline code blocks where necessary.

<div class="nice-code-container"> <code class="restrain-s restrain-m restrain-l restrain-max"> Your code goes here... </code> <div class="nice-code-heading brand good warning bad icon fa-code"> Sample API response <span class="nice-code-syntax"> JSON </span> </div> </div> <p> You can also use <code class="inline">inline code blocks</code> where necessary. </p>

Tables

# City Region Country
1 Amsterdam Noord-Holland The Netherlands
2 Paris Île-de-France France
2 Berlin Brandenburg Germany
3 Rome Lazio Italy
4 Madrid Madrid Spain

For responsive applications, you can wrap tables inside a .nice-responsive-container. This will add a horizontal scrollbar to the responsive container whenever a table exceeds the viewport width.
Table rows and cells can be individually provided with a contextual background color.

<table class="nice-table condensed striped bordered hover"> <thead> <tr> <th>#</th> <th>City</th> <th>Region</th> <th>Country</th> </tr> </thead> <tbody> <tr class="info good warning bad"> <th scope="row">1</th> <td>Amsterdam</td> <td>Noord-Holland</td> <td>The Netherlands</td> </tr> <tr> <th scope="row">2</th> <td class="info good warning bad">Paris</td> <td>Île-de-France</td> <td>France</td> </tr> <tr> <th scope="row">2</th> <td>Berlin</td> <td>Sachsen-Anhalt</td> <td>Germany</td> </tr> <tr> <th scope="row">3</th> <td>Rome</td> <td>Lazio</td> <td>Italy</td> </tr> <tr> <th scope="row">4</th> <td>Madrid</td> <td>Madrid</td> <td>Spain</td> </tr> </tbody> </table>

Helper classes

Class name Description
.nice-circle Applies 50% border radius
.nice-bg-[name] Applies any color from them color scheme as background color
.clearfix Clears floating elements, to be applied to parent container
.shown Adds display block
.hidden Adds display none
.invisible Adds visibility hidden
.pull-[left|right] Floats an element left or right
.overflow-[hidden|visible|scroll|auto] Sets the type of overflow handling
.overflow-x-[hidden|visible|scroll|auto] Sets the type of overflow handling for the X-axis
.overflow-y-[hidden|visible|scroll|auto] Sets the type of overflow handling for the Y-axis
.center-block Forces a static positioned element to the center of its parent container
.position-[fixed|relative|absolute|static] Sets the element positioning method
.position-[top|right|bottom|left] Sets the element top, right, bottom or left position to 0. All combinations are possible
.cursor-[pointer|move|grab|not-allowed|help|wait|text|zoom-in|zoom-out] Forces a certain type of cursor to be displayed when pointing on that element
.no-animation Disables animations on the current node
Text styling
.text-color-[name] Applies any color from them color scheme to the element text
.text-align[left|right|center|justify] Sets the elements text alignment
.text-bold Apply bold font weight
.text-italic Apply italic font style
.text-small-caps Apply small-caps font style
.text-uppercase Apply uppercase text style
.text-brand Renders the text in the Textkernel brand style
.text-default Resets all text properties to the Nice! default

Nice! comes with a set of helper classes that can be applied to arbitrary elements that you want to provide with a certain style.

Browser support

Nice! supports Internet Explorer 10 and newer versions except for specific modules such as Flexbox that are only supported in modern browsers. From version 2.0.0 onwards you can use Autoprefixer in your build process to apply any vendor prefixes according to your compatibility requirements (e.g. -webkit-, -moz-, -ms-), as required by various (older) browsers. It's included with Nice!'s default build script.
Please check this reference for a detailed overview of CSS3 browser support.

Browser Support Limitations
Internet Explorer 9 Limited
  • No transitions
  • No animations
  • No text shadows
  • No Flexbox
Internet Explorer 10 Good Uses fallbacks for limited Flexbox support
Internet Explorer 11+ Full support