extjs-theme¶ ↑

Generates a Sass version of Ext theme. Includes methods for colorizing images.

This Gem depends upon RMagick and haml-edge

The Gem is hosted at Gemcutter. Install the gem with:

gem install extjs-theme

or add

gem ‘extjs-theme’ to you Gemfile and execute

$ bundle install

In the root of your Rails app, first execute the following in your console:

$ bundle exec xtheme init <path/to/ext> <path/to/stylesheets/sass-dir>

This creates a YAML config file named config/xtheme.yml in the application root. </path/to/ext> defaults to public/javascripts/ext-3.2 and </path/to/stylesheets/sass-dir> defaults to public/stylesheets/themes.

— theme_dir: app/stylesheets/themes ext_dir: public/javascripts/ext-3.2.0

or generate a custom configuration file by execute the following in your console:

$ bundle exec xtheme init <path/to/ext> <path/to/stylesheets>

Every subsequent xtheme command will act up those directories. If you download a new version of Ext, simply re-execute xtheme init with the new path

Example

$ bundle exec xtheme init public/javascripts/ext-3.3.0

To generate a new Sass theme:

$ bundle exec xtheme create my-theme

In Rails, this will have created a new directory public/stylesheets/themes/my-theme

The generator creates a main include file called my-theme/all.sass which contains @include directives for each individual Ext stylesheet. You *no longer need* to include the ext-all.css file from the Ext library – my-theme/all.sass contains all it needs. In a Rails view, you would include this file in the standard Haml/Sass manner.

=stylesheet_link_tag “my-theme/all”

or in an erb template:

<%= stylesheet_link_tag “my-theme/all”

The generator also creates a copy of all the Ext theme images in my-theme/images

Another important sass file created is my-theme/defines.sass. This file contains Sass variable declarations added to each Ext sass file.

$img_path: ‘../themes/my-theme/images’ $font: tahoma,arial,verdana,sans-serif $hue: -90.0

For more on Haml and Sass, consult the HAML documentation to learn about including Sass stylesheets.

The Gem includes commands for theme colorization, including image-processing through RMagick.

Currently, the only effect available is modulate, for modifying the hue, saturation and lightness of a theme according to RMagick:

$ bundle exec xtheme modulate <theme-name> <hue> <saturation> <lightness>

The parameters hue, saturation and lightness are defined as “Float numbers, for example, 0.25 means ”25%“. The median value of each argument is 1.0, that is, 100%”

Based upon the default blue Ext theme, the following will generate a pink theme:

$ bundle exec xtheme modulate my-theme 0.5 1.0 1.0

A green theme:

$ bundle exec xtheme modulate my-theme 1.5 1.0 1.0

*Only hue works currently, saturation and lightness are under development*

Copyright © 2010 Christocracy. See LICENSE for details.