Creating Sencha ExtJS theme using SASS and Compass


Overview

Creating themes using CSS is awesome, but its complex syntax maked life difficult. As project grows and demands more and more styling consumes lot of time in organizing it perfectly.

To over come all these, as part of this article we will see how Sass and Compass will help in creating the themes easily and use it in your application.

Problem Statement

To understand how to use Sass and Compass for creating our custom theme, let us consider following use case and understand it easily.

As part of this article you will see the custom theme creation for the ExtJS sample application with simple panel. We will change the theme from default to our custom one, which you can see in Detail section.

Pre-requisites

  • Sample ExtJS application
  • Gem installation
  • Basic CSS knowledge

Details

Step 1: Install compass in your machine

   For linux :  Open the terminal and run following command, with super user permissions,

gem install compass

After successful installation of compass you will see following message,

Successfully installed compass-0.12.2
Parsing documentation for compass-0.12.2
Done installing documentation for compass (3 sec).
1 gem installed

Step 2: Install CSS parser

To view the output statistics of your Sass stylesheet, let us install CSS parser.

One your terminal and type following command with super user permissions,

gem install css_parser

After succssful installation of css_parser you will see following message,

Fetching: addressable-2.3.4.gem (100%)
Successfully installed addressable-2.3.4
Fetching: css_parser-1.3.4.gem (100%)
Successfully installed css_parser-1.3.4
Parsing documentation for addressable-2.3.4
Installing ri documentation for addressable-2.3.4
Parsing documentation for css_parser-1.3.4
Installing ri documentation for css_parser-1.3.4
Done installing documentation for addressable, css_parser (2 sec).
2 gems installed

Step 3: As mentioned in the problem statement section create an sample ExtJS app or download from following link

Sample Registration application

Step 4: Create an compass project

You can create an project any where in system and copy the files to your project css directory else you can directly create project in your project css location.

As part of this article, you will see the compass project created directly insider ExtJS app CSS resource directory only.

Open the terminal and type below command

cd <project-directory>/RegistrationSample/resources/

now create an project by executing below command

compass create wtctheme

After successful creation of compass project you will observe the following directory structure:

compass_project

Following image shows the directory structure for the compass project

compass_dir

Step 5: Point your project CSS directory in config.rb file as below

Open the config.rb file from compass project and change the css_dir path to correct path,

i.e.  as per this sample app the value is

css_dir = “../css”

and save the file.

Step 6: To observe the changes made and ensuring the correctness lets start the compass watch by executing following command in terminal

compass watch

After executing above command you will see the following message

>>> Change detected at 11:42:55 to: ie.scss
create ../css/ie.css
create ../css/screen.css
create ../css/print.css
>>> Compass is watching for changes. Press Ctrl-C to Stop.

Step 7: Now lets write some saas

Open the screen.scss file from

<project-path>/RegistrationSample/resources/wtctheme/sass/

Write import statements as below

@import "compass";
@import "compass/css3";

As part of this article we will see how we can create our theme for registration sample panel.

Following image shows the default Registration panel

default_registrationpanel

To start with, we will change the style for Registation panel header i.e.

panel_header

To change the panel header style write below saas code in screen.scss file as below

/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import "compass/reset";
@import "compass";
@import "compass/css3";
$header-color:#F9A826;
.x-panel-header-default-framed-top{
background-color:$header-color;
background-image: -webkit-linear-gradient(top,$header-color,$header-color 45%,$header-color 46%,$header-color 50%,$header-color 51%,$header-color);
-webkit-box-shadow : $header-color 0 1px 0 0 inset,$header-color -1px 0 0 0 inset,$header-color 1px 0 0 0 inset;
}

and save the file and watch the compass stats at terminal which shows following stat,

cwatch_panelheader

In order to see the changes made make add the screen.css file to the index.html as below

Open the index.html from <project-path>/RegistrationSample/ and add following line to load the css file

<link rel="stylesheet" href="resources/css/screen.css">

Now refresh the app at browser and observe the changed style for the Registration header panel at following image

Screenshot-2

Similarly write some more code into screen.scss and see how theme of Registration Panel changes as below

@import "compass";
@import "compass/css3";
$header-color:#F9A826;
$header_footer_height :100px;
$padding :100px;
$color:green;
$background-color:#A7CE41;
$color:white;
$border-color:#A7CE41;
$body-color:#ffffdd;
$box-background-color:#EBF6C6;
$reg-form-panel-body-background:#FFEBC1;
$reg-form-panel-body-border-color:#FDBF3B;
.x-panel-header-default-framed-top{
background-color:$header-color;
background-image: -webkit-linear-gradient(top,$header-color,$header-color 45%,$header-color 46%,$header-color 50%,$header-color 51%,$header-color);
-webkit-box-shadow : $header-color 0 1px 0 0 inset,$header-color -1px 0 0 0 inset,$header-color 1px 0 0 0 inset;
}
.x-panel-body-default-framed{
background:$reg-form-panel-body-background;
border-color:$reg-form-panel-body-border-color;
}

.x-panel-header-default-framed{
border-color:$border-color;
}

.x-panel-default-framed{
background-color:$background-color;
}
.x-panel-header-text-default-framed{
color:$color
}

Now let us see new theme for Registration panel, refresh the application in browser you will see panel with theme as below

panel_compasstheme

Step 8: Now let us write custom mixin for buttons and use it in Registration panel

In this step you will see how we can define an our own mixin and use it for button.

Copy below code and past in screen.scss

// Mixin for button
@mixin wtcbutton-css{
border-radius:$wtcbutton-border-radius;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}
// Use mixin
.x-btn-default-small {
@include wtcbutton-css;
}

Now refresh the application to see the output for the button

compass_bt

Conclusion

As part of this article you saw how to create an custom theme and use it in ExtJS application.

Reference

http://thesassway.com/beginner/getting-started-with-sass-and-compass

About

Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: , ,
Posted in Sencha ExtJS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: