• Like
Responsive Implementation in Drupal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Responsive Implementation in Drupal

  • 104 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
104
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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.