Archive for the ‘HTML, CSS’ Category

Why CSS gets confusing and why you should use SASS

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

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

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

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/

 

One time something works in XHTML but not in HTML

Posted on the March 30th, 2007 under HTML, CSS by

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

Absolute-middle in CSS (Images)

Posted on the January 10th, 2007 under HTML, CSS by

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.