How to Create a Dark Ext JS Theme (part 1)

Posted on in CSS Sass

Introduction

Every now and then, I demo my Spotifinder Ext JS app. It’s a really cool app that connects to LastFm and Spotify. I created it, to demo Ext JS concepts in my training classes. It also shows off the great theming capabilities in Ext JS.

This year, I presented advanced theming at SenchaCon and I received lots of questions about how I created the Spotifinder app theme. So I decided to write a tutorial on how to create a really cool, good looking dark theme.

You can use this tutorial to help you build your theme for the Sencha Application Theming Contest.
The first prize winner gets $2,500!

Sign up now

The tutorial files I used for this tutorial can be found here. It’s basically just a simple Ext JS app (view) with many components, like a grid, and some other components. You can use any other Ext JS (4, 5 or 6) application as well, but I used this as a reference point, and I used Ext JS 6. What’s great about theming an “all-component” -app, is that you see on the fly how your new theme looks like, without clicking through a real-life app.

Another prerequisite: Sencha Cmd needs to run on your command line. Test with this command: sencha which. It should output a version number – for Ext JS 6, the Cmd version should be 6.x.

Neptune theme

Ext JS themes use Sass, which stands for syntactically awesome stylesheets, and yes, it’s indeed awesome. Its a more dynamic way to write CSS code. For example, you can use variables and calculations in your stylesheets. A browser doesn’t understand Sass, only CSS. Therefore, these Sass themes need to be compiled to production-ready CSS code, so your browser can understand it. The compilation process of themes in Ext JS apps runs via Sencha Cmd.

Ext JS ships with a couple of out-of-the-box themes. You can directly switch to one of these themes and use it, or you can extend one of them and modify it. That’s how you create custom themes. The best theme to modify is Neptune or the new Triton. It provides lots of variables you can use to change the look and feel, and because it’s color background and white text on the front, it’s the ideal theme to use to create good looking dark themes. Alright, enough theory, let’s try it out.

Triton theme
Crisp theme

We’ll start by generating a new theme. We’ll just generate a theme package, so you can reuse it in other projects.

Open Sencha Cmd and run the following command:

sencha generate theme theme-spotifext

This will generate a theme package, in my workspace packages/local folder. It will contain a sass/var folder, which will contain a Sass stylesheet with variables. It will be first in the compile order), and it will also contain a sass/src folder, which is the folder that contains Sass stylesheets with mixins and CSS rules. These files will be compiled last, so the pre-defined variables are used. The theme package also contains a resources folder – it can be handy to save assets such as images or fonts in this folder. The package will also contain a package.json file. It has meta info for your theme package. For example, it sets the type of the package to a “theme”. Also, you can write your contact information and description. There is one thing here that you’ll need to change. To create a theme variant of the new Triton theme, change the extend line to:

    "extend": "theme-triton",

Note that themes in Ext JS 6 don’t have the "ext-" prefix anymore.

Now, to see your variant of the Triton theme in the theming demo app, you need to wire it up the correct way.

Switching Themes

I mentioned “the correct way” on purpose because in traditional web design you would change stylesheets by opening the index.html page and swapping the ‹style› tags. It doesn’t work like this in Ext JS applications – you swap your themes via the app.json file. What’s happening here is that the Ext JS microloader loads the correct stylesheet for you, via the bootstrap.css file, which is included in your index.html. The bootstrap.css points to a CSS build version of your Sass theme. This way of serving themes has a huge advantage; all your paths to images and fonts will be all the same across any environment: development, test, or production.

You can wire up your new Spotifext theme by opening app.json of the demo app and changing the "theme" line to:

"theme": "theme-spotifext"

The next step is to build your application with sencha app build or sencha app build development (which only builds the theme instead of the full app), and you’re good to go.
In case you’re running a universal app and you want to use the Spotifext theme for the classic toolkit, you should wire up the theme to a build profile. For example:

"builds": {
   "myclassicprofile": {
      "toolkit": "classic",
       "theme": "theme-spotifext"
    },
 
   "mymodernprofile": {
      "toolkit": "modern",
      "theme": "theme-cupertino"
   }
 },

Variables

The first thing you’ll need to do is create some files. You can create the following file structure, in your package folder (packages/local/theme-spotifext):


sass/var/_config.scss
sass/var/Component.scss
sass/var/button/Button.scss
sass/var/form/field/Base.scss
sass/var/grid/Panel.scss
sass/var/tab/Panel.scss

Notice the naming of the files. Everything, except _config.scss, maps to the framework components. Component.scss – > Ext.Component, and grid/Panel.scss to Ext.grid.Panel.scss. This mapping is set up in the app.json file as a sass namespace. You don’t need to change that.

An important feature of Sass is the ability to define variables. Do you remember when you used to use plain old CSS? You coded a full stylesheet and by the end of the week someone in your company wanted you to change one of the application colors. It was a huge problem because you had to find and replace all those color values, including all the color codes with lighter or darker contrasts.

With Sass, this is not a big deal anymore. You just define a variable at the top of your file. Later in your CSS rules, you point to those pre-defined variables. Because a Sass stylesheet is compiled, it makes your stylesheet a lot more dynamic.

Try this out. In the Component.scss file, you will include your own color configuration sheet (that’s the _config.scss file). Just write the following line at the top of var/Component.scss:
@import ‘_config.scss’;

Now in the _config.scss file, define a couple of vars which you can use though the full stylesheet. You can define these variables at the top of the file:

//my own variables
$dark-bg: #000;
$dark-bg2: #121314;
$dark-bg3: #222326;
$dark-bg4: darken(#88898C, 15%);
 
$front-color: #adafb2;
$front-color2: #fff;
 
$highlight-color: $base-color;
$highlight-color2: lighten($highlight-color, 20%);
$highlight-color3: darken($highlight-color, 20%);
 
$font-family: 'Montserrat', helvetica , arial , verdana , sans-serif;
$font-size: 12px;

Note the $highlight-color2 and 3, these use built-in Sass functions to change the highlight-color to a 20% lighter or darker tone of the color.

We understand that Sass variables are an extremely important feature of Sass, so Ext JS uses Sass variables as well. There are actually two types of variables: Global variables and Component variables.

Global Variables

The first variable you’ll set is the $base-color – it’s a global Ext JS Sass variable. When you change this variable, it will affect everything in the global scope. Many other colors will be calculated based on the $base-color.

You can find all the Global variables in the API docs by searching for Global_CSS. Or, even better, you can use Sencha App Inspector – see below for more information.

For your theme, you can use these global vars and put them in var/Component.scss:

$base-color: #639000;
 
$body-background-color: $dark-bg3;
$color: $front-color;
$enable-font-smoothing: true;

Component Variables

Inside Component.scss, I have set a bunch of component variables too. Take a look at my files in the packages/local/theme-spotifext/sass/var/ folder in Git.

I moved some of these component variables to their own scss file, as I did for grid/Panel.scss. That’s just so I can maintain smaller files. By using variables, you’ll notice that I styled about 80% of my application, and I don’t have any problems with CSS overrides. You can find Component Sass variables in the API docs for the component you want to style. For example, search for grids and then click on the CSS vars button. There are a lot of variables to choose from. Before Ext JS 6, you had to use trial and error. But, with Ext JS 6 and App Inspector, it’s a piece of cake to figure out which variable you should use.

Ext.grid.Panel

Sencha Inspector

Sencha Inspector is a new stand-alone tool. With this tool, you’re able to inspect your Ext JS code, including your MVVM patterns. You can inspect applications, running in any browser or device, even apps that are running in Sencha Web Application Manager.

Not only are you able to inspect your JavaScript code, you can inspect all your Ext JS Sass variables. Together with Fashion, the new way of compiling Ext JS Styleheets, this is super powerful.

For this tutorial, you can try out the awesome theming feature. Download Sencha Inspector Early Access version.

When you search for an Ext JS 6 component in the theme panel, it will expose all the available Sass variables. This will save you from manually browsing through all the docs.

Theme panel

With Fashion (read more below), you can enter values for all these variables, and you’ll see the result immediately on your screen. This is great for testing when you don’t know which Sass variable you need to use. Because you no longer need to wait for app builds or theme compilations, this really speeds up your theme development time. I work with my IDE and Inspector on one screen, and my application running in a browser on another monitor. As soon as I find the right Sass variable with Sencha Inspector, I copy it over to my theme package.

Take a moment and browse through the sass/var code in my package on Github. Within a couple of hours, I finished 80% of my theme.

To get this up and running, you’ll need to have Inspector installed along with Sencha Cmd.
See the docs.

Within Sencha Cmd, you’ll run the built-in webserver (it’s a Jetty web server).

Open Sencha Cmd and run the following command:

sencha app watch

After sencha app watch starts the web server (by default it’s on port 1841), Sencha Cmd polls for changes. Next, open the following URL in your browser:

http://localhost:1841/extthemingapp/?platformTags=fashion:true

Once the app is loaded and finishes compiling the theme for the first time, you’ll have to copy and paste the following bookmarklet in your browser console to create a connection between App Inspector and your app.

javascript:!function(a,b){var a=a||3e3,b=b||"http://localhost",c=b+":"+a+"/inspector.js",d=function(a,c){var d=document.createElement("script");d.type="text/javascript",d.src=a,document.addEventListener("load",function(){"undefined"!=typeof Ext&&"undefined"!=typeof Ext.onReady&&Ext.onReady(function(){if(window.SenchaInspector){var a=document.head.getAttribute(“data-senchainspectorport");SenchaInspector.init(b+":"+a)}})},!0),c?document.head.insertBefore(d,document.head.firstChild):document.body.appendChild(d)};document.head.setAttribute("data-senchainspectorport",a),d(c,!0)}();

If you’re interested in what’s going on under the hood, App Inspector uses WebSockets. The App inspector script is running on port 3000. That’s how the standalone app can inspect your application code. Now, we’ll look at compiling the themes.

Sencha App Inspector

Fashion

I mentioned the word Fashion above. And no, I am not talking about the latest style of clothing. This is a new way of compiling themes that is built into Sencha Cmd.

To compile a theme in Ext JS, you use Sencha Cmd and run either:

sencha app build [development]
or
sencha app watch [toolkit]

The difference here is that watch is polling for changes, and compiles on the fly, while sencha app build only compiles manually once.

In older versions of Ext JS and Sencha Touch, the Sass stylesheets were compiled on top of Ruby (on Windows, you had to install Ruby with administrator rights). Once everything was set up, you could start compiling the themes, but that compilation took a lot of time – especially when you had a large codebase and an advanced theme. You can see why I am so happy about Fashion.

With Fashion, you can compile your themes on top of JavaScript. It’s so fast that when I change a line of code on my left monitor, it’s already changed on the right monitor before I can turn my head. I don’t need to wait for the compilation (except when starting the server), and I don’t need to refresh my browser window.

The magic all happens under the hood. Sencha Cmd is running PhantomJS in the background, which is basically a headless browser that you can run from the command line. It will run your application, compile the theme, and put it all into one big JavaScript function. Every change you make – whether it’s in your IDE/editor, in the classic or modern toolkit, or with Sencha Inspector – is handled by JavaScript which changes the styling in the DOM. There are many more advantages. For example you can extend on top of Fashion and create your own styling functions (like Sass functions), and you can debug your stylesheet code. You can see these the big advantages on your development machine while you’re designing your theme.

To get this up and running, you’ll need to run sencha app watch classic from your command line and run the following arguments in your URL: ?platformTags=fashion:true and then you are good to go:

http://localhost:1841/extthemingapp/?platformTags=fashion:true

Coming Up

There are a few more things I did in my spotifext theme to make it look awesome. I wrote some CSS rules to animate the button hovers, used custom fonts, and created my own button and tab panel variants to make it look unique.

In part 2 of this article, I will explain mixins versus css overrides as well as fonts and icons.

With this information, you should be able to create good looking themes.

Sign up for the Sencha Application Theming Contest. The first prize winner gets $2,500!

Dark theme
Dark theme

Resources:

Sencha Theming Guide
My SenchaCon Presentation
Download Sencha App Inspector Early Access
Tutorial demo files

Creating Theme-Specific Overrides in Ext JS

Posted on in CSS Ext JS Sass Sencha

Ext JS provides a number of functions that make it simple to create and work with classes. It also provides a series of functions to extend or override existing JavaScript classes. This means you can add behaviors and create your own classes, or override the behavior of some functions. In this article, we will show you how to use theme-specific class overrides.

You probably already know how to create an Ext JS class override. For example, you might want to change default behavior or patch the framework. In that case, you would create the class override using this code:

Ext.define('SomeClassName', {
    override : 'Ext.panel.Panel'
 
    //the override: by default, all panels will have a 200px width
    width : 200 
});

The first questions that come up are: what do you name this override class and where do you put it. You may be creating a class override that is specific to a theme. Wouldn’t it be nice, to have this JavaScript override bundled together with your custom theme? For example, in your custom theme, all panels should have a box-shadow. Or perhaps, you created an awesome CSS3 animation that will be visible any time you open a popup window. Unfortunately, the old versions of Internet Explorer can’t handle CSS3, so you might want to write a JavaScript fallback. In both cases, the default functionality change is visual. So, where in your file structure can you create these overrides, so they don’t break any other themes?

The trick is the overrides folder. With Sencha Cmd 3.1, it’s possible for applications and packages to save class overrides in the overrides folder. By default, when you generate a (theme) package, it already contains such a folder, and it has been set up to support overrides.

Let’s create a JavaScript fallback. For a simple animation, we will animate the opacity when opening a popup window.

Create the following file structure in your theme package, (let’s assume the name of this package is called: MyTheme ):

packages
> MyTheme
> > overrides
> > > window
> > > > Window.js

This file structure maps to the file structure of the framework for Ext.window.Window.

Let’s define the class:

Ext.define('MyTheme.window.Window', {
 
});

This class will override from Ext.window.Window:

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window'
 
});

Let’s test if this override works. First, run this from the command-line:

sencha app refresh

At this point, the previous code won’t change any functionality yet. Let’s output a console log as soon as the class is created, and test it in a browser:

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window'
 
}, function(){
    console.log("Oh yes, my override works!");
});

Let’s create the custom behavior. This override will add an animation on the beforeshow listener of a window:

listeners: {
    beforeshow: function(mywindow){
 
    }
}

The beforeshow listener will create a new animation (Ext.fx.Anim), so first you have to require the animation in your class:

requires: ['Ext.fx.Anim'],

Next, you include the code for creating the animation in the beforeshow event. For now, we will create a very simple animation, which changes the opacity to smoothly display the window (mywindow) from hidden to 100% visibility:

Ext.create('Ext.fx.Anim', {
    target: mywindow, //argument of the beforeshow event
    duration: 1000, //ms
    from: {
        opacity: 0
    },
    to: {
        opacity: 1
    }
});

Now, you can test if the animation works.

To top it off, let’s create a nice CSS3 animation for the modern browsers as well. We will wrap the Ext JS animation into a check that will only execute when the browser is an old version of Internet Explorer (IE9 or lower):

if(Ext.isIE9m) {
 
}

Confirm your code looks like this:

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window',
 
    requires: ['Ext.fx.Anim'],
    closeAction: 'hide',
    listeners: {
        beforeshow: function(mywindow){
 
            if(Ext.isIE9m) {
                Ext.create('Ext.fx.Anim', {
                    target: mywindow,
                    duration: 1000,
                    from: {
                        opacity: 0
                    },
                    to: {
                        opacity: 1
                    }
                }); 
            }
        }
    }
});

The only thing that is missing is the Sass code for the CSS3 animation. We will use Compass for that.

In the theme package, we can add the following Sass code to packages/MyTheme/sass/src/window/Window.scss. The code below shows the same animation that we coded in the JavaScript file:

@import "compass/css3/transition";
 
.x-window.x-hide-offsets {
    @include opacity(0);
}
 
.x-window {
    @include single-transition(opacity, 1000ms);
    @include opacity(1);
}

You will need to compile the Sass stylesheet to production-ready CSS code. Since this is included in Sencha Cmd and the Sencha build process, the Sass stylesheet will be automatically compiled when building the application with Sencha Cmd.

For now, we don’t need to build the whole application, we just want to quickly test the animation and only compile the stylesheet. You can achieve this by running one of the following commands from the command-line:

sencha ant sass

or

sencha app watch

The first command runs the Apache Ant task to compile the Sass once. The second command is more powerful, but it requires you to download and install Java Development Kit 7. You can compare sencha app watch with the Compass command: compass watch. Sencha Cmd watches the app and every time you hit save, Sencha Cmd builds your app and compiles your Sass Stylesheets. When changes are detected, only the minimum amount of work necessary is performed to bring your app and its CSS up to date, saving you from rebuilding your Sass.

Voila — the animation works in old and new browsers.

If you’d like to learn more about this and many other advanced Ext JS theming techniques, take our Advanced Theming Ext JS course. Check out http://www.sencha.com/training/ to join one of the Theme331 Advanced Theming classes located around the world or join an online class.

Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 2)

Posted on in CSS Sass Sencha Sencha Touch

In this three-part Sencha Touch tutorial, you will build the Do I need my Umbrella app, a simple utility app that loads weather information from a web service — worldweatheronline.com. Based on weather codes, this app can predict if you need your umbrella or not.

In this second part of the tutorial, you will start to build an app theme. You will use the code from part 1 of this tutorial. You can find the tutorial here.

Here are some additional resources:
You can download the final app code — full solution and stylesheet.
There are some tutorial goodies.
You can see the app itself with the custom theme here.

This tutorial requires:

  • Sencha Touch 2.3 or higher
  • Sencha Cmd 4.x
  • Compass & Sass on top of Ruby
  • A modern browser
  • Editor

Extend from the default theme

You will build a custom theme that is based on the default theme. The default theme is a good theme to extend from, because it has a lot of Sencha Sass variables and mixins, which can be found in the API Docs.

Weather App Tutorial

By default, when generating an application with Sencha Cmd, a resources folder is already generated for you, with an empty Sass stylesheet: app.scss. Let’s open: app.scss

The Sass stylesheet will look like this:

//(1) Define your Sencha variables here

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

//(2) Define your custom Sass/CSS code and mixins here

In the top (1), you will define all your (Sencha) variables; directly after the variables you will include the mixins. It’s important to keep this order, otherwise the variables won’t have any effect. The imports make use of these variables.

After the imports (2), you can start writing your own custom CSS rules and mixins.

Let’s start very easy and change the base-color:

$base-color: #42282E;

By changing the base-color, you will set a primary color scheme that most of the Sencha Touch components use.

Let’s test it. With Sencha Cmd on the command-line, run the following command: sencha app watch

Sencha Cmd 4 and higher has the command sencha app watch. You can compare this with the Compass command: compass watch. Sencha Cmd watches the app and every time you hit save, Sencha Cmd builds your app and compiles your Sass Stylesheets. When changes are detected, only the minimum amount of work necessary is performed to bring your app and its CSS up to date, saving you from rebuilding your Sass.

Preview your application in a modern browser: http://localhost/dinmu.

Now let’s play around. Sencha Touch has some really good Sass variables and mixins you can use to easily customize your theme. A great tool to get the right color combinations is Adobe Kuler. Go explore some populair color schemes: https://kuler.adobe.com/explore/most-popular/?time=month, and let’s use these as the color variables for Do I need the Umbrella app.

Let’s set the colors for the buttons, alert box, and both screen backgrounds (settings and main):

$alert-color: #D6665A;
$confirm-color: #75A48B;
$page-bg-color: lighten(#D9CFB0,15%);
$form-bg-color: $page-bg-color;

Also, let’s get rid of all the gradients:

$base-gradient: 'none';

The bottom toolbar has the ui: ‘light’. Let’s create a mixin to style the light skin of the bottom toolbar. You can use the sencha-toolbar-ui for this. We can implement it below the sencha imports (2):

@include sencha-toolbar-ui('light', #DC9B74, 'none');

Weather App Tutorial

Create custom CSS

Now let’s implement our own CSS rules.

First, we will modify the toolbar title text:

.title {
    .x-title {
        line-height: 2.5em;
        text-shadow: none;
        letter-spacing: -1px;
    }
}

Next, let’s position the footer text:

.footer {
    font-size: 0.6em;
    padding: 12px;
    text-align: right;
    letter-spacing: 0;
    a {
        color :#000;
    }
}

You will also need some styles for the custom template. Let’s modify the font and font colors:

.textview {
    color: black;
    line-height: 1.2em;
    letter-spacing: -1px;
    padding: 0.8em;
    text-transform: uppercase;


    .yes {
        color: $alert-color;
    }
    .no {
        color: $confirm-color;
    }
    .temp {
        color: $confirm-color;
    }
}

Let’s edit the settings form. In your Sass stylesheet, create the styles to tweak the settings form:

.x-form-fieldset {
    .x-form-fieldset-inner {
        border: none;
        background: $page-bg-color;
    }
    .x-form-fieldset-instructions .x-innerhtml {
        color: #000;
    }
}

.x-form-label {
    background-color: lighten(#DC9B74, 32%);
}
.x-toggle-field .x-form-label {
    background: none;
    border: none;
    margin-bottom: 20px;
}
.x-toggle {
    position: absolute;
    right: 0;
}

Implement a custom font

Right above the sencha imports, add the imports for the font. We will make use of the Google Fonts service. With this font-service you can browse through lots of hosted font families and choose a font to implement:

@import url(http://fonts.googleapis.com/css?family=Oswald:700);
@import url(http://fonts.googleapis.com/css?family=Lobster);

Now, set the fonts.

For the toolbar title, add the following rules to the .x-title CSS class:

font: {
    family: "Lobster";
    size: 1.2em;
}

For the template view, add the following rules to the .textview CSS class:

font: {
    family: "Oswald";
    size: 2em;
}

Tweak the performance

If you want to optimize your Sencha Touch application for performance, optimizing your Stylesheet is probably the easiest thing to do; and it's very effective. Let’s reduce the file size of the compiled CSS stylesheet.

Automatically, when you generated your app with Sencha Cmd, the compiled CSS stylesheet was minified. This works because of the output_style setting in the resources/sass/config.rb file. Would you rather have the output readable? Set the output_style value to :expanded, but note, your file size will grow.

Check the resources/sass/config.rb file, it should be set like this:

output_style = :compressed

Instead of importing all Sencha Touch framework mixins, let’s only import the ones that are absolutely necessary. This will reduce the stylesheet size, so it will be faster to download.

I usually comment out the @import line that imports all the mixins. Then, I list all the Sencha Touch mixins myself, and I make sure Sencha Cmd is watching/compiling my Sass file (sencha app watch).

Then I start to comment out the mixins one by one, based on the classes I don’t use. This is tricky though; there are classes that you may have never directly coded, but they are subclasses from other classes, such as +Class+ or +Panel+. That's why you should remove them one by one, while watching your terminal to see that you don't get any compile errors. The list of all the available Sencha Touch mixins can be found in: touch/resources/themes/[theme-to-extend-from]/all.scss.

Replace @import ‘sencha-touch/default/all’ with the following imports:

@import 'sencha-touch/default/src/_Class.scss';
@import 'sencha-touch/default/src/_Button.scss';
@import 'sencha-touch/default/src/_Panel.scss';
@import 'sencha-touch/default/src/_MessageBox.scss';
@import 'sencha-touch/default/src/_Toolbar.scss';
@import 'sencha-touch/default/src/carousel/_Carousel.scss';
@import 'sencha-touch/default/src/form/_Panel.scss';
@import 'sencha-touch/default/src/form/_FieldSet.scss';
@import 'sencha-touch/default/src/field/_Field';
@import 'sencha-touch/default/src/field/_Checkbox.scss';
@import 'sencha-touch/default/src/field/_Select.scss';
@import 'sencha-touch/default/src/field/_Slider.scss';
@import 'sencha-touch/default/src/field/_Spinner.scss';
@import 'sencha-touch/default/src/picker/_Picker.scss';
@import 'sencha-touch/default/src/slider/_Slider.scss';
@import 'sencha-touch/default/src/slider/_Toggle.scss';

We are not using many icons, so there is no need to implement the Pictos icon font. In this case, let’s just use our own icon font, so we can save some extra kilobytes.

Add these variables to the top of your Sass stylesheet right before the import of the Sencha mixins:

$include-pictos-font: false;
$include-default-icons: false;

Now, you will include a custom icon font. I created an icon font via the IcoMoon website: http://www.icomoon.io. It’s in the goodies-tutorial folder of this tutorial. Just copy the dinmu fonts folder over to resources/sass/stylesheets/fonts/.

Underneath the imports of the google font, import the dinmu icon font:

@font-face {
    font-family: 'Dinmu';
    src:url('stylesheets/fonts/dinmu/Dinmu.eot');
    src:url('stylesheets/fonts/dinmu/Dinmu.eot?#iefix') format('embedded-opentype'),
        url('stylesheets/fonts/dinmu/Dinmu.ttf') format('truetype'),
        url('stylesheets/fonts/dinmu/Dinmu.woff') format('woff'),
        url('stylesheets/fonts/dinmu/Dinmu.svg#Dinmu') format('svg');
    font-weight: normal;
    font-style: normal;
}

Below all the imports, create an icon mixin, to display the settings button:

@include icon('settings', 's', 'Dinmu');

Directly after that, you can code some funny icons for the template view:

.rain:before,
.norain:before {
    font-family: 'Dinmu';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    padding-right: 10px;
    font-size: 60px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.norain:before {
    content: "53";
    color: $confirm-color;
}
.rain:before {
    content: "52";
    color: $alert-color;
}

Finally, the Do I need my Umbrella theme is finished! Open your browser and run: http://localhost/dinmu.

Weather App Tutorial

The next steps for improving your application would be to create a production build and port this app to a native PhoneGap app. These topics will be discussed in part 3 of this tutorial.

Interested in creating Sencha themes? Starting in December, Sencha will start offering advanced Ext JS theming courses. Take a look at the open courses located around the world or join an online training.

Installing SASS + Compass for Windows & OS X

Posted on in CSS Sass

I'm getting a lot of hits on this topic, on my old blog; and since I will close this blog down soon; I will copy over the content, to host it here...

Sass = Awesome.
It stands for Syntactically Awesome Stylesheets.
Basically it's CSS on Redbull. Or CSS but with tricks.
It’s an extension on CSS3 and you will also use Compass. (that’s a SASS framework that streamlines the creation of css)

You will need a .scss file and you can compile this to production ready css.

It's very easy to install Sass and Compass on your Mac. Sass is included with HAML.
To get Sass working, you'll need an installation of Ruby. On your Mac this is already done.

On your Windows environment, you'll need to install Ruby via the installer:
http://rubyinstaller.org/about/contributors/
(Make sure you will at Ruby to your class path!)

After running the setup open the commandline: (Windows run > type: CMD)
Check if ruby is installed, navigate to the Ruby bin folder, and type:

ruby -v

If you receive a prompt with the installed version number of Ruby back, then the installation went good.
You can go further...

Now type in your console the following commando's:

sudo gem install haml
sudo gem install haml-edge
sudo gem install compass

(on Windows machine it's almost the same but without the sudo command.)

check if compass is running:

compass -v

Now you can write your SASS (.scss) file.
Create in an editor style.scss or even better: start a compass project:

compass create projectname

This will create:
- A desktop stylesheet
- Print stylesheet
- A configuration file: config.rb

Interested in BluePrint? A framework for implementing CSS3?
http://www.blueprintcss.org
It will automatically deploy together with the above project files. Use this command:

compass create projectname --using blueprint/basic

To convert your SASS (development) file back to .css (production ready code) just type in your console:

sass --watch style.scss:style.css

Or to watch the whole folder:

compass watch . 

And on windows:

C:Rubybin> sass -trace D:Sassdefault.scss:D:Sassdefault.css

Or to watch the whole folder:

compass watch . 

For more info's check these links:
http://sass-lang.com/
http://compass-style.org

CSS Print stylesheet tricks

Posted on in CSS

There are some cool styling tricks, which are nice to have when it comes to printing out a webpage.
Please see my Print CSS snippets and tricks:

  1. Do not use much styles. If you print out a webpage you don?t want to print colors! (unless to color hyperlinks). Keep it plain and simple and write a short print stylesheet.
  2. Make sure you named your (2nd) stylesheet for printing: print.css And give it the ?media? attribute print:
    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    
  3. Use a good readable font. I would say a ?serif? 12pt font and ofcourse keep it black.
    body { color : #000000; background : #ffffff; font-family : "Times New Roman", Times, serif; font-size : 12pt; }
    
  4. It should be clear when a hyperlink is printed. Therefore keep links underlined. You can even color it blue.
    a { text-decoration : underline; color : #0000ff; }
    
  5. Do not print out layout parts, navigation, javascript or flash animations.
    #navigation, #headerImage { display: none; }
    
  6. This is a handy trick: With these styles you can set a page break for printing before or after: Possible attributes are: always (print page break) | auto (default ? page break where page ends) | left | right.
    H1 {page-break-after: auto}
    H2 {page-break-before: always}
    
  7. Another handy trick, is to print the URL after an underlined hyperlink:
    a:link:after, a:visited:after { content: " (" attr(href) ")"; }
    

That's it for now.

200 cialis coupon canada cialis canada viagra cost of levitra levitra vs viagra is viagra funded by government over the counter viagra otc viagra viagra ingredients levitra 10 mg cialis pills for sale viagra substitute viagra government funded levitra loc us cialis alternative cialis 20 mg cialis 5mg viagra for sale cialis coupon is viagra covered by insurance buy levitra cyalis cialis testimonials cialis pills cost of viagra generic levitra buy levitra online female viagra where to buy viagra viagra pharmacy daily cialis lowest cialis prices viagra porn cialis dosage recommendations cialas viagra price cialis without a doctor's prescription cialis or viagra levitra coupons levitra 20mg order online viagra cialis 5mg daily cialis generic viagra for women canadian cialis viagra dosage non prescribed viagra buy viagra online side effects of cialis viagra girls generic cialis tadalafil cialis for daily use viagra generic cialis discount generic cialis at walmart viagra patent expiration cialis 20mg directions online viagra viagra from amazon is viagra government funded levitra cealis levitra online cialis tadalafil levitra canada free viagra online cialis cialis samples cialis 30 day trial coupon herbal viagra side effects of viagra buy cialis online viagra sex cialis canadian pharmacy cialis voucher levitra side effects what is levitra levitra prices cialis savings card levitra 10mg pfizer viagra viagra from canada cialis online cialis dosage strengths erectile dysfunction cialis healthy man viagra liquid cialis viagra cost cialis samples overnight how much does viagra cost sex viagra for women cialis for bph cialis patent expiration 2017 9 levitra at walmart cialis prices best price viagra free cialis cialis trial viagra side effects viagra without prescription does viagra work viagra cvs pharmacy viagra coupons does the government fund viagra how long does viagra last buy cialis what is viagra generic for cialis viagra online cialis generic tadalafil cialis 10 mg cheap cialis viagra activate viagra samples cialis medication levitra dosage what is cialis viagra vs cialis vs levitra cialis copay card viamedic cialis cialis coupon 20 mg when will cialis go generic inexpensive viagra pills how long does levitra last levitra cost cialis patent expiration date extended viagra pill how does cialis work cialis viagra dose viagra canada cost of cialis generic viagra 100mg cialis vs viagra cialis pricing cialis professional cialis free trial viagra alternatives natural viagra cialis coupons women viagra cialis reviews viagra vs cialis cialis canada viagra pills for sale what does viagra do cialis or viagra viagra vs cialis vs levitra levitra vs viagra for hardness levitra coupon cialis for sale cialis 20mg cialis patent expiration viagra without a doctor prescription usa is viagra federally funded how much does cialis cost levitra without a doctor prescription sophia viagra cialis coupons printable generic for viagra discount cialis viagra coupon viagra prices without insurance cialis cost viagra coupons cialis side effects levitra reviews cialis pharmacy prices cialis daily natural viagra alternatives that work price cialis generic viagra viagra pills viagra best price viagra prices viagra coupons 75 off cialis for women is viagra government funded in america cialis coupon print viagra 100mg price walmart canadian viagra discount viagra walgreens viagra substitute viagra single packs cost viagra coupons from pfizer viagra costs cialis generic availability generic cialis revatio vs viagra generic viagra available in usa pfizer viagra coupons viagra vs cialis cialis 5 mg cialis price cialis effects viagra 100mg tablets retail price viagra savings offer how does viagra work cialis dosage utilisation viagra viagra single packs trial viagra sample levitra 20 mg cost walmart wholesale cialis cialis on line cialis coupons from manufacturer cheap viagra sildenafil vs viagra viagra cialis buy viagra cialis otc cilias cialis 30 day sample viagra on line no prec viagra on line levitra 20 mg cialis cheap viagra government funding cialis from canada levitra vs viagra cialis sample how to take cialis viagra without a doctor prescription cialis vs viagra levitra vs cialis cialis website cialis coupons 2017 levitra generic female viagra pills stendra vs viagra cialis for men