how to build responsive bootstrap themes using drupal
Post on 14-Aug-2015
157 Views
Preview:
TRANSCRIPT
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/
top related