Scripps Bootstrap
Templates and tools for rapid user interface development.
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
- bootstrap
- images
- bootstrap
- footer-logo.png
- header-background.png
- header-logo.png
- icon-set.1.0.0.png
- bootstrap
- 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
- libs
- 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.
<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.
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.