Semantic classes and IDs with Blue print

techie | June 9 - 2010

Blueprint is a compressor script that will renders all the various CSS bits that you need according to the given column numbers and sizes for each project into one compact CSS file. It also gives the freedom to define semantic classes and IDs. So you can use something like class=”navigation” instead of class=”span-6 last”.
Semantic class names are HTML class names  that have been deliberately chosen to reflect the meaning (semantics) of the content being marked up. Semantic class names have been a part of a modern web design since 2002 and they are part of semantic web authoring and are also known as POSH.
The compressor script will create a PNG image that conforms to the column size and padding you’ve selected. This proved to be actually helpful in debugging the pages. You can add the class showgrid to your outer most container div and it will work out.
• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that is capable of supporting the most complex layouts also.
• Typography based on expert principles that predate the web.
• Form styles for fine appearance user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.
Once the HTML or XHTML markup is delivered to a page-visitor’s client browser, there is a chance that client-side code will have to navigate the internal structure,DOM (Document Object Model)of the web page. This webpage is delivered with client-side Java -Script that will produce on-going dynamic behavior after the page is rendered.
When rolling the mouse over a ‘Order now’ link  that is meant to make the price, elsewhere on the page, become emphasized, JavaScript code can do this, but JavaScript has to identify the price element, wherever it is in the HTML markup, in order to bring them into effect. This html markup coding will be  sufficient: <div id=”price”>$55.66</div>.
In the Ajax programming technique, where, for example, clicking a hypertext link may cause JavaScript code to get back the text for a new price quotation to display in place of the current one within the page, without re-loading the whole page. When the new text returns back from the server, the JavaScript should be able to identify the exact region on the page to replace with the new information.