HTML, CSS — Tohir Solomons

Why CSS gets confusing and why you should use SASS

Posted on the September 30th, 2010 under HTML, CSS,Internet by Tohir

Take the following HTML file with CSS. How will div2 look?

<html lang="en">
<head>

<title>SASS Test</title>

<style type="text/css">
    div.div1 div {
        border: 4px solid yellow;
        background: yellow;
    }
    div.div1 {
        background: red;
        border: 4px solid blue;
    }

    div.div1 div.div2 {
        background: green;
    }

    div.div2 {
        border: 10px solid orange;
        padding: 10px;
    }
</style>
</head>
<body>
    <div class="div1">
        Div 1
        <div class="div2">
           Div 2
        </div>
    </div>
</body>
</html>

Based on the last definitions, you will expect div2 to have:

a green background color
a 10 pixel solid orange border
a padding of 10 pixels between the border and the text

Actually it will appear like this:

It does NOT have a 10 pixel solid orange border, but instead a four pixel solid yellow border. Even though CSS is cascading, it cascades by CSS rules, not by definitions. Even though an alternate definition is last, if it doesn’t cascade over an existing rule, it will not be applied.

Installing SASS 3.0 on Ubuntu 10.4

Posted on the July 9th, 2010 under HTML, CSS,Linux,Software and Technology by Tohir

Currently, the HAML/Sass version on Ubuntu is 2.2.17. Version 3, also known as Classy Cassidy, includes new features. So how can you install it on Ubuntu.

Firstly, you need Ruby:

sudo apt-get install ruby

Thereafter (without sudo):

gem install haml-edge

This will install Haml and Sass into your directory, but at least you will have access to the latest version. Message that appears:

WARNING:  Installing to ~/.gem since /var/lib/gems/1.8 and
 /var/lib/gems/1.8/bin aren't both writable.
WARNING:  You don't have /home/tohir/.gem/ruby/1.8/bin in your PATH,
 gem executables will not run.
Successfully installed haml-edge-3.1.49
1 gem installed

You can test that it is the latest version by:

~/.gem/ruby/1.8/bin/sass -version

Which should return:

Haml/Sass 3.1.49 (Bleeding Edge)

Lastly, there is a nice command to watch files and auto generate an updated version:

~/.gem/ruby/1.8/bin/sass -t compact --watch [inputfile]:[outputfile]

like:

~/.gem/ruby/1.8/bin/sass -t compact --watch browseView.scss:browseView.css

ExtJS Books coming soon

Posted on the June 24th, 2009 under HTML, CSS,JavaScript,Software and Technology by Tohir

Here is a list of some of the ExtJS Books, one is already published, others should be out later this year:

	Learning ExtJS This book has already been published and is available for purchase. As the first and currently only book available, it is quite a useful reference. What you will learn from this book? Create responsive forms Look at Web Applications from an entirely new perspective Learn to use the major UI components available in Ext JS Understand how external data can be consumed by Ext JS Query and process remote data into your application Use Layouts to bring all of the Ext JS pieces together Use Ext JS effects to manipulate the DOM in exciting ways Provide a consistent look and feel to your application using Components Change the visual style of Ext JS using theming support Find Custom Community Extensions to expand your applications Create your own custom library extensions

	Practical ExtJS Projects with Gears This promises to be an exciting book focussing on practical case studies, and also integrate offline usage with Google Gears. Expected in July 2009 What you’ll learn Get an understanding of one of today’s hottest JavaScript frameworks and libraries, Ext JS. Develop interesting Web 2.0 “front ends,” RIAs (Rich Internet Applications), and more. Create a number of applications from the projects or pragmatic case studies that the author gives you. Create an organizer, timekeeper, a code cabinet, and more. Get back to basics and back ends using a SQL workbench, Google Gears, and Ext BASIC. Pull it all together by designing a game using Ext JS. And more…

	ExtJS in Action Expected in January 2010, although some chapter are available with the Manning Early Access Program http://www.manning.com/garcia/