Twitter bootstrap and Drupal
Download as ODP, PDF0 likes745 views
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.
![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';
}
}](https://image.slidesharecdn.com/twitterbootstrap-140906195711-phpapp02/85/Twitter-bootstrap-and-Drupal-10-320.jpg)
Twitter bootstrap and Drupal
- 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
- 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
- 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.