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.