I’ve been building web applications since the beginning of the World Wide Web and yet I’ve never become very knowledgeable about CSS.

I’ve listened to the arguments about page layout (styles versus tables) and hacked my way through enough CSS but always found myself more frustrated than enthralled.

JavaScript frustrated me in the early days too. Compared to C++, Java, C#, etc it left “dirty” to me but I’ve grown to enjoy and embrace JavaScript and I know that I need to do the same thing with CSS.

CSS is very powerful but you need embrace it to really Grok (http://en.wikipedia.org/wiki/Grok) it.

But, I have some issues :

• I’m in a hurry – I need to be building apps now.
• I don’t think aesthetically – I’m a bits and bytes guy.
• I’m a pragmatist – I don’t care about purist type elegance.

So I’m choosing a “CSS Framework”.

If you search the web you can find lots of discussions about why NOT to use a CSS framework. Purists say that a CSS Framework is a contradiction in terms, but I suspect that 99% of developers doing significant client side work are using a CSS framework, even if their framework of choice is a collection of code that they wrote themselves (as opposed to someone else’s formal framework).

There are some basic criteria when choosing any framework.

• Rich Functionality
• The flexibility to extend and modify features
• Understandable code
• Good Documentation
• Good usage examples
• A vibrant community
• An implementation that works the way I want to work

When it comes to choosing a CSS framework there are some additional criteria.

• Reset Strategy
• Typography Implementation
• Semantic Naming

Especially “Semantic Naming” becomes incredibly important the more complex your markup becomes.

There is a cyclic relationship between HTML Elements as Identified by “Id”, CSS Classes that are applied to those elements and the JavaScript code that is executed against those elements, often that are found by way of the classes assigned to them.

Random naming of CSS classes or a set of naming conventions that lack logical value can turn the whole stack into a mess.

So, good naming strategy is crucial to a usable CSS framework and a way to customize naming in conjunction with your application’s problem domain is even better.

There are LOTS of CSS frameworks to choose from and several dozens of blog posts on the web listing the popular ones.

Rather than enumerate all the ones that I did NOT choose, I though I’d share some reasons for choosing the one that I did choose.

My criteria seems to be best met by Blueprint CSS (http://blueprintcss.org/)

• A CSS reset that eliminates the discrepancies across browsers.
• CSS Reset based on Eric Meyer’s (http://meyerweb.com/eric/tools/css/reset/)
• A solid grid that can support the most complex of layouts.
• Typography CSS that implements a baseline grid.
• Form styles.
• Print styles.
• A Plugin model and a collection of available plugins.
• En ecosystem for use in different development. (WordPress, Drupal, etc)
• Tools, editors, and templates.

While the checklist seems complete is the combinatorial effect that we end up being interested in.

For example, using a CSS reset by itself nullifies browser defaults (which all tend to look different to the user) but using a CSS reset by itself, especially one as complete as Eric Meyer’s, means there is a lot of default behavior to be re-defined. Of course Blueprint CSS handles this for us.

For my needs there is one more very important feature of using Blueprint CSS.
Blueprint CSS comes with a Ruby script that lets you customize Blueprint style sheets using your own semantic class names.

This isn’t a matter of purism for me. UI code and markup can get very complex and maintainability, as well as debugging, can be drastically effected by semantic naming.

Standard framework names like these :

---

<div class="span-9 last">
<div class="grid_6 alpha">

---

… are learn-able, but just have no RELATIVE meaning inside our own application.

Here is some good information on CSS Semantics and using the Blueprint CSS customizer.

http://joshuaclayton.me/blueprints_compress_a_walkthrough.html
http://www.sitepoint.com/css-frameworks-semantic-class-names/

More to come…..

---

A basic practice in software development of all types is to use mechanisms that allow us to write and maintain code in a single place no matter how many difference places that code is used throughout our entire application.

When we’re building web sites, and more specifically web pages, the reuse of UI code can be especially challenging as the nature of web applications are stateless and in most models there is a 1-to-1 relationship between endpoints and “files”.

In ASP.NET WebForms we have master pages.

In Microsoft WebMatrix we have Layout Templates.

One of the advantages of the general move towards “standards based” web development is that HTML, CSS, and JavaScript can generally be used across different web development platforms and the technique described below can be used no matter which ASP.NET Development model you choose. (WebForms, ASP.NET MVC, WebMatrix)

I’ll use WebMatrix for the example.

Given a WebMatrix site created using the default “Starter” template the following Home Page and About Page can be displayed when the project is run.

Note that only the text inside the white area of the pages is different in the Default.cshtml and About.cshtml pages.

Read the rest of this entry »

Still using table for layout ?

It’s not the preferred way.

Modern Web Site development defines layout with CSS wherever possible.

As we look forward to HTML5 and CSS 3 some of the folks in Dev Div are tooling for the new wave and immersed in the resulting ecosystem.

Alex Mogilevsky, Phil Cupp, and Markus Mielke from  Microsoft, via the CSS Working Group have submitted a draft for CSS3 Grid Alignment.

The official description says …..

CSS Grid Alignment Level 3 contains features that enable authors to align UI elements horizontally and vertically. By using the features in this module authors can position layout elements such as controls and application content into columns and rows, defining a grid structure with fixed, fractional, or automatic units. The elements can then be positioned and sized into the logical cells of the grid. Further, this module enables stacking and spanning of elements to build cohesive experiences out of a collection of modular UI pieces.

CSS Grid Alignment Level 3 also helps to manage changes in available space for layout. For example, the features in this module can help manage changes by allowing placement of elements in the grid independent of source order. Such management may be required when a browser window is resized or when a screen’s aspect ratio changes, due to screen rotation.

You can read the complete draft document here : http://www.interoperabilitybridges.com/css3-grid-align/

After the holidays I’ll be playing with some samples and will publish them here on MSJoe.com

I was working on a demo of using MS AJAX and Dynamically adding ASP,NETControls to a page when I can across this great 4 part blog posting on the subject and wated to share it.

http://weblogs.asp.net/infinitiesloop/archive/2006/08/25/TRULY-Understanding-Dynamic-Controls-_2800_Part-1_2900_.aspx

I’m not a graphics designer, not even close.

In fact, I’m what you might refer to as esthetically challenged.

So lately I’ve been toying with the idea of building an ASP.NET based CMS, mostly due to my frustration about the lack of .NET based options when compared to PHP.

So I’ve been working on application architecture and ASP.NET offers lots of great synergies, but one place I’m stuck is in the area of UI abstraction for the purpose of themeing.

I understand how themes and Master Pages work technically, but my lack of design acumen leaves me struggling when evaluating them for complex UI design.

So, to get me started I picked up a copy of Jacob Sanford’s new book….

ASP.NET 2.0 Design – CSS, Themes and master Pages

 

I’ll blog a review and probably do some videos from what I learn, but in the mean time…..

What are YOUR thoughts about Themes and Master pages ?

What are the issues, tips, tricks, gotchas ?

Are Themes & master Pages flexible enough to serve as a templating engine for an application like Joomla or am I better off building an HTML/CSS skinning system from scratch ?

Thanks!