How to Build Responsive Bootstrap Themes Using Drupal

Views:
 
     
 

Presentation Description

Learn more about How to implement a Drupal theme using Bootstrap? Visit us at, www.drupalgeeks.com

Comments

Presentation Transcript

Bootstrap your Theme & Be Responsive:

Bootstrap your Theme & Be Responsive Hello! I am Mahesh Nattanmai Regional Director - Drupal Geeks You can find me at: @njmahesh

Bootstrap:

Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

Responsive Design Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

Bootstrap

Why CSS Framework like Bootstrap?:

Drupal Theming Wireframe or Photoshop Mockup HTML Mockup Theming Why CSS Framework like Bootstrap?

Bootstrap:

Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

jQuery Plugins Bootstrap

Bootstrap:

Grid System Bootstrap

Bootstrap:

Grid System Bootstrap

Bootstrap:

Navigation Bootstrap

Bootstrap:

Buttons Bootstrap

Bootstrap:

Warning Bootstrap

Font Icons:

<i class = "icon-search" ></i> <i class = "icon-search icon-white" ></i> Font Icons

Bootstrap:

Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

Thumbnail Bootstrap

Bootstrap:

Media Objects Bootstrap

Bootstrap:

Carousel Bootstrap

Bootstrap:

Carousel Bootstrap

Bootstrap:

Bootstrap

Bootstrap:

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

Bootstrap :

Integrate Drupal with Bootstrap Views Bootstrap https://drupal.org/project/views_bootstrap Accordion , Carousel , Thumbnail , Grid Bootstrap Panels https://drupal.org/project/panels_bootstrap_layouts Display Suite Bootstrap https://drupal.org/project/ds_bootstrap_layouts Bootstrap

Bootstrap:

Kalatheme based on Bootstrap takes care of the responsive grid and media queries, HTML5 compliance and cross browser parity Based on Panopoly - Responsive Panels You can easily preprocess your CSS with LESS, SASS or COMPASS. https://drupal.org/project/kalatheme SDG is contributing for Kalatheme on Bootstrap 3.0 initiatives Bootstrap

Bootstrap:

Radix Radix is a base theme for Panopoly. Components and plugins from Twitter Bootstrap Default theme for Open Atrium 2 Stanley - Bootstrap Admin Theme https://drupal.org/project/stanley Bootstrap

Bootstrap:

GUI Tools Divshot http://www.divshot.com/ Jetstrap https://jetstrap.com/ Layoutit http://www.layoutit.com/ Bootstrap

Bootstrap:

Resources Bootstrap, from Twitter - http://twitter.github.com/bootstrap/ Showcase Bootstrap examples - http://twitter.github.com/bootstrap/examples.html Built With Bootstrap - http://builtwithbootstrap.com/ Ask for Help Google group - http://groups.google.com/group/twitter-bootstrap Tools PSD - http://gui.repixdesign.com/ UI Mockup Templates - http://keynotopia.com/bootstrap/ Xtras Bootstrap Xtra - http://lightglitch.github.com/bootstrap-xtra/ jQuery UI Bootstrap - http://addyosmani.github.com/jquery-ui-bootstrap/ Datepicker for Bootstrap - http://www.eyecon.ro/bootstrap-datepicker/ Font Awesome - http://fortawesome.github.com/Font-Awesome/ Market Place Themes for Twitter Bootstrap - http://wrapbootstrap.com/ Bootstrap

Bootstrap:

Sincere Thanks to Bootstrap

Thanks!:

Thanks! Any questions? You can find me at: @njmahesh mahesh.nattanmai@ameexusa.com http:// www.drupalgeeks.com /

authorStream Live Help