Open Framework Theme: Incorporating Twitter Bootstrap into Drupal
Brian Young
May 5, 2012
What is Twitter Bootstrap?
- A bunch of HTML, CSS, and Javascript files
- Responsive design interaction components
- Open-source
- twitter.github.com/bootstrap/
twitter.github.com/bootstrap/
What is Open Framework?
- Drupal 6 base theme
- Drupal 7 version coming soon
- Twitter Bootstrap integration
- Open-source
- github.com/SU-SWS/open_framework
- GitHub project page
su-sws.github.com/open_framework
su-sws.github.com/open_framework
Why should I use Open Framework?
- Mobile first
- Simplify Drupal site building process
- Leverage Twitter Bootstrap user documentation
Open Framework: Block Regions
12-column grid
| Page: Top Section (12-column) | ||
| Page: Upper Section (12-column) | ||
| Page: Feature Section (12-column) | ||
| Site: First sidebar (3-column) | Content: Top section (6-column) | Site: Second sidebar (3-column) |
| Content: Upper Section (6-column) | ||
| Content: Body (6-column) | ||
| Content: Lower Section (6-column) | ||
| Content: Bottom Section (6-column) | ||
| Page: Lower Section (12-column) | ||
| Page: Bottom Section (12-column) | ||
Open Framework: Block Widths
Page: Feature Section (12-column)
|
|||||
| Site: First sidebar (3-column) | Content: Upper section (6-column)
|
Site: Second sidebar (3-column) | |||
Content: Lower Section (6-column)
|
|||||
Open Framework: Block Widths (Cont.)
Page: Feature Section (12-column)
|
|||||
Content: Upper section (9-column)
|
Site: Second sidebar (3-column) | ||||
Content: Lower Section (9-column)
|
|||||
Quirks and Bugs
Bootstrap javascript components are not loaded by default
- jQuery 1.7.1 interferes with the blocks list layout page
- It also causes errors in a few Stanford specific modules
Enabling jQuery 1.7.1 and bootstrap.js
- Activate PHP filter module and add the following PHP code to a custom block
<?php
drupal_add_js('sites/all/themes/open_framework/js/jquery-1.7.1.min.js',
'theme', 'header', FALSE, FALSE, FALSE);
drupal_add_js('sites/all/themes/open_framework/js/bootstrap.min.js',
'theme', 'header', FALSE, FALSE, FALSE);
?>
Open Framework in Action
itopenhouse.stanford.edu
Hide Address Bar Automatically on Page Load
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){
if (window.pageYOffset < 1) {
window.scrollTo(0, 1);
}
}
Positions search box dynamically
Desktop View
Mobile View
IT Open House Site Case Study
CSS Injector Changes
@import url(http://fonts.googleapis.com/css?family=Cabin:700,400,400italic);
h1, h2, h3, h4, h5, p, a, li, th, td {font-family: 'Cabin', sans-serif;}
body {
background: #cad9e7 url('images/body_background_fullcolor.jpg');
background-attachment: fixed;
background-size: cover;
}
#main-content {
background-color: rgba(255,255,255,0.9);
border-radius: 10px;
}
IT Open House Site Case Study
Mobile Optimized Content Layout
@media (max-width: 480px) {
body {background: #b8d3f8;}
table th {display: none;}
table td {display: block; width: auto;}
table td:nth-child(2), table td:nth-child(3) {border: none;}
}
Open Framework Sub-theming at Stanford
- Open Framework
Twitter Bootstrap integration - Stanford Framework
Stanford global header and footer block regions - Stanford Jordan
- Stanford Branner
- Stanford Wilbur, etc.
theme specific stylesheet and images
Stanford Wilbur Theme (sites.stanford.edu/demo)
Related Drupal.org projects
- Omega Bootstrap: drupal.org/sandbox/rerooting/1429486
- Bootstrap 2.0: drupal.org/node/1417024
- Twitter Bootstrap: drupal.org/project/twitter_bootstrap
- Stanley (Twitter Bootstrap Admin Theme): drupal.org/project/stanley
Thank you!
- Email: brianyoung@stanford.edu
- Twitter: @auracreations
- Open Framework: su-sws.github.com/open_framework/
- Twitter Bootstrap: twitter.github.com/bootstrap/
- This HTML 5 presentation template: code.google.com/p/html5slides/