Traditionally, cross-browser styling has been a time consuming and tedious task. With the rise of modern browsers and the introduction of CSS3, we can finally create beautiful cross-browser interfaces using a simple syntax. We show you how with the new Sencha SDK Tools.
As web developers we are faced with a dilemma: on one hand, we have the ability to create engaging interfaces with rounded corners and background gradients using CSS3; on the other hand, we are forced to slice images and use extra markup to support these expectations on legacy browsers.
With the introduction of the Split DOM feature in Ext JS 4, we now have the ability to render different markup based on the browsers’ capabilities and version. This gives us the ability to style today’s modern browsers with CSS3, but what about older browsers that don’t support CSS3? Wouldn’t it be nice if you could style exclusively in CSS3? We thought so, too, so we went about making that happen.
### Introducing the “slicer” feature of the Sencha Tools SDK
Ext JS 4 brings great theming support for your applications by taking advantage of modern CSS3 properties and using SASS and Compass as an efficient way to describe what you want. And the best part is, it works across all browsers—even browsers that don’t support CSS3— by using our slicer utility which is part of our SDK tools.
The slicer is a feature of the SDK tools that analyses your custom theme, renders the page in memory, then decides which components need images generated for legacy browsers, generates those images, slices those images into a sprite, and saves it. Let’s take a look how to use it.
To get started, let’s create a new theme file in the ‘sdk/resources/sass’ folder called ‘ext-all-green.scss’:
$base-color: lighten(#BADA55, 15);
As you can see, we are just simply changing the name and the base color of the theme.
Once these dependencies have been met, the next step is to compile our new green theme using Compass. If you need help on compiling a theme, see our Theming Guide.
Let’s start by duplicating the ‘default’ images directory in ‘sdk/resources/themes/images/default’ and renaming it ‘green’. We duplicate the default folder because icons/tools are not generated by the SDK Tools at this time. Then run the compass command from within the SDK directory:
compass compile resources/sass
Our theme will now be generated into CSS, which will work for modern browsers, but legacy browsers need images. Using the slice feature of the SDK tools, the images will be generated:
sencha slice theme -d . -c resources/css/ext-all-green.css -o resources/themes/images/green -v
Now you can load up your application in any supported browser and it will be styled with a beautiful green theme. With one style you can now target both legacy browsers and modern browsers.
### Helpful Variables
There are many variables that you can override in order to make a custom theme. Take some time to poke around the sdk/resources/themes/default/variables directory. This directory contains all defined variables for each component in Ext JS 4.
The naming convention for variables follows CSS property names, prefixed by the component name. For example:
Panel border radius
Panel body background color
Toolbar background color
Using the slicer feature of our SDK Tools, you can now deliver pixel-perfect, cross-browser support using only CSS3. The days of generating custom sprites, calculating CSS rules, and building custom markup are gone. We hope this post illustrates how you can start to use Ext JS 4 to build a personalized theme. Please take some time to create your our theme, share it with community in the Sencha Forum, and, most importantly, let us know what you think.
Dmitriy Pashkevich says
Great news! I’ll definitely use that later!
P.S. CSS4?)) [3rd paragraph]
This is surely a really timesaving tool but have generated quite a bit of posts from frustratred users in the forums. Does this blog post mean that it works now?
Is there more information about the new “Split DOM” feature somewhere? What are the best practices around this when writing own components containing xtemplates with markup? A search for “split dom” in the docs get no hits..?
Robert Dougan says
Unfortunately we had a slight hiccup with the initial release which meant in some specific cases, the tool would not output the correct images. We have fixed this issue with the launch of SDK Tools 1.2 (which is currently online and available for download), and the response from forum users has been positive.
As for Split DOM; there is no specific product documentation on that currently. Internally we use the ‘Ext.supports.CSS3BorderRadius’ property to determine which renderTpl we use on a component, letting Ext JS render the specific DOM elements for that browser.
Niko Ni says
Cool, I will take some time to play with this great tool ;)
This is fantastically awesome : ) No more mucking about with Photoshop and hand-coding CSS sprites to make rounded buttons.
The ability to use CSS3 features that are not supported by IE6, 7, 8, 9 and FF 3.6, 4 and have it just work is just mind bending. How in the world did you guys do this?
This feature alone is worth the upgrade to 4.0.
Phil Strong says
Nice job @ariyahidayat @rdougan @jarrednicholls and all others @sencha
the Close button in Ext.window is still blue
LOL @ “#BADA55” :)))
Maxx Power says
When I run the slicer on Windows it only generates 14 out of the 28 directories in the default theme..?
I noticed you mention: “We duplicate the default folder because icons/tools are not generated by the SDK Tools at this time”. Is there any timeline on when the icons/tools may be included..??
Does it work on other platforms (eg Mac)..?
Sebastien Tardif says
I have the same question. How am I suppose to change the color of tools?
When I follow your instruction the tiny buttons used to expand / collapse panel stays blue.
Ext JS 4 have been release for couple of months now. The SDK tools is still in beta.
My question on the subject: https://staging.sencha.com/forum/showthread.php?145487-Sencha-SDK&p=642733#post642733