CSS3, HTML5, and Cascading Class Properties

January 22, 2013 voice Tutorials

One of the key premises of cascading style sheets, is that there is actually some cascading going on.  In this article I plan on demonstrating how a data object [a class with properties] can be rendered using CSS3 as the main rendering engine, separate from the data itself. An Object and it’s properties will be represented via nested DIV’s.

I found a terrific ‘Price Card Demo‘ that I’d like to show off as a warm up.  It really is quite cool. Later we’ll change the HTML to implement the object/property concept.

The HTML is quite concise:

<div id="pricing-table" class="clear">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>         
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul> 
    </div >
    <div class="plan" id="most-popular">
        <h3>Professional<span>$29</span></h3>
        <a class="signup" href="">Sign up</a>        
        <ul>
            <li><b>5GB</b> Disk Space</li>
            <li><b>50GB</b> Monthly Bandwidth</li>
            <li><b>10</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul>    
    </div>
    <div class="plan">
        <h3>Standard<span>$17</span></h3>
		<a class="signup" href="">Sign up</a>
        <ul>
            <li><b>3GB</b> Disk Space</li>
            <li><b>25GB</b> Monthly Bandwidth</li>
            <li><b>5</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul>
    </div>
    <div class="plan">
        <h3>Basic<span>$9</span></h3>
        <a class="signup" href="">Sign up</a>		
        <ul>
            <li><b>1GB</b> Disk Space</li>
            <li><b>10GB</b> Monthly Bandwidth</li>
            <li><b>2</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>			
        </ul>
    </div> 	
</div>

What I’d like to see different here is the pricing-table be a class. Should I really believe pricing table is a singleton? So lets change those #price-table styles.

	.pricing-table {
		margin: 100px auto 50px auto;
		text-align: center;
		width: 892px; /* total computed width = 222 x 3 + 226 */
	}

	.pricing-table .plan {
		font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
		text-shadow: 0 1px rgba(255,255,255,.8);        
		background: #fff;      
		border: 1px solid #ddd;
		color: #333;
		padding: 20px;
		width: 180px; /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */      
		float: left;
		position: relative;
	}

… and so on …

That was easy. The only trick is the first div, which needs to change. This will give you an identical display. But now the pricing–table is a class.

<div class="pricing-table clear">
    <div class="plan">
...

Now why did I do all that, mainly to get you thinking classes that have properties. The next change is to do something with those generic LI elements. Let’s call one of them ‘bandwidth.’

    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="">Sign up</a>         
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <div class="bandwidth"><li><b>100GB</b> Monthly Bandwidth</li></div>
            <li><b>20</b> Email Accounts</li>
			<li><b>Unlimited</b> subdomains</li>			
        </ul> 
    </div >

So now that we have an Object named ‘plan’ and a property named ‘bandwidth’ we need some CSS.

            .plan .bandwidth {
		color: #33ff11;
            }

            .plan .bandwidth b {
		color: #ff6666;
            }

So we can of course expand out the rest of the properties.

	.plan .bandwidth {
		color: #33ff11;
            }
            .plan .bandwidth b {
		color: #ff6666;
            }
            .plan .diskSpace {
		color: #33ff11;
            }
            .plan .diskSpace b {
		color: #ff6666;
            }
            .plan .emailAccounts {
		color: #33ff11;
            }
            .plan .subDomains {
		color: #33ff11;
            }

It all looks like this. There is a lot more we could do to make this even more class and property like… (a future tutorial)

You can download the entire page here http://www.voicegap.com/demo/css-cards.html

Building a complete, end-to-end cloud-connected mobile app with no App Store requirements. Cappuccino, Objective-J, and the Future of Cross-Device HTML5 Apps