Implement responsive design in Drupal using bootstrap. The presentation comes from Amrit Bera and was presented in Drupal Camp Kolkata. #drupalcampkolkata
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*