# extjs-theme

**Repository Path**: cgb-study/extjs-theme

## Basic Information

- **Project Name**: extjs-theme
- **Description**: No description available
- **Primary Language**: Ruby
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-01
- **Last Updated**: 2023-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

= extjs-theme

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

This Gem depends upon RMagick[http://gemcutter.org/gems/rmagick] and haml-edge[http://gemcutter.org/gems/haml-edge]

== Installation

The Gem is hosted at Gemcutter[http://gemcutter.com].  Install the gem with:

	gem install extjs-theme

or add

	gem 'extjs-theme'
	
to you Gemfile and execute

	$ bundle install

== Usage

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 <code>public/javascripts/ext-3.2</code> and </path/to/stylesheets/sass-dir> defaults to <code>public/stylesheets/themes</code>.

	---
	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 <code>xtheme init</code> 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 <code>public/stylesheets/themes/my-theme</code>

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

	=stylesheet_link_tag "my-theme/all"

or in an <code>erb</code> template:

	<%= stylesheet_link_tag "my-theme/all"

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

Another important sass file created is <code>my-theme/defines.sass</code>.  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[http://haml-lang.com/] to learn about including Sass[http://sass-lang.com/] stylesheets.

== Effects

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

Currently, the only effect available is <code>modulate</code>, for modifying the _hue_, _saturation_ and _lightness_ of a theme according to RMagick[http://www.imagemagick.org/RMagick/doc/image2.html#modulate]:

	$ 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%"}[http://www.imagemagick.org/RMagick/doc/image2.html#modulate]

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

Copyright (c) 2010 Christocracy. See LICENSE for details.