Imagine 2014 Responsive How-To Breakout Session by Eric Wiese
-
Upload
ericthehacker -
Category
Technology
-
view
725 -
download
1
description
Transcript of Imagine 2014 Responsive How-To Breakout Session by Eric Wiese
![Page 1: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/1.jpg)
Fundamentals of Building a Responsive Magento ThemeEric Wiese
![Page 2: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/2.jpg)
Llama Corp is a multinational company company that manufactures products catered to the lucrative Llama accessories market.
1. Create New Theme – Client
![Page 3: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/3.jpg)
Let’s create a new theme!
1. Create new package and theme directory2. Configure theme fallback3. Copy forward SASS bootstrap files
1. Create New Theme
![Page 4: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/4.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/5.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/6.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/7.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/8.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/9.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/10.jpg)
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 filesstyles[-ie8].scss
enterprise[-ie8].scss
![Page 11: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/11.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/12.jpg)
Final theme skin directory layout example
1.3 Copy forward SASS bootstrap files
![Page 13: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/13.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/14.jpg)
Congradulations!
You’ve just created a custom, responsive, SASSy theme!
![Page 15: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/15.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/16.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/17.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/18.jpg)
2.1 SASS variables – Demo: Category page
![Page 19: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/19.jpg)
2.1 SASS variables – Demo: Product page
![Page 20: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/20.jpg)
2.1 SASS variables – Demo: Cart
![Page 21: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/21.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/22.jpg)
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.scss2. 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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/23.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/24.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/25.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/26.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/27.jpg)
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: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/28.jpg)
For example:
3 Breakpoint Mixin Usage
styles.css
styles-ie8.css
$mq-support = true;
$mq-support = false;$mq-fixed-value = 1024;
![Page 29: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/29.jpg)
That’s all, folks
Questions?
![Page 30: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/30.jpg)
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/blogPersonal blog: https://ericwie.se/blog
![Page 31: Imagine 2014 Responsive How-To Breakout Session by Eric Wiese](https://reader033.fdocuments.in/reader033/viewer/2022052822/554be762b4c90556328b4c59/html5/thumbnails/31.jpg)
Where to go from hereHave additional questions or interested in working with or for Classy Llama? Visit us at the Classy Llama Lounge!