Scripps Bootstrap

Templates and tools for rapid user interface development.

Back To Top

Getting Started

1. Download Scripps Bootstrap

Scripps Bootstrap is distributed as a set of HTML, CSS and JavaScript templates. These files should be used as the starting point for development of pages that leverage Bootstrap.

2. Extract the files

The download contains the basic folder structure that should be used for Bootstrap enabled applications. Just extract the archive to the root of your project's content folder.

You should be able to open the index.html file now from the file system. It should display an empty page with just a header and footer.

  • css
    • bootstrap
      • bootstrap.1.0.0.css
      • responsive.1.0.0.css
    • jquery-ui
      • images
      • jquery-ui-1.8.22.custom.css
  • images
    • bootstrap
      • footer-logo.png
      • header-background.png
      • header-logo.png
      • icon-set.1.0.0.png
  • js
    • libs
      • bootstrap-dropdown.2.0.4.min.js
      • jquery.dataTables.1.9.3.min.js
      • jquery-1.7.2.min.js
      • jquery-ui-1.8.22.custom.min.js
      • modernizr.2.6.2.custom.min.js
      • sniui.dataTables.1.1.0.min.js
      • sniui.dialog.1.1.0.min.js
  • index.html

3. Update metadata

The index.html file contains the basic template that should be used for developing new pages. Inside the <head> are TODO: place holders for titles and descriptions. These should be replaced with meaningful values on each page.

<head>
  <title></title>
  <!-- TODO: Title -->
  <meta name="description" content="" />
  <!-- TODO: Description -->
</head>

Each page should have a unique ID that can be used for targetting CSS and JavaScript. Replace the <body id="" > attribute with a value that is unique within the application.

<body id="indexPage">
  ...
</body>

Finally, set the application name in the TODO: in the footer.

<footer>
  ...
  <p>Scripps Networks Interactive <!-- TODO: Application name --></p>
  ...
</footer>

4. Add a layout

Out of the box the page template only contains a header and a footer. The next step should be adding a layout section to the page. Adding a fluid layout can be achieved by replacing the <!-- TODO: Insert layout here --> with the code to the right.

If you received a mock up from the UX team, it should specify which type of layout to use. More layout options can be found in the Layouts section of Scaffolding.

<div class="container-fluid">
  <div class="content">
    ...
  </div>
</div>

5. Divide the design

Designs need to be divided into a set of columns and rows to fit into the grid system provided by Bootstrap. Work with your designer to understand where content should flow and where content should be aligned. Then add the apropriate grid elements to your page.

design
<div class="row">
  <div class="span9">
    {Breadcrumb}
  </div>
</div>

<div class="row">
  <div class="span9">
    {Title & Details}
  </div>
  <div class="span3">
    {Action Panel}
  </div>
</div>

<div class="row">
  <div class="span9">
    {Grid}
  </div>
  <div class="span3">
    {Summary}
  </div>
</div>

6. Adding content

Basic styles

Most pages need to use basic HTML elements like headins, lists and tables to structure their content. Fortunately, Scripps Bootstrap matches the UX style guide right out of the box. Check out the Base CSS page to understand how the base elements have been styled.

system status Many designs can be implemented by combining basic styles. For example, the mock up to the right could be implemented using a combination of header, unstyled list, icons and horizontal-rule.

Design patterns

Most UX mock ups are based on the UX design patterns. Scripps Bootstrap has most of these design patterns already implemented with example code and interactive demos. Visit the JavaScript widgets page for interactive, JavaScript driven design patterns and the Components page for design patterns that only require HTML and CSS.

Adding a component to your page

Next to each component is an HTML sample (and sometimes a JavaScript sample too). To add the component to your page, just copy the HTML inside the content area of your page. The code works well in a grid <div class="span#"> or directly inside of the <div class="content"> area of the page layout.

JavaScript widgets often need specific JavaScript libraries included in the page. Read the documentation for the component to find out which libraries it needs, then make sure they are added near <!-- TODO: Add additional script libraries here. -->.

If the component requires JavaScript initialization, add the appropriate code to your page specific JavaScript file (see step #7 below).

7. Customize

CSS

Most pages will need a few extra CSS rules to finish up the design. Bootstrap provides a lot of utility classes that may handle the job, but sometimes you just need to write some CSS.

Simply create a CSS file and place it in the /css directory. It's good practice to name the CSS file after the application. Remember to include your CSS file last in the page <head> so you can override existing styles easily.

If you need a CSS rule to only apply on one page, remember that page ID you created under step #3.

JavaScript

Lots of pages need JavaScript for things like initializing components, custom behaviors, form validation. In most cases, this type of logic is specific to one page, so we recommend creating one JavaScript file per page.

The name of your JavaScript file should be based on your page ID from step #3; something like indexPage.js. Simply create it and add it to the /js folder. Make sure to put your <script> element last in the HTML file, after all of the libraries from step #6.

When you need common JavaScript libraries across multiple pages, just add them to the /js/lib folder. <script> elements for libraries should occur at the bottom of the page, before any page specific JavaScript references.