Interface

DRG Bootstrap

All new products being developed must use DRG Bootstrap as the front-end framework. DRG Bootstrap uses the original Bootstrap framework and files but adds a custom theme to create a distinct style for our products.

How to use

The source files for DRG Bootstrap is stored in our private Github repository – access it here. Simply link to the four files as shown below.

You should also always be using the latest version in your application. We recommend pulling this in via Bower. There is an Ember addon for DRG Bootstrap that should be used for all Ember applications.

If you do not have access to these Github repositories, then get in touch.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Your Product Name</title>
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS and Favicon -->
<link href="assets/css/drg-bootstrap.css" media="all" rel="stylesheet" type="text/css">
<link href="assets/css/fontawesome.css" media="all" rel="stylesheet" type="text/css">
<link href="assets/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
...
YOUR PAGE CONTENT
...
 
<!-- Bootstrap JS --> 
<!--[if !IE 8]><!-->
<script src="assets/js/drg-bootstrap.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="assets/js/drg-bootstrap-ie8.js"></script>
<![endif]-->
</body>
</html>

Common components and future versions

We have focussed on styling the most common Bootstrap components. You can find examples of these in the Interface section of this site. Hover over a component to see the HTML markup.

Any other components – either standard Bootstrap components or custom components – that you need for your application should be added to DRG Bootstrap so that they become available for use to everyone else. We have a DRG Bootstrap Github repository for contributing to future versions.

Browser support

DRG Bootstrap is compatible with Chrome, Firefox, Safari, Opera and IE9+.

Internet Explorer 8 is supported but without a drop-shadows and rounded corners.


For help designing and styling components, or to contribute to DRG Bootstrap, please contact Steve Clark.