7 bước để xây dựng Responsive Theme trong Drupal 7

Steps to build your responsive drupal 7 theme

1) Understand your design and decide on the breakpoints.

2) Start with your theme info file

name = RoboSmart
description = A responsive mobile-first layout for a corporate site.
version = VERSION
core = 7.x
stylesheets[all][] = css/style.css<

3) Create HTML5 pages for each unique page in your website.

Based on the grid system and the nature of your design, download grids from http://960.org. In the case of the RoboSmart theme we have used a single grid at 600 which is fluid and works for any screen resolution greater than 600px.

Start with the mobile design and move the way up for all the breakpoints. Convert the HTML5 pages to template files. This step is similar to that of any general drupal theme except that the same template is applicable for multiple breakpoints. If you are using HTML5 make sure you start with the declaration in your html.php.tpl file.

Validate the outline your page generates using an outliner. Structure the HTML5 tags and header tags to achieve the desired outline. Working your way up from the lowest to the highest breakpoint, i.e starting from the mobile design, is an important aspect of the mobile first approach.

4) Segregate the styles for the different breakpoints using media queries. Detailed below options for using media queries.

Multifile option: Embed your media queries in the .info file

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
stylesheets[all and (min-width: 600px)][] = css/grid-600.css
stylesheets[all and (min-width: 600px)][] = css/style-600.css
stylesheets[all and (min-width: 480px)][] = css/style-480.css
stylesheets[all and (min-width: 960px)][] = css/style-960.css
stylesheets[all][] = css/fonts.css

Single file option: Write media queries inline in css files

media all and (min-width: 461px) and (max-width: 900px) {
//embed styles here
}

5) Embed viewport & other mobile/handheld device specific meta tags in the html.php.tpl file

<meta content="width" name="MobileOptimized"/>
<meta content="true" name="HandheldFriendly"/>
<meta content="width=device-width" name="viewport" />
<meta content="on" http-equiv="cleartype"/>

6) To enable IE support, add Html5shiv, Respond.js and Selectivizr.js files to your theme.

7) Test your theme in a default Drupal installation. Voila! Here we have a Drupal 7 theme that is responsive.

Behind the sceens...

Media Queries

CSS3 Media queries allow you to check media type and media features and conditionally load style sheets. This is commonly used to distinguish between ‘screen’ and ‘print’. The media type print is used to define the printer friendly styles.

media print {
//embed print stylesheet

}

The below media query defines the style sheet for all media types. Also demonstrates the use of the width media feature. Allows us to define styles for screen widths between 461px and 960px

@media all and (min-width: 461px) and (max-width: 900px) {

//embed styles here

}

Media features are used to define the properties of the user agent. Some of the other Media features include height, orientation and aspect-ratio.

Mobile friendly meta tags to the html.tpl.php

<meta name="MobileOptimized" content="width"/>

Use to set Narrow layout in devices , introduced by Microsoft.

<meta name="HandheldFriendly" content="true"/>

The HandheldFriendly meta-tag was used initially by older Palm and Blackberry models.

<meta content="width=device-width" name="viewport"/>

Certain browser devices display the web pages by auto zooming. To override this auto zoom feature for already optimized pages, the viewport meta tag is used. In our case the width property is used. Here the ‘width’ property is set to the viewport of the device. The other viewport properties includes the initial-scale property which controls the zoom level when the page is first loaded, the maximum-scale, minimum-scale, and user-scalable properties which control how the user zooms in and out of the page. The viewport meta tag is widely supported by modern smartphones and not limited to iOS, and Android devices.

<meta http-equiv="cleartype" content="on"/>

Enables clear type for Windows mobile devices. For more details on the Mobile friendly meta tags refer Mobile boilerplate at github. “Mobile boiler plate is the best practice baseline for your mobile web app”. (https://github.com/h5bp/mobile-boilerplate )

Optimizing for IE

To enable IE support add Html5shiv, Respond.js and Selectivizr.js files to your theme.

What does html5shiv.js do?

IE9 supports html5 partly, IE8 and below do not support HTML5. The html5shiv.js uses the document.createElement(“tag”) to create new elements and forces IE to render the CSS styles to these generated HTML5 tags. (http://code.google.com/p/html5shiv)

What does selectivizr do?

“Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.” (http://selectivizr.com) Selectivizr makes about 25 css3 style elements work in IE 6-8.

What does Respond.js do?

“The goal of this script is to provide a fast and lightweight script to enable responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under. It's written in such a way that it will probably patch support for other non-supporting browsers as well “ (https://github.com/scottjehl/Respond)