31
Fundamentals of Building a Responsive Magento Theme Eric Wiese

Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

  • Upload
    others

  • View
    11

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

Fundamentals of Building a Responsive Magento Theme Eric Wiese

Page 2: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

1. Create New Theme – Client

Page 3: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 4: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 5: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 6: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 7: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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.

Page 8: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 9: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 10: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 11: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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)

Page 12: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

Final theme skin directory layout example

1.3 Copy forward SASS bootstrap files

Page 13: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 14: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 15: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 16: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 17: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

2.1 SASS variables – Demonstration

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

Page 18: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

2.1 SASS variables – Demo: Category page

Page 19: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

2.1 SASS variables – Demo: Product page

Page 20: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

2.1 SASS variables – Demo: Cart

Page 21: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 22: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 23: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 24: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 25: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 26: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 27: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 28: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

For example:

3 Breakpoint Mixin Usage

styles.css

styles-ie8.css

$mq-support = true;

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

Page 29: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

That’s all, folks

Questions?

Page 30: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

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

Page 31: Fundamentals of Building a Responsive Magento Themeinfo2.magento.com/rs/magentoenterprise/images... · Fundamentals of Building a Responsive Magento Theme Eric Wiese . Llama Corp

Where to go from here Have additional questions or

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