Fundamentals of Building a Responsive Magento...

Fundamentals of Building a Responsive Magento Theme Eric Wiese

Llama Corp is a multinational company company that manufactures products catered to the lucrative Llama accessories market.

1. Create New Theme – Client

Let’s create a new theme!

1.  Create new package and theme directory 2.  Configure theme fallback 3.  Copy forward SASS bootstrap files

1. Create New Theme

Create new directory in app/design/frontend/<PACKAGE>/<THEME> .

Populate with etc, layout, and template directories. If this seems familiar, you’re right – nothing new here.

1.1 Create package and theme dirs

Magento EE 1.14 and CE 1.9 introduce new etc/theme.xml file to theme directories which allows a theme to specify the following information about itself.

●  Parent theme in fallback chain ●  Theme-specific layout files

1.2 Configure theme fallback

Using theme.xml, a theme can specify its parent in the fallback chain.

<theme> <parent>package/theme</parent> </theme> ●  Themes built on EE should fall

back to rwd/enterprise ●  Themes built on CE should fall

back to rwd/default

1.2a theme.xml parent theme

Themes can also now specify layout update files in the theme.xml file. These will be loaded after module layout files, allowing the theme to override core layout files, in a similar manner to local.xml.

This allows you to organize your

local.xml-style updates into multiple layout update files.

1.2b Theme-specific layout update files

As always, copying forward core module layout files and directly modifying is discouraged.

NOTES: ●  Placing layout update files in a

unique directory (in this case corporate-base) ensures that your layout file will never directly override a parent’s layout update file with the same name.

●  local.xml is still loaded after all other layout files, including ones added via theme.xml

1.2b Theme-specific layout update files

In your new package/theme skin directory, copy forward the following files: CE and EE ●  rwd/default/scss/styles.scss ●  rwd/default/scss/styles-ie8.scss ●  rwd/default/scss/_var.scss ●  rwd/default/scss/_framework.scss ●  rwd/default/scss/_core.scss -> package/theme/scss/_default_core.scss EE only ●  rwd/enterprise/scss/enterprise.scss ●  rwd/enterprise/scss/enterprise-ie8.scss ●  rwd/enterprise/scss/_core.scss -> package/theme/scss/_enterprise_core.scss

1.3a Copy forward SASS bootstrap files

Since the rwd/default and rwd/enterprise core SCSS files were renamed, the import paths in the theme’s styles[-ie8].scss and enterprise[-ie8].scss must be updated.

●  styles[-ie8].scss import “default_core” ●  enterprise[-ie8].scss import

“enterprise_core”

1.3b update SASS bootstrap files styles[-ie8].scss

enterprise[-ie8].scss

In package/theme dir, create new config.rb file with these contents.

Be aware that a new

add_import_path line must be added for any additional levels of fallback.

1.3d Populate compass configuration file

Be aware that the add_import_path lines are in priority order, so imports for more specific themes (such as a custom intermediate theme) should go above less specific themes (such as rwd/enterprise or rwd/default)

Final theme skin directory layout example

1.3 Copy forward SASS bootstrap files

After copying forward the necessary SASS bootstrap files and creating an appropriate config.rb, verify the compass compilation by running the following commands:

$ cd <web root>/skin/frontend/<package>/<theme> $ compass compile . Look for output similar to the following:

1.3 Compass Compilation Verification

Congradulations! You’ve just created a custom, responsive, SASSy theme!

As good looking as the default theme is, the new Llama Corp theme must be modified in order to adhere to strict brand guidelines.

There are three general ways to modify styles ●  Change variable values ●  Copy forward existing SASS partials and modify ●  Add new SASS partials to add or override styles

2. Theme customization

In the _var.scss SASS partial, which was copied to the custom theme, the following values are abstracted into variables:

●  Colors (font, border, background, button) ●  Padding/margins ●  Font sizes ●  Font-weights These variables are used religiously throughout the core

SASS, so many branding changes can be effected by simply modifying variable values.

2.1 Update styles – change SASS variables

2.1 SASS variables – Demonstration

Example: align base color variables with Llama Corp brand colors, and update button color association, just for good measure.

2.1 SASS variables – Demo: Category page

2.1 SASS variables – Demo: Product page

2.1 SASS variables – Demo: Cart

In typical Magento frontend fashion, SASS partials may be copied forward and directly modified if changing variable values is not sufficient.

2.2 Modifying Existing Styles

For new custom styles, add new SASS partials.

To avoid modifying core assets, current best

practice is to create a new SASS partial which imports all other SASS partials.

1.  Create a new SASS file in your theme’s scss dir named _<mytheme>_core.scss

2.  Add an import to styles.scss and styles-ie8.scss below the current @import “core”; line

2.3 Bootstrapping custom SASS

styles[-ie8].scss contents

New core SCSS file

Once the new theme-specific bootstrap file is in place, create new theme-specific SASS partials and import them via the new bootstrap SASS file.

2.3 Adding new SCSS partials

_corporatebase_core.scss contents, importing new SCSS partial

New partial in corporate base theme

The responsive theme includes a breakpoint mixin which should be used instead of native CSS media queries.

This breakpoint will output media

query styles for browsers that support media queries, and naked styles (if they are applicable) for other browsers.

3 Responsive SASS

Usage of the bp mixin follows this format: @include bp(max-width, <pixel size>) { //styles that only apply at or below this size

} OR @include bp(min-width, <pixel size>) { //styles that only apply at or above this size

}

3 bp() mixin usage

There are two main CSS files that are generated: ●  styles.scss -> styles.css for browsers that support media queries ●  styles-ie8.scss -> styles-ie8.css for IE8 and below These files only differ by the $mq-support variable by which they are prefixed:

3 IE8 stylesheet

The $mq-support and corresponding $mq-fixed-value determine how media query styles are compiled.

Stylesheets that have $mp-support set to true end up with complete media

query output. $mq-fixed-value is irrelevant. Stylesheets that have $mp-support set to false end up with the actual media

query lines removed, and the contents conditionally included if the content styles apply to sizes at or below $mq-fixed-value.

3 media query support decision

For example:

3 Breakpoint Mixin Usage

styles.css

styles-ie8.css

$mq-support = true;

$mq-support = false; $mq-fixed-value = 1024;

That’s all, folks

Questions?

Further Reading Watch our blog for more: ●  Multiple levels of theme fallback ●  High resolution product images ●  Responsive emails ●  SASS deployment structure ●  Design insight ●  Development techniques Classy Llama blog: http://classyllama.com/blog Personal blog: https://ericwie.se/blog

Where to go from here Have additional questions or

interested in working with or for Classy Llama? Visit us at the Classy Llama Lounge!