24 July

Magento and RWD theme


Hi there!,

Have you heard about #Magento RWD theme?. Well, if you’ve navigated through the new structure files, you may noticed a new folder in app/design/frontend/ directory, this is “rwd”.

RWD stands for Responsive Web Design, and it’s a new “base” theme that #Magento core team have released for us. This themes includes a lot of features and new technology to work with. It’s fully responsive and you’ll notice the load speed is awesome. It allows developers to inherit from RWD features and take advantage of the great #Magento fallback structure.

But the “big thing” actually resides on the new CSS technology that RWD theme includes. This is the use of SASS css.

SASS stands for “Syntactically Awesome Style Sheets” and it’s a CSS3 extension language. It works as a preprocessor and lets you use features that don’t exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.

In order to work with SASS you need a compiler, since .scss files don’t output any css content by itself. #Magento recommends the use of Compass. It’s a compiler wrote in Ruby, that’s why you need to download and install Ruby first, and then install Compass by commandline (there are other ways to install it). This only needs to be done in your PC where you run the text editor for editing the .scss files.
Take a look at the new css structure:

├── css
│ ├── scaffold-forms.css
│ ├── styles-ie8.css
│ └── styles.css
├── images
│ ├── ajax-loader.gif
│ ├── bg_x.png
│ ├── demo-logo.png
│ ├── demo_logo.png
│ ├── icon_sprite.png
│ ├── [email protected]
│ ├── logo.png
│ ├── logo_small.png
│ ├── opc-ajax-loader.gif
│ ├── social_icons.png
│ └── [email protected]
└── scss
├── _core.scss
├── _framework.scss
├── _var.scss
├── config.rb
├── content
│ ├── _category.scss
│ ├── _home.scss
├── core
│ ├── _common.scss
│ ├── _form.scss
│ ├── _reset.scss
│ └── _table.scss
├── function
│ ├── _black.scss
│ └── _white.scss
├── layout
│ ├── _footer.scss
│ ├── _global.scss
│ ├── _header-account.scss
│ ├── _header-cart.scss
│ ├── _header-nav.scss
│ ├── _header-search.scss
│ └── _header.scss
├── mixin
│ ├── _breakpoint.scss
│ ├── _clearfix.scss
│ ├── _if-resolution.scss
│ ├── _image-replacement.scss
│ ├── _loading-overlay.scss
│ ├── _menu.scss
│ ├── _not-selectable.scss
│ ├── _toggle-content.scss
│ ├── _triangle.scss
│ └── _typography.scss
├── module
│ ├── _account-reviews.scss
│ ├── _catalog-compare.scss
│ ├── _catalog-msrp.scss
│ ├── _catalog-product.scss
│ ├── _checkout-cart-minicart.scss
│ ├── _checkout-cart.scss
│ ├── _checkout-onepage.scss
│ ├── _checkout-success.scss
│ ├── _cms.scss
│ ├── _configurableswatches.scss
│ ├── _contacts.scss
│ ├── _cookies.scss
│ ├── _customer.scss
│ ├── _paypal.scss
│ ├── _pricing_conditions.scss
│ ├── _product-list.scss
│ ├── _review.scss
│ ├── _search.scss
│ ├── _slideshow.scss
│ └── _wishlist.scss
├── override
│ └── _plugin.scss
├── scaffold-forms.scss
├── styles-ie8.scss
├── styles.scss
└── vendor
└── _normalize.scss

Of course there are a lots of .scss files there that are used by the RWD sample data, and you won’t need if you want to develop a custom theme. However, this is how (basically) the css files work now:

config.rb: Configuration values that tell Compass to look in the scss directory for Sass files and to export the CSS to the css directory. It also includes information about how Compass should format the compiled CSS.

scss/styles.scss: Wrapper that imports the framework.scss and core.scss files.

scss/styles-ie8.scss: Identical to styles.css file, except it does not include any media queries because Internet Explorer 8 and earlier don’t support media queries. For more information, see Using the bp() mixin for older Internet Explorer Browser Versions.

scss/_framework.scss: Imports all of the libraries, variables, functions, and mixins used by the other stylesheets. The files imported by framework.scss do not output any CSS on their own. Because of that, this file can be imported by other Sass files that are intended to compile directly to CSS files. For example, in Magento EE, the skin/frontend/rwd/enterprise/scss/enterprise.scss file imports skin/frontend/rwd/default/scss/_framework.scss so the Magento EE partials can use the common variables, mixins, and so on imported by framework.scss.

scss/_var.scss: Contains variables like breakpoints, spacing, colors, and font styles that are used by the other Sass partials. You should expect to modify this file heavily as you customize your responsive theme.

scss/mixins/: This directory contains all of the mixins used by the responsive theme. You should familiarize yourself with these mixins because they are useful for writing your custom styles.

scss/function/: This directory contains functions that the responsive theme uses. Functions are mixins that return simple values.

scss/_core.scss: Imports all of the Sass partials that output CSS content:

scss/core/: Partials that contain all of the global styles. Expect to heavily customize the partials in this directory.
scss/layout/: Partials that define the structural layout of the responsive theme (header, content, and footer). The scss/core/_common.scss partial also contains some layout styles—specifically the one, two, or three column layouts.
scss/module/: Partials that contain styles grouped by module. While the correlation between these module files and Magento core modules is close, it is not a 1:1 relationship. For example, the _product-list.scss file contains styles for both the Mage_Catalog and Mage_CatalogSearch modules

.scss/vendor/: This directory is intended for third-party CSS libraries like the _normalize.scss partial that normalizes how browsers render elements.

scss/scaffold-forms.scss: For more information, see Scaffold Forms.


So we have:



Full information about RWD theme can be fund here: http://www.magentocommerce.com/knowledge-base/entry/ee114-ce19-rwd-dev-guide

We’ll be posting more updates about RWD and our new framework release!, stay aweake! :)



Back to Top