responsive implementation in drupal
Post on 13-Jul-2015
141 Views
Preview:
TRANSCRIPT
Responsive Web Design@b_Amrit
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
What makes for an optimal mobile experience?
● One column● Smaller header● Easy navigation access● Sidebars go below content● More focus on the content
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 browsersSome older browsers as well*
Responsive Drupal Themes
● Adaptive theme● Square grid● Zen● Omega
Problem with sub-themes
Creating a Drupal themedrupal.org/node/171194
● mytheme.info● template files● template.php● screenshot, logo, etc.
top related