Deprecated!

NICE.Bootstrap is deprecated and all new front-end work should use the Design System

Getting started

Overview of the project, its contents, and how to get started with a simple template.

1. File structure

Within the download you'll find the following file structure and contents, logically grouping common assets and providing both compiled and minified variations.

The structure of (the compiled) NICE.Bootstrap looks something like this:

bootstrap/
├── Content/
│   ├── font-awesome/
│   │   ├── fontawesome-webfont.eot
│   │   ├── fontawesome-webfont.svg
│   │   ├── fontawesome-webfont.ttf
│   │   ├── fontawesome-webfont.woff
│   │   └── FontAwesome.otf
│   ├── nice/
│   │   └── favicon.ico
│   ├── nice-glyphs/
│   │   ├── NICE-Glyphs.dev.svg
│   │   ├── NICE-Glyphs.eot
│   │   ├── NICE-Glyphs.svg
│   │   ├── NICE-Glyphs.ttf
│   │   └── NICE-Glyphs.woff
│   ├── NICE.bootstrap.css
│   ├── NICE.bootstrap.responsive.css
│   ├── NICE.icons-ie7.css
└── Scripts/
    ├── twitter.bootstrap.js
    ├── twitter.bootstrap.min.js
    ├── NICE.bootstrap.js
    └── NICE.bootstrap.min.js

This is the most basic form of NICE.Bootstrap: compiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (NICE.bootstrap.*), as well as compiled and minified CSS and JS (NICE.bootstrap.min.*).

Please note that all JavaScript plugins require jQuery to be included.

2. What's included

NICE.Bootstrap comes equipped with HTML, CSS, and JS for all sorts of things, but they can be summarized with a handful of categories visible at the top of the Style Guide.

Guide sections

Scaffolding

Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.

Basic elements

Styles for common HTML5 elements like typography, tables, forms, and buttons. Also includes Font Awesome 3, an icon set full of hundreds of useful icons, as well as NICE.Glyphs, an icon set with our own specialist designed glyphs.

Advanced elements

Styles and snippets for common interface elements like tabs and pills, navbars, alerts, headers, and more.

Interactive components

A collection of JavaScript plugins that provide interactive components such as tooltips, popovers, modals, and more.

Advanced components

A collection of advanced JavaScript plugins that provide application like capabilites such as remote content loaders, hypermedia interactivity, integrated error notification, and more.

List of components

  • Button groups
  • Button dropdowns
  • Navigational tabs, pills, and lists
  • Navbar
  • Labels
  • Badges
  • Page headers and hero unit
  • Thumbnails
  • Alerts
  • Progress bars
  • Modals
  • Dropdowns
  • Tooltips
  • Popovers
  • Accordion
  • Carousel
  • Typeahead

This guide will walk through these components individually in more detail.

Global settings

Requires HTML5 doctype

NICE.Bootstrap 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>

Typography and links

NICE.Bootstrap sets basic global display, typography, and link styles. Specifically, we:

  • Remove margin on the body
  • Set background-color: white; on the body
  • Use the @baseFontFamily, @baseFontSize, and @baseLineHeight attributes as our typographic base
  • Set the global link color via @linkColor and apply link underlines only on :hover

These styles are taken from the standard Colour palette for NICE and will be kept in line with the corporate guidelines.

CSS Reset

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

3. Basic HTML template

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

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

  <!DOCTYPE html>
  <html>
    <head>
      <title>NICE.Bootstrap 101 Template</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </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>
      <title>NICE.Bootstrap 101 Template</title>
      <meta name="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <link href="http://fonts.googleapis.com/css?family=Lato:200normal,200italic,300normal,300italic,400normal,400italic,700normal,700italic,900normal,900italic" rel="stylesheet" media="screen" />
      <link href="/Content/NICE.bootstrap.css" rel="stylesheet" media="screen" />
      <!--[if IE 7]>
      <link href="./Content/NICE.icons-ie7.css" rel="stylesheet" media="screen" />
      <![endif]-->
      <!--[if lt IE 9]>
      <script src="./Scripts/html5shiv/html5shiv.js" type="text/javascript"></script>
      <![endif]-->
    </head>
    <body>
      <h1>Hello, world!</h1>
      <script src="./Scripts/jquery/jquery-1.10.2.min.js"></script>
      <script src="./Scripts/twitter.bootstrap.min.js"></script>
      <script src="./Scripts/NICE.bootstrap.min.js"></script>
    </body>
  </html>

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

4. Patterns

Move beyond the base template with a few example layouts. We encourage folks to iterate on these examples and not simply use them as an end result.

General layouts

  • Blank Page

    Barebones HTML with all the Bootstrap CSS and JavaScript included.

  • Standard Page

    Example of a standard page layout with a secondary content column for callouts and related resources

Corporate pages

This set of patterns shows how the bootstrap is used to create visually interesting pages for the corporate area of the main website.

  • About us

    Example of a corporate page layout used to display corporate information

  • Who we are

    Example of a corporate page layout used to display organisation structure

  • News and features

    Example layout designed to promote current news, features and social interaction

  • News article

    Example layout designed to promote current news, features and social interaction

  • Video and audio

    Example layout designed to promote current videos and podcasts

Standard and indicators

This set of patterns shows how the bootstrap is used to create the functional pages of the standards and indicators area of the main website.

  • Standards and indicators

    Example layout designed to allow the navigation of standards and indicators

  • Indicators page layout

    Example layout for displaying the information relating to a standard or indicator

BNF

This set of patterns shows how the bootstrap is used to create the functional pages of the BNF and BNFC website.

  • BNF

    Example layout designed to allow the navigation of BNF and BNFC

  • BNF Drug Result

    Example layout for displaying the information relating to a BNF Drug Monograph

Visual tools

  • Responsive viewer

    A simple tool for giving a rough idea of how a website would look in different size browser windows.