Introducing CSS grids - Part 1

Nowadays we all know that HTML tables are generally a bad idea for  formatting web based layouts, they bloat the source and reduce  accessibility, particularly hindering screen readers. 
 
They should be used sparingly and only really for data tabular in nature which would otherwise be  difficult to successfully replace with css alone.
 
Things get complicated when Content Management Systems come into play, to accommodate a large variety of possible content they frequently spit out a nested nightmare of table based layout.
 
Recently a few frameworks have been published which aim to provide better support for grid based layouts without resorting to tables, most noteworthy are Yahoo's yui grids, blueprint and tripoli.
 
Tripoli is not really a css grid framework as such, but aims to reduce cross browser css issues and provide a clean starting point by resetting all browsers to a common base line.
 
Blueprint goes a little further, offering full grid support, although the grid dimensions must be manually adjusted if the default settings prove unsuitable, Blueprint also includes css reset and more cross browser tweaks similar to tripoli.
 
Yahoo's yui grids is a fully comprehensive css grid framework catering for nearly all the screen resolution / grid combinations you are likely to need and like the others includes reset / cross browser fixes, it is a much heavier offering as a result but comes with plenty of examples and documentation plus a great online builder utility to generate the starting point html.
 
It can be argued that using these frameworks does force the inclusion of some non semantic html (a few extra divs), however we found this acceptable and a considerable improvement over even simple table based layouts.
 
Future follow ups to this article will examine  each framework in turn, with examples and comparisons to the normal tables based solutions.

Currently rated 4.8 by 4 people

  • Currently 4.75/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

The benefits of using code generation tools such as SubSonic

We have been evaluating a number of code generation tools recently & the one we like the best is a tool called SubSonic

Subsonic is an open source object-relational mapper for the Microsoft .NET Framework that can really speed up the development of any software project using a database for storage.

Within minutes of completion a database design Subsonic will generate all the code for your Data Access Layer (DAL) using the ActiveRecord pattern.  In addition methods to call all Stored Procedures are generated (with a single line of code). Read only objects are also created for all defined Views.  In addition, Ruby-on-Rails like Scaffolds are generated giving you an instant web interface to enter test data into your database.

Subsonic also includes some time saving web controls, the most useful of which are:

QuickTable  - a quick and easy way to instantly show data from a table in a read only, sortable, pageable (server paging for performance)  but lightweight control (no massive viewstate here).

DropDown – in instant dropdown from any database table, no additional code required.

An intuitive query model enhances productivity and reduce even quite complex queries down to a line or two of code:

Query("Products").WHERE("CategoryID = 5").AND("UnitPrice > 10").OR("CategoryID = 1").AND("UnitPrice > 10").ExecuteReader();

Changes to your database can easily be incorporated via a web or command line based generator or for smaller sites the automatic build provider gets the job done.

The included code generation templates can easily be customised (they are simple asp.net like syntax) to cover any more specialised needs.

Having used SubSonic on a recent project (which had extremely tight deadlines) we found it an invaluable resource - reducing not only our development time, but code complexity too.  We did find the odd buglet thrown in for good measure (which you may expect from a relatively new open source project) but these were quite easy to overcome & the time savings certainly outweighed these.

Currently rated 4.0 by 1 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

 

Dilbert of the day