Basic elements

Requires HTML5 doctype

The NICE UI library makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

<!DOCTYPE html>
<html lang="en">
...
</html>

Global settings

Typography and links

The NICE UI library sets basic global display, typography, and link styles. Specifically, we:

Remove margin on the body
Set the background-color for the whole document
Set the base font-family, font-size, and line-heightto our typographic baseline and vertical grid
Set the global link color and underline style

These styles are taken from the NICE Brand guidelines 2014 and will be kept in line with these corporate guidelines.

CSS Reset

The NICE UI library overrides the basic HTML5 elements to create a standard visual style across all supported browsers.

Basic usage

The NICE UI library is broken down into a set of minified css files which can be included in web pages in a variety of ways to suit a variety of requirements.

To include the basic core framework you need to include the following link in your HTML5 document <head>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.core.css">

Be aware: The core of the framework covers HTML5 elements only.

Plugins

If you want to use any of the additional basic elements of the framework, such as layouts or iconography, they will need to be included separately.

<!-- Layouts -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.layouts.css">

<!-- Iconography -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.iconography.css">

<!-- Navigation -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.navigation.css">

Combined

If you require all the basic elements as well as the plugins then you can simply include all bundles in one, like so;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.css">

Basic HTML template

With a brief intro into the contents out of the way, we can focus on putting the NICE UI library to use. To do that, we'll utilize a basic HTML template that includes everything we mentioned in the previous section.

Now, here's a look at a typical HTML file:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <title>NICE.Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

To make this a NICE.Bootstrapped template, just include the appropriate CSS and JS files:

<!DOCTYPE html>
<html>
  <head>
    <meta name="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <title>The NICE UI library basic HTML template</title>

    <!--[if lt IE 9]>
    <script src="https://cdn.nice.org.uk/v4.0.0/scripts/html5shiv.js"></script>
    <![endif]-->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/ui.css">

    <!--[if IE 7]>
    <link rel="stylesheet" href="https://cdn.nice.org.uk/v4.0.0/css/glyhs-ie7.css" />
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.nice.org.uk/v4.0.0/scripts/jquery.js"></script>
    <script src="https://cdn.nice.org.uk/v4.0.0/scripts/bootstrap.js"></script>
    <script src="https://cdn.nice.org.uk/v4.0.0/scripts/ui.js"></script>
  </body>
</html>

And you're set! With those few files added, you can begin to develop any site or application with Bootstrap.