Bootstrap your Theme &

Be Responsive

Hello!I am Mahesh Nattanmai

Regional Director - Drupal Geeks

You can find me at:@njmahesh

Bootstrap

Bootstrap

Responsive Design

Bootstrap

Bootstrap

Bootstrap

Bootstrap

Bootstrap

Drupal Theming

1. Wireframe or Photoshop Mockup

2. HTML Mockup

3. Theming

Why CSS Framework like Bootstrap?

Bootstrap

Bootstrap

jQuery Plugins

Bootstrap

Grid System

Bootstrap

Grid System

Bootstrap

NavigationBootstrap

Buttons

Bootstrap

Warning

Bootstrap

1. <i class="icon-search"></i>

2. <i class="icon-search icon-white"></i>

Font Icons

Bootstrap

Bootstrap

Thumbnail

Bootstrap

Media Objects

Bootstrap

Carousel

Bootstrap

Carousel

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

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

o https://drupal.org/project/ds_bootstrap_layouts

Bootstrap

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

o SDG is contributing for Kalatheme on Bootstrap 3.0 initiatives

Bootstrap

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

https://drupal.org/project/stanley

Bootstrap

GUI Tools

● Divshot

o http://www.divshot.com/

● Jetstrap

o https://jetstrap.com/

● Layoutit

o http://www.layoutit.com/

Bootstrap

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/

● Xtras

o Bootstrap Xtra - http://lightglitch.github.com/bootstrap-xtra/

o jQuery UI Bootstrap - http://addyosmani.github.com/jquery-ui-bootstrap/

o Datepicker for Bootstrap - http://www.eyecon.ro/bootstrap-datepicker/

o Font Awesome - http://fortawesome.github.com/Font-Awesome/

● Market Place

o Themes for Twitter Bootstrap - http://wrapbootstrap.com/

Bootstrap

Sincere Thanks to

Bootstrap

Thanks!Any questions?

You can find me at:@njmaheshmahesh.nattanmai@ameexusa.com➜http://

www.drupalgeeks.com/