You can check out the proposals we have already submmitted for review here:
* Zend Calendar.
* Zend Template.

Hope you’ll enjoy!

:

All CSS developers know this fact there are verity of CSS selectors, CSS rules can be applied by using any one or combination of available selectors. We can apply CSS rules by inline CSS as value of style attribute of HTML tags or internal CSS by using style tag, or we can go for external style sheet. Inline CSS is bad and must be avoided. Inline style declarations should be limited to for some run time CSS manipulation only.

In summery using external CSS is preferred way, Its success depends on use of inline or internal CSS, since in effectiveness of application of CSS rules hierarchy, inline CSS is topmost level after that comes internal CSS and external CSS comes bellow them.

Same way ‘id’ is above ‘class’ in hierarchy of effectiveness of CSS selectors. Id can’t be used more than once in a page (its preferred to use one id for same element throughout application not only withing page).

Rigid element’s CSS should be served by using ‘id’ CSS selectors, which will be used only once e.g. header, footer etc. Elements with dynamic nature having shared or inherited property with possible multiple occurrence need fetch CSS rules by ‘class’ selectors.

Use of ‘tag’ selectors can be decided by doing some research on default look and feel of elements of application. psudo CSS selectors can be used if backward compatibility with older browsers not needed.

Inheritance playes a great role in  in this that’s why planning is uttermost important. we should always keep in mind we are just contributing in development of some application which might have multiple developers hence coding must stick to requirements and standards of application so any one can understand and edit code of each other.

Modular CSS needs to be developed and all inherited properties needs to commented within CSS declaration so one don’t repeat same CSS again and selectors needs to named by some naming convention (e.g. prefixing every declaration by module).

Modules needs to be devised in such way so it remain plug and play if plugged in different application.

Resources

:

• Make your markup clean
• Don’t fear to java script RIA is future. Jquery might be good place to start (and possibly end of search).
• Keep a tab on latest, fresh and trust worthy tips, tricks, trends, news etc related to web development.
• Get benefit and give benefit by being active part of revolution in web development. Join the wiki maintained by web developers for web developer from Google.
• Know more about standards, stick to them and force them upon you, make web development your passion and web standards your religion.

Here I am with second part of 3-part CSS primer.

In my previous post, I briefly described importance of planning and resetting CSS, some possible ‘Do’s and ‘Don’t’ s. I believe in outlining thing and let your mind fly in free space. My outline for CSS primer can be visualized by connecting following dots.

Object Oriented approach:

Adopting object-oriented philosophy is always beneficial for development…and CSS is no exception. How? I tell you. Object oriented approach in terms of CSS translates as knowing and taking advantage of parent-child relation in DOM and inheriting CSS rules, by designing CSS optimized way, less repeated and multiple times used code indicates more object oriented CSS.

Progressive Enhancement AKA Graceful degradation:

There is a term progressive enhancement, that is “incremental addition of elements”. Which means we should categorize content and content containers, parametrized by accessibility of content, covering target audience.

We should first care about, any content should not be missing which our target audience must get, by keeping in mind what would be possible access terminal for navigating the web page. e.g. PC, PDA etc. It includes low configured and not up to date browsers. Afterward one can enhance page by adding CSS and Javascript cylinders.

Categorization, flexibility and re-usability:

By thinking this way we can get mostly auto categorized content. From here we can start implementing re-usability. We can aaply progressive enhancement with CSS by dividing one big-fat-utf8 CSS into multiple CSS files. e.g. IE specific CSS and print CSS and also CSS responsible for particulars like color and typography css.

If project demands we can keep ‘themes’ too in mind. CSSZenGarden is extreme example of this. To implement this we should deeply think about DOM structure, basic skeleton X/HTML and naming of class/ids. naming of class/id should be content dependent, not on how its going to render or where its going to positioned.

Always try to minimize the unnecessary  tags. e.g. wrapping everything in a div or adding extra wrappers for display purpose only. I suggest to add extra divs to stylize things by Javascript in run time, e.g. rounded corners, or multiple background images, or its not always required to wrap ul and set of inks or img tags into any box level container like div…since CSS rules can be applied on any X/HTML element.

Use multiple class and loosely coupled classes massively.  Multiple classes help to increase re-usability.

example:
<span class="block fs20">Multiple class</span>

use of ‘!important’ keyword is very useful in case of using multiple class, where we might need to override few css rules. but ‘!important’ should be used carefully. Personally I prefer to use ‘!important’ with loosely coupled classes declared against inherited property.
e.g.: following will always work disregarding its position in CSS file against inherited bold property of font.

font-weight:normal !important;

Code Management:

Organize your code in properly commented grouped sections…e.g. header, body, navigation, footer etc.

here we know the importance of neutral class names. If naming of CSS classes will be accoring common template not according page wise us its easy to group related CSS.

example:

What if we name common right panel of web page ‘homecol’ without thinking too much? either we have to rename it on every page its appearing and duplicating same css to render it identicaly, or we have to use ‘homecol’ even in contact page.

After all…

Always try to understand any rendering issue, before throwing some random code to increase vertical length of your CSS file. Every browser supports CSS (If I am not wrong 90% identically) if application of CSS is pure and CSS rules are plugged in right socket. So think twice before re-searching on Google for some hacks to override something which might fill dirt on your accessible web page. Ya of course there are many of known bugs (e.g. IE6 PNG) but id doesn’t mean every issue, you are facing is a bug and you can’t overcome them until import some hack from Venus.

The last word before I end this second post from 3 part series on CSS, I want to say is…

Not every validated web page is accessible or ideal but every invalid web page is bad. So always try to validate. First by validating from validators and then by common sense, because technically a page with thousands of nested DIVs are valid. button stimulated out of div is valid. But question is… Is it really?

Think on it, till I am cooking third post CSS Go

• It’s not how much and what you know; but what you can do with what you know, which’s important.

• Ability to implement Polymorphism, Inheritance, private, public namespaces, static methods etc is no guarantee you are a good OO developer.

• OOP is useless if you don’t use it to create good software design (architecture).

• Using packages, classes, etc does not guarantee good software design.

• When designing your software, think of it as an electronic device you are designing.

• Sketch out the ‘electronic device’. Label the different components, list their functionalities.

• Stay hungry, stay foolish.

That’s it for today. I hope you are blessed with more knowledge, and the ability to make the best use of them.  Adios!

To align data in a tabular structure we can use a common table using the HTML tags <table>, <tr>, <td> nonetheless we all know that by using that we are violating the latest web standards, right?But hold on for a second. I’m just going to introduce you a hot new way to code it using nothing else than div tags with the great CSS3 and the data will appear just like a table. Believe, that’s true!

Here is an example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Some Page</title>
<style type="text/css">
.table {
display: table;
width:100%;
}
.row {
display: table-row;
width:100%;
}
.cell {
display: table-cell;
border: 1px solid blue;
padding: 1em;
width: 33%;
}
.element1 {
background:#0099FF;
}
.element2 {
background:#00FF99;
}
.element3 {
background:#FFFF99;
}
</style>
</head>
<body>
<div class="table">
<div class="row">
<div class="cell element1">
<p><strong>Web Development </strong></p>
<p>PHP &amp; MySQL<br />
Ruby on Rails<br />
ActionScript 3.0 / Flash / Flex / Adobe Integrated Runtime<br />
Amazon Web Services<br />
Zend Framework<br />
JavaScript / AJAX<br />
XHTML &amp; CSS Scripting<br />
Content Management System</p>
</div>
<div class="cell element2"><p><strong>Windows Development</strong></p></div>
<div class="cell element3"><p><strong>Mac &amp; iPhone Development</strong></p></div>
</div>
</div>
</body>
</html>

Screen shots:

Firefox 3

Google Chrome

Internet Explorer 8

Opera 9.5

Safari 3

Internet Explorer7

Working Principle:
The display property specifies a range of table-related values to make elements display and behave as they were table elements.

The new available display values for drawing tables are:
table to make the element behave like a table element
table-row to make the element behave like a table row (tr) element
table-cell to make the element behave like a table cell (td) element
table-row-group to make the element behave like a table body row group (tbody) element
table-header-group to make the element behave like a table header row group (thead) element
table-footer-group to make the element behave like a table footer row group (tfoot) element
table-caption to make the element behave like a table caption element
table-column to make the element behave like a table column (col) element
table-column-group to make the element behave like a table column group (colgroup) element

The table element in HTML is a semantic structure: it describes what data is. Therefore, you should only use the table element if the data you are marking up is tabular – for example, a table of financial information.

On the other hand, table value of the display property is simply an indication of how something should look in the browser – it has no semantic meaning. Using a table element for your layout tells the browser, “This data is tabular.”

Also we have to take care of, not to use display: table; property on a bunch of div elements when the data needs to be present in tabular format. Else simply avoid to use this property.

The main advantages on using this new structure are:

• Place the data in tabular manner without violating the latest web standards.
• No need of specify the cellpadding="0" cellspacing="0".
• No need to make the border="0".
• No need to make the margin and padding 0 of table, tr, td.
• Print the page in tabular format without wired.
• No need to specify the height, as the content added it will automatically adjust the height of the row and columns with specified background.

As we’re not living in Wonderland, we also have some disadvantages, as follow:

• Only latest browsers support this property.
• Mainly IE 7, IE6 are not supporting this property. They show the data in wired manner.

The solution would be to use this property only when we are going to develop a website for latest browsers and just ignoring the older versions. But as the statistics shows, most of the users still using IE6 and IE7.

To implement this in realistic world won’t be feasible to use CSS3’s advanced layout features for at least 4 or 5 years, once users need to upgrade themselves from the stone age of Internet to our beautiful high-tech development world.