Tohir Solomons » HTML, CSS http://www.tohir.co.za Fri, 11 Mar 2011 09:30:42 +0000 en hourly 1 http://wordpress.org/?v=3.1.1 Why CSS gets confusing and why you should use SASS http://www.tohir.co.za/2010/09/30/why-css-gets-confusing-and-why-you-should-use-sass/ http://www.tohir.co.za/2010/09/30/why-css-gets-confusing-and-why-you-should-use-sass/#comments Thu, 30 Sep 2010 11:19:26 +0000 Tohir http://www.tohir.co.za/2010/09/30/why-css-gets-confusing-and-why-you-should-use-sass/ 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.

The way of forcing it to it override a rule is to use !important. Redefining the last rule as:

div.div2 {
border: 10px solid orange !important;
padding: 10px;
}

results in:

Also note that even though padding does not have !important, it gets applied because a definition for padding does not exist.

And just to make things more confusing, lets add another rule for div, so that the final CSS looks like this:

<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 !important;
padding: 10px;
}

div {
padding: 100px;
}
</style>

We’ve added a definition for div to have a padding of 100 pixels. This results in:

It gets applied to the outer div, but not the inner! Enough to confound even the most hardcore .Net/Java developers.

!important may help, but this hack is not the best way of overcoming CSS issues.

One better way of doing this is to use Syntactically Awesome Stylesheets or just Sass as its call. But first some theory on what Sass is.

According to its website,

Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Sass provides a means for structuring your CSS in a nested way with rules, variables and functions, but that then has to be compiled (by Sass) into a CSS file.

Installation of Sass

Sass requires the Ruby programming language. Sass itself is a Ruby Gem (as its called). Installation for Ubuntu can be found here: http://www.tohir.co.za/2010/07/09/installing-sass-3-0-on-ubuntu-10-4/

Check that you are using version 3, as it has more features.

Creating Your first Sass file

1) Create a file call mycss.scss. SCSS is the generally accepted standard for Sass files.

2) Next, using a terminal, browse to the directory where that file is, and run the following command:

sass -t compact –watch mycss.scss:mycss.css

Or in the case of the problem with Ubuntu:

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

3) In the  mycss.scss file, add the following:

body {
div.div1 {
border: 1px solid red;
background: yellow;

div.div2 {
border: 1px solid blue;
}

}
}

If you now open the mycss.css file, its generated contents will be:

body div.div1 { border: 1px solid red; background: yellow; }
body div.div1 div.div2 { border: 1px solid blue; }

Notice how it generates the rules, and how they use the same style of rules to make it cascade properly. When sharing the original Sass file, it also makes it easier for others to understand the CSS.

The SCSS file is more important the the CSS file, as the CSS file can just be regenerated. All additions should be made to the SCSS file, but dont forget to generate the CSS one.

Lastly, a quick look at other CSS features. Assume that the design team decided when showing a boxed item, the borders of each of the sides should be different. Top has to be ridge, right dotted, bottom solid, and left dashed.

In Sass you can write a function (called a mixin), and then call that function later on.

@mixin borders($width, $color){
border-top:    $width ridge  $color;
border-right:  $width dotted $color;
border-bottom: $width solid  $color;
border-left:   $width dashed $color;
}

body {
div.div1 {
@include borders(blue, 10px);
background: yellow;

div.div2 {
border: 1px solid blue;
}

}
}

Will generate (uncompacted):

body div.div1 {
border-top: blue ridge 10px;
border-right: blue dotted 10px;
border-bottom: blue solid 10px;
border-left: blue dashed 10px;
background: yellow; }
body div.div1 div.div2 {
border: 1px solid blue; }

Much more features are demonstrated on the website at http://sass-lang.com/

]]> http://www.tohir.co.za/2010/09/30/why-css-gets-confusing-and-why-you-should-use-sass/feed/ 0 Installing SASS 3.0 on Ubuntu 10.4 http://www.tohir.co.za/2010/07/09/installing-sass-3-0-on-ubuntu-10-4/ http://www.tohir.co.za/2010/07/09/installing-sass-3-0-on-ubuntu-10-4/#comments Fri, 09 Jul 2010 13:40:51 +0000 Tohir http://www.tohir.co.za/?p=409 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

]]> http://www.tohir.co.za/2010/07/09/installing-sass-3-0-on-ubuntu-10-4/feed/ 3 ExtJS Books coming soon http://www.tohir.co.za/2009/06/24/extjs-books-coming-soon/ http://www.tohir.co.za/2009/06/24/extjs-books-coming-soon/#comments Wed, 24 Jun 2009 12:18:01 +0000 Tohir http://www.tohir.co.za/?p=283 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/

 

]]> http://www.tohir.co.za/2009/06/24/extjs-books-coming-soon/feed/ 0 One time something works in XHTML but not in HTML http://www.tohir.co.za/2007/03/30/one-time-something-works-in-xhtml-but-not-in-html/ http://www.tohir.co.za/2007/03/30/one-time-something-works-in-xhtml-but-not-in-html/#comments Fri, 30 Mar 2007 08:38:00 +0000 Tohir http://tohir.co.za/?p=117 Despite the totally unforgiving nature of XHTML, there’s one time something works in XHTML but not in HTML.

Images in a drop down.

BTW, this will never work in IE. They don’t support XHTML

]]> http://www.tohir.co.za/2007/03/30/one-time-something-works-in-xhtml-but-not-in-html/feed/ 0 Absolute-middle in CSS (Images) http://www.tohir.co.za/2007/01/10/absolute-middle-in-css-images/ http://www.tohir.co.za/2007/01/10/absolute-middle-in-css-images/#comments Wed, 10 Jan 2007 08:10:00 +0000 Tohir http://tohir.co.za/?p=109 Just posting this as a quick reference. To achieve an absolute-middle position for images, just add the following style:

style=”vertical-align: middle;”

Being smarter, you could also

<img src=”..” class=”absmiddle”

And then add to your stylesheet

img.absmiddle {
vertical-align: middle;
}

Lastly, here’s a signature based on CSS that I found funny.

Positioning corrupts. Absolute positioning corrupts absolutely.

]]> http://www.tohir.co.za/2007/01/10/absolute-middle-in-css-images/feed/ 0