How to Build Responsive Bootstrap Themes Using Drupal
Download as PPTX, PDF1 like973 views
This document provides an overview of how to use the Bootstrap framework to build responsive Drupal themes. It discusses using Bootstrap to create wireframes and HTML mockups, integrating Bootstrap libraries and jQuery into Drupal, and available Drupal modules like Views Bootstrap and Panels Bootstrap Layouts that help with integration. Popular Bootstrap-based Drupal themes like Kalatheme and Radix are also mentioned. Resources for learning Bootstrap, examples, and support forums are provided.
How to Build Responsive Bootstrap Themes Using Drupal
- 1. Bootstrap your Theme & Be Responsive Hello! I am Mahesh Nattanmai Regional Director - Drupal Geeks You can find me at: @njmahesh
- 3. Bootstrap
- 4. Bootstrap
- 6. Bootstrap
- 7. Bootstrap
- 8. Bootstrap
- 9. Bootstrap
- 10. Drupal Theming 1. Wireframe or Photoshop Mockup 2. HTML Mockup 3. Theming Why CSS Framework like Bootstrap?
- 11. Bootstrap
- 12. Bootstrap
- 19. 1. <i class="icon-search"></i> 2. <i class="icon-search icon-white"></i> Font Icons
- 20. Bootstrap
- 21. Bootstrap
- 26. Bootstrap
- 27. Integrate Drupal with Bootstrap ● Bootstrap Drupal theme - http://drupal.org/project/bootstrap ● Download Twitter Bootstrap Library and drop in to libraries directory ● Install jQuery_update - dev version of the module - http://drupal.org/project/jquery_update (jQuery 7.1) Bootstrap
- 28. Integrate Drupal with Bootstrap ● Views Bootstrap o https://drupal.org/project/views_bootstrap o Accordion, Carousel, Thumbnail, Grid ● Bootstrap Panels o https://drupal.org/project/panels_bootstrap _layouts ● Display Suite Bootstrap Bootstrap
- 29. Kalatheme o based on Bootstrap takes care of the responsive grid and media queries, HTML5 compliance and cross browser parity o Based on Panopoly - Responsive Panels o You can easily preprocess your CSS with LESS, SASS or COMPASS. o https://drupal.org/project/kalatheme Bootstrap
- 30. Radix o Radix is a base theme for Panopoly. o Components and plugins from Twitter Bootstrap o Default theme for Open Atrium 2 o Stanley - Bootstrap Admin Theme Bootstrap
- 31. GUI Tools ● Divshot o http://www.divshot.com/ ● Jetstrap o https://jetstrap.com/ ● Layoutit o http://www.layoutit.com/ Bootstrap
- 32. Resources ● Bootstrap, from Twitter - http://twitter.github.com/bootstrap/ ● Showcase o Bootstrap examples - http://twitter.github.com/bootstrap/examples.html o Built With Bootstrap - http://builtwithbootstrap.com/ ● Ask for Help o Google group - http://groups.google.com/group/twitter-bootstrap ● Tools o PSD - http://gui.repixdesign.com/ o UI Mockup Templates - http://keynotopia.com/bootstrap/ Bootstrap
- 34. Thanks! Any questions? You can find me at: @njmahesh [email protected] http://www.drupalgeeks.com/