Bootstrap is a UI framework created by Mark Otto and Jacob Thornton at Twitter, designed for building responsive and customizable interfaces. The Bootstrap package includes global styles, base CSS for common HTML elements, components for interface elements, and JavaScript plugins for interactive features. Integration with Drupal is facilitated by the bootstrap base-theme, requiring specific jQuery versions and allowing for customization through template overrides.

1. Twitter Bootstrap

2. What is Bootstrap?
• UI Framework (set of CSS, JavaScript, and Images)
• Developed by Mark Otto and Jacob Thornton at Twitter
• Best Open-Sourced GitHub project on the web
• It utilizes LESS CSS and is compiled via Node

3. Why Bootstrap?
• Provides clean and uniform solution for building an interface to
developers.
• Behaves great in latest desktop, tablets & smartphone browsers by
making use of responsive CSS.
• Highly customizable.
• Very light weight.
• The docs talk! (getbootstrap.com)

4. Bootstrap package whats included

5. Bootstrap package whats included
• Scaffolding:
Global styles for the body to reset type and background, link styles, grid
system, and two simple layouts.
• Base CSS:
Styles for common HTML elements like typography, code, tables, forms,
buttons & plus includes Glyphicons, icon set.
• Components:
Basic styles for common interface components like tabs and pills, navbar,
alerts, page headers, and more.
• Javascript plugins:
Similar to Components, these JavaScript plugins are interactive
components for things like tooltips, popovers, modals, and more.

6. Bootstrap and Drupal
• The Bootstrap base-theme bridges the gap between Drupal and
the bootstrap framework.
• Requirements:
– jquery version of 1.7 or higher
– jquery Update – 7.x-2.3 or higher
• Framework methods:
– BootstrapCDN (Default)
– Sub-theme

7. Bootstrap and Drupal

8. Drupal Theming
• Template file naming:
– page.tpl.php (page--front.tpl.php)
– node.tpl.php (node--blog.tpl.php)
– block.tpl.php (block--left--%.tpl.php)
http://drupal.org/node/190815 (Core templates)
● Breaking down a Drupal site:
– Page, Region, Block, Node, Forms, Views, Panels

9. Drupal Theming

10. Drupal Theming
● Overriding Template Output:
/sites/all/themes/drupalcon/template.php
– drupalcon_ p re p ro c e s s _ no d e (& $va ria ble s ) {. . . }
– drupalcon_ p ro c e s s _ no d e (& $ va ria ble s , $ho o k) {
if ($hook == 'foo') {
$variables['foo_item'] = 'foo item';
}
}

11. Thank You.