Implement responsive design in Drupal using bootstrap. The presentation comes from Amrit Bera and was presented in Drupal Camp Kolkata. #drupalcampkolkata

1. Responsive Web Design
@b_Amrit

2. Media Queries & Breakpoints
● CSS3 media queries
○ @media only screen and (max-device-width: 480px) {
div#wrapper {
width: 460px;
}
}
● Breakpoints
○ Desktop: 1024px or more
○ Tablet: 768px
○ Smartphone: 480px
● http://responsivegridsystem.com

3. What makes for an optimal mobile
experience?
● One column
● Smaller header
● Easy navigation access
● Sidebars go below content
● More focus on the content

4. Bootstrap (http://getbootstrap.com)
● Sleek, intuitive, and powerful mobile first front-end
framework for faster and easier web development.
● Standards based: HTML, CSS & Javascript
● Transitions, popover, modal, alert, dropdown,
buttons, scrollspy, collapse, tab, carousel, tooltip,
affix
● Browser Support:
All modern browsers
Some older browsers as well*

5. Responsive Drupal Themes
● Adaptive theme
● Square grid
● Zen
● Omega

6. Problem with sub-themes

7. Creating a Drupal theme
drupal.org/node/171194
● mytheme.info
● template files
● template.php
● screenshot, logo, etc.