There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

What is OO CSS?

The concept of ‘Object Oriented Programming’, is widespread among developers, and forms the basic for any modern programming language. Features like data abstraction, modularity and inheritance make it a favorite in coding large-scale applications.

Object Oriented CSS, as the name suggests, is implementing the concepts of OOP in structuring and building CSS rules, which are easy to reuse, thereby reducing the loading time and increasing the performance of web pages incredibly! The key point here is, to identify, build and style modular reusable ‘objects’ in a page, and to reuse it in multiple instances by extending them with additional features wherever needed. Here an ‘object’ refers to the basic HTML markup and its CSS rules. Apparently, here, the key challenge is going to be, identifying the ‘object’ and building rules for it.

This is neither a framework nor a technology, but an approach adopted in building the rules, so as to make the code more reusable, maintainable and scalable. You may already have been making use of this concept in coding your style-sheet for years, but may not be aware of this terminology :).

A UI engineer at Yahoo (‘Nicole Sullivan’ ) coined the term. She had made a number of presentations on the topic on various big stages (http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html) and is also included in a feature on Women in Technology.

Nicole, who has been hired by Facebook recently, for optimizing the CSS and web page performance, has been leading the way in implementing this approach in the pages for the social networking giant, and the results are to be seen. A faster loading FB, with significantly less response time! This is exactly what this approach of building CSS promises to give back. But again, like all other frameworks, this too has pitfalls and advantages which we shall discuss in detail.

Following are some key aspects in object-oriented approach to CSS building:

1. Create a component library
2. Separate container and content / Avoid Location dependent styles
3. Separate Structure and skin
4. Extend base objects using class names
5. Stick to semantic class names

Create a component library

This is the first thing to do, while building a OO CSS framework for your application, and this is the most time consuming process too. You will have to carefully study the screens of the app, and come up with the recurring reusable UI patterns, and will have to create a library consisting of HTML markup and respective CSS rules of all such components first. This may take some initial time, as you may need to filter out the components and find out the basic structure of a component, and its variations along different screens.

E.g. For a blog, ‘metadata (Refer to the marked area in the figure below)’ will be present in multiple instances of a page. After closer scrutiny, you will come to know that, all the metadata can have the same HTML markup, and the variations can be addressed using CSS (the font size, color, margin and padding are different in each of the occurrences of metadata component). Select a markup, as a base structure, in which you can accommodate majority of the elements that possibly can come in the particular component.

In our example our basic structure of the ‘metadata’ component will be:

Base Markup

<p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p>

Base rule

.metadata{font-size:1.2em; text-align:left; margin:10px 0;}

Thus, ‘metadata’ can be now independently used within any other element in the markup, and will have a consistent look and feel, irrespective of where it is used. But as we can see in the figure above, there are multiple variations of the component. This we will tackle using CSS, and will be discussing in the following points.

This way, figure out all the reusable components, and create rules and markup, and group them separately in the CSS file. (It’s even fine to create a separate CSS for the component library, and then merge it with others later during deployment.)

Separate Content from Container / Avoid location dependent styles

This is one of the primary requirements of following an OO approach to building CSS files. The core idea here is to consciously differentiate the rules of containers and the content that comes within them, so that content can be plugged into any containers irrespective of their parents.

Often while building large-scale CSS rules there will be instances where a single component will be appearing differently in various instances, when put in different containers. One of the solutions adopted by front-end engineers, for addressing this problem was to assign location dependent selectors to that particular component.

E.g. With reference to the example used in the previous point, where there are multiple variations of the same component – ‘metadata’, each instance can be given location dependent rules by combining the base class ‘metadata’ with the relevant classes/IDs for the containers. i.e.,

‘metadata’ in a blog post can be styled as: .post .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}

The OOCSS approach advocates avoiding this type of usage. Instead extend the base class by adding more classes, thereby extending the attributes of the base component to match the variation. We shall discuss the concept of extending the base class in the following points.

Separate structure and skin

In the first point ‘Creating component library’, we discussed the importance of identifying reusable components, and building base classes and base structures for them. While creating those base rules, an important thing to keep in mind is to separate the structure and skin. In other words, while defining a base class in the component library, we should not create skin-level rules, like width, height, background images, border styles, etc, that can make the component more specific to a certain container.

E.g. For our base class, ‘metadata’ with the following rule

.metadata{font-size:1.2em; margin:10px 0;},

Adding more skin-level rules as below,

.metadata{font-size:1.2em; margin:10px 0; <strong>width:500px; background-color:#efefef; color:#fff;</strong>},

can make it more of a specific component than a generic one, thereby making it difficult to reuse it in many other containers, which would need it to be rendered in a different ‘skin’. Also another danger of not separating structure and skin will be the ‘Specificity war’.

Extend base objects using class names

As discussed in the second point ‘Separate content from container’, avoiding the usage of contextual selectors will make the content independent from their parent containers and hence will be truly usable across the application. So how do we instantiate the variations of the same object in different containers? What is the solution? Well here comes the concept of extending the base ‘object’ (again another term coined by Nicole Sullivan), by adding more class names to it depending on the context, rather than tightly coupling the object with the class names of the containers in which it is to be placed.

E.g. In the first figure of the ‘metadata’ object, where the same object needs to be rendered differently in various containers,

The HTML markup of each of them will look like:

<p class=”metadata commentmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>
<p class=”metadata postmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>
<p class=”metadata authorlistmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>

The CSS rules will be:

.metadata{font-size:1.2em; margin:10px 0;}
.commentmetadata{font-size:1em; margin:0 0 10px 0; color:#063070; }
.postmetadata{ color:#063070; }
.authormetadata{ color:#fff; }

This is a very simple demonstration, to comprehend the concept of implementing OO programming. As the size of the app becomes larger, the UI patterns will become more complex, and there lies the actual challenge and advantage of using such an approach.

Stick to semantic class names

A challenge in building CSS for high-scale web applications is to logically come up with meaningful class / ID names matching with the context and moreover making sure, they are reusable and still make sense. With the concept of ‘extending’ base objects, it’s easy to fall into the practice of creating ‘presentational class names’. Some easy examples are ‘leftCol’, ‘redText’, ‘midCol’, ‘bigText’, ‘bolderText’ etc. Such class names are not reusable and are a hindrance to scalability.

Always stick to logical and semantic class names relating to the logical meaning of the component, rather than its presentational meaning. It means, instead of giving the text block with a yellow background color, the class name ‘yellowText’, ‘notification’ would be a more sensible name, as it is a notification element that pops out to notify some activities within the system.

Pros and Cons?

Following such an approach of building CSS has its own pitfalls and advantages

Here are a few cases, where adopting such a framework ‘may’ backfire:

1. OOCSS is suited to really large websites / application which are filled with reusable components. It may not give desired results in smaller websites and applications. So decide sensibly depending on the size of the work in hand
2. If not smartly used, creating the component library can turn out to be a mess, and become a maintenance nightmare for other coders
3. Documentation is a must. Each block of code should be clearly commented out with the right points for other coders to absorb the concept, which otherwise can become too tedious in case of a knowledge transition

Some obvious advantages of adopting this approach are:

1. Less lines of CSS code
2. Cleaner HTML markup, with logically sensible class names and hierarchy
3. Semantic markup, means more SEO friendly pages
4. Far better page optimization, with much faster loading times, since most of the components are reused
5. Scalable markup and CSS code, where more components can be added into the library without disturbing other components, as the base objects are independent of any other containers
6. Easily theme-able layouts, since changes to the base object can completely change almost the whole presentation layer instantly

Courtesy & Resources

http://www.webdirections.org/blog/object-oriented-css-the-video/

http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/

http://www.iconfinder.com for all the icon resources

First things first, so what is a framework really? It actually depends on the context it is used. It can be defined as an abstraction tool that makes it easier to develop applications and reuse code.

“The framework aims to alleviate the overhead associated with common activities performed in Web development… and they often promote code reuse.”

Like everything else, when it comes to its use, a framework has advantages and downsides. Below is a list of some important facts you should consider, before you decide to start learning or using one.

Pros

Efficiency

Tasks that usually would take you hours and hundreds of lines of code to write, can now be done in minutes with pre-built functions. Development becomes a lot easier, so if it’s easier it’s faster, and consequently efficient.

Security

A widely used framework has big security implementations. The big advantage is the community behind it, where users become long-term testers. If you find a vulnerability or a security hole, you can go to the framework’s website and let the team know so they can fix it.

Cost

Most popular frameworks are free, and since it also helps the developer to code faster, the cost for the final client will be smaller.

Support

As any other distributed tool, a framework usually comes with documentation, a support team, or big community forums where you can obtain quick answers.

Cons

You learn the framework, not the language

I believe this to be the major problem. If you’re using a framework and you know very little about the language behind it, you will learn the framework and not the language itself. The way you code jQuery is different from the way you code javascript. Simple put, if you know jQuery, it doesn’t mean you know javascript.

Limitation

The framework’s core behaviour can’t be modified, meaning that when you use a framework, you are forced to respect its limits and work the way it is required. Make sure you choose a framework that suits your needs.

Code is public

Since the framework is available to everyone, it is also available to people with bad intentions. It can be studied in order to know how things work and to find flaws that can be used against you.

JavaScript Frameworks

jQuery

http://jquery.com/

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Prototype

http://www.prototypejs.org/

Prototype is a JavaScript Framework that aims to ease development of dynamic web applications. Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype is quickly becoming the codebase of choice for web application developers everywhere.

Mootools

http://mootools.net/

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.

PHP Frameworks

CodeIgniter

http://codeigniter.com/

CodeIgniter is a powerful PHP framework with a very small footprint, built for PHP coders who need a simple and elegant toolkit to create full-featured web applications.

CakePHP

http://cakephp.org/

CakePHP is a rapid development framework for PHP that provides an extensible architecture for developing, maintaining, and deploying applications.

Symfony

http://www.symfony-project.org/

Symfony is a full-stack framework, a library of cohesive classes written in PHP.

Mobile Frameworks

jQuery Mobile

http://jquerymobile.com/

Query mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique apps for each mobile device or OS.

iWebKit

http://snippetspace.com/projects/iwebkit/

iWebKit is a file package designed to help you create your own iPhone, iPod Touch and iPad compatible website or webapp.

DHTMLX Touch

http://www.dhtmlx.com/touch

DHTMLX Touch is an HTML5-based JavaScript library for building mobile web applications. It’s not just a set of UI widgets, but a complete framework that allows you to create eye-catching, cross-platform web applications for mobile and touchscreen devices.

Ruby Frameworks

Ruby on Rails

http://rubyonrails.org/

Ruby on Rails is an open-source web framework that’s optimized for programmer happiness and sustainable productivity.

Padrino

http://www.padrinorb.com/

Padrino is a ruby framework built upon the excellent Sinatra Microframework. Sinatra is a DSL for quickly creating simple web applications in Ruby.

Bowline

http://bowlineapp.com/

Bowline is a framework for making cross platform desktop applications in Ruby, HTML and JavaScript.

CSS Frameworks

Blueprint

http://www.blueprintcss.org/

Blueprint is a CSS framework, which aims to cut down on your development time.

960 Grid System

http://960.gs/

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

YUI2

http://developer.yahoo.com/yui/grids/

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns.

Considerations

Now you understand why I didn’t include the word “better” on my first sentence. A framework can bring you several advantages and may suit your needs, but it also brings downsides to your projects. There are hundreds of frameworks out there, so be sure to choose carefully, if you plan to use one in the future.

You may be asking yourself “It is time to change? Should I forget everything I know and dive into this new world?”. Well dear padawan, you don’t need to do so. We have a lot of tools that make our transition to new and better technologies safer (ultimately we can’t just crash our customer’s website, we have bills to pay :D).

Frameworks are helpful with this. They’ve already been tried, tested and proven. Of course, you can always make them better, but they are a really good starting point.

This time we will talk a little about frameworks and other tools, like generators and templates.

So, let’s rock.

HTML5 Boilerplate – Templating that fits all needs

This is the most useful for me. I usually have jobs that need easy setup, but a lot of optimizations tools (minifiers and more) and, at the same time, I’m quite familiar with CSS, so too much preset CSS is a waste of time to me (since I spend a few hours coding CSS, but much more to understand and re-utilize framework’s code).

Cool features:

• Constantly improving – Last update says that they reduced the overall size of the published boilerplate by 50%
• Build script – .js and .css minify, image optimization, html optimization, server configurations for caching…
• Custom install setup – So you can choose what you want in “your” boilerplate
• Cross-Browser compatible
• HTML5 Ready
• Print stylesheet ready to use

52framework – Supports almost anything

I am amazed by all the things you can do with this framework. It has a lot of resources that I thought would never work on IE. This is a good option when you want a somewhat styled template and  are planning to use almost all power of HTML5.

What do I like:

• Almost anything you want with HTML – Local Storage, video player, canvas, forms…
• A lot of CSS3 proprieties – As you can see in CSS demo, it has a good CSS3 support
• Video Tutorials – Yeah, it makes even easier to understand 52′s workflow

G5 Framework – Good tools collection

Actually Greg Babula says that it meant to be just a personal project. But it is much powerful than he thinks.

As it was made from personal experience, it has a lot of tools that we already know how to use (Modernizr, CSS Reset, jQuery, Orbit Image Slider…), thus we don’t waste too much time learning.

Perkins – Lighweight and LESS

I must admit that I should use LESS much more than I do. If you think this way, Perkins may be a good option for you. It comes with a set of LESS stylesheets and mixins for common tasks such as creating navigation, rounded corners, gradients and much more.

Sprites.js – Animation framework (HTML5 support, of course)

Yeah, sometimes our customer wants some animations on their site. Why should you use flash when (almost every time) you can use HTML5?

Sprite.js provides a simple integration for canvas and HTML animations so you can do easily some animations, with maximum performance.

Lime.js – Gaming framework

Just take a look at the demo games, and tell me if it isn’t amazing.

Some features (HTML5) that you can use on it:

• Optional install – For mobile users it is really good, just bookmark your game and you’re done
• KeyFrame animations
• Full support of sprite sheets
• Stroke support – So you can draw a stroke around shapes
• Good documentation – Just take a look at all classes you can use with it, pretty cool :D

HTML5 multimedia framework for WordPress

If you are a WordPress person, you will find it useful. With this plugin, you just have to add a shortcode and you have a HTML5 media player in your site.

The framework currently supports:

• mp4 (h.264,aac)
• ogg (theora,vorbis)
• mp3 (audio only)
• webm (vp8,vorbis).
• wmv (via MediaElement.js)
• flv (via MediaElement.js)
• wma (via MediaElement.js)

Modernizr – HTML5 & CSS3 with fallbacks

Modernizr helps us to implement HTML5 and CSS3 for browsers that don’t natively support it. Actually many of the tools mentioned above use it.

Want to know more about its amazing features? Just read The All-In-One Entirely-Not-Alphabetical No-Bullshit Guide to HTML5 Fallbacks.

It is really simple to use, when modernizr detects your browser’s features, it adds classes to you HTML, so you can easily switch to a valid fallback. Try to run the demo and see its results for a better comprehension.

Select[ivizr] – CSS3 Selectors for IE

IE (6-8 mainly) is surely the greatest barrier to CSS3 spread. CSS3 selectors are almost forgotten for some developers, that just know they exist because can use them with jQuery.

You just need one of the 7 supported JavaScript libraries and you are ready to install it (via conditional comments, so just IE will see it). And then you’re done, just write you pretty CSS3 selectors as you aways wanted.

CSS3 button framework

With this framework you have easily a lot of good buttons options. It is specially useful for back-end developers, that aways need some pretty buttons, but don’t have time (or budget) to do so.

They are all CSS3 ready, and can be easily customized.

Templates – General HTML5 and CSS3 samples

Coming Soon Template

Design Company

Real State

Free HTML5 & CSS3 theme

Create An Elegant Website With HTML 5 And CSS3

Starter Pack

Much more inspiration at HTML5 Gallery

Some useful tools

CSS3 Button Maker

CSS Transforms code generator

CSS3 Gradient generator

CSS3 Drop Shadow Generator

CSS Generator for radius, shadows, rgba, @font-face, columns and more

The best @font-face generator I’ve ever seen

HTML5 Visual Cheat Sheet

Ready to start experimenting with HTML5?

You may notice that I didn’t even mention any mobile frameworks. It is because they are so cool that they deserve a dedicated post.

I certainly have missed some other good resources. Why don’t you comment and share what you know?

Zend_Db

Zend_Db_Adapter gives us an opportunity to work with different database management systems (DBMS).

Using PDO drivers:

• BM DB2 and Informix Dynamic Server (IDS), using pdo_ibm extension
• MySQL, using the pdo_mysql PHP extension
• Microsoft SQL Server, using pdo_mssql
• Oracle, using pdo_oci
• PostgreSQL, using pdo_pgsql
• SQLite, using the pdo_sqlite PHP extension

Using PHP extensions:

• MySQL, using the mysqli extension
• Oracle, using the oci8 PHP extension
• IBM DB2, using ibm_db2
• Firebird / Interbase, using php_interbase

We’ll use the PDO driver to work with MySQL in this article.

Let’s Get Started

We need the way to store configuration file to the database connection. For it we’ll create a application.ini file in our ./application/configs directory. Add to the file following lines:

	db.adapter          = "pdo_mysql"
	db.params.host      = "localhost"
	db.params.username  = "root"
	db.params.password  = ""
	db.params.dbname    = "your_db_name_here"

I think the content will not cause any difficulties for you. We will use Zend_Confg_Ini to parse the config of this file. You have to initialize connection to the database before dispatching process. Add the following code to your index.php file.

	// Load up our config file
	$config = new Zend_Config_Ini('./application/configs/application.ini', 'db');

	$db = Zend_Db::factory($config->db->adapter,
				   $config-db->config->toArray());

	// Return data as object
	$db->setFetchMode(Zend_Db::FETCH_OBJ);

	// The default adapter for table classes
	Zend_Db_Table::setDefaultAdapter($db);

	// Write our adapter to registry
	Zend_Registry::set('db', $db);

If you do not want to receive the result as an object, there are descriptions of other styles to obtain the result for you:

• Zend_Db:: FETCH_ASSOC: returns the data in an associative array.
  The keys of the array are the column names. It’s the mode of extraction is used by default in Zend_Db_Adapter classes.
• Zend_Db:: FETCH_NUM: returns the data in an array. The array indexed by integers in accordance with the position of the field in the select query list.
• Zend_Db:: FETCH_BOTH: returns the data in an array. The keys of the array are lines and integer values. The number of elements will produce twice more in the array than if FETCH_ASSOC or FETCH_NUM is used.
• Zend_Db:: FETCH_COLUMN: returns the data in an array of values. The value is the value returned from one column of the result set in each array. By default, it’s the first column, indexed by zero.
• Zend_Db:: FETCH_OBJ: returns the data in an array of objects. By default, the built-in PHP class stdClass is used. Columns of the result of sample are available as public properties of this object.

You are probably interested why have we recorded the adapter to the registry? We did so to be able to get access to our created adapter in any controller or model. To extract our adapter from the registry back we can use Zend_Registry::get(); method

	Zend_Registry::get('db');

Well, let’s try to execute some requests!

	$sql = 'SELECT * FROM users';
	$result = $db->fetchAll($sql);

The $result variable will contain an array of objects. To extract a single column from the sample results you should do

	$sql = 'SELECT name, id FROM users';
	$result = $db->fetchCol($sql);

Now $result contains only the name. In order to extract a single row from the result of sampling execute the following code

	$sql = 'SELECT * FROM users WHERE id = 2';
	$result = $db->fetchRow($sql);

And now $result is the single object ($result->name). Extracting a single value

	$sql = 'SELECT COUNT(*) FROM users';
	$result = $db->fetchOne($sql);

$result contains the number of users. That’s all with SELECT queries. But we still have to add and modify our data in the database. Lets’s look at it.

Adding Records

There is a special method for inserting data to the database: Zend_Db’s insert method.

	$data = array('name'  => 'Nick',
				  'login' => 'nick',
                  'email' => 'myemail@gmail.com');

	$db->insert('user', $data);
	$lastId = $db->lastInsertId();

We need to pass two parameters to insert method: table name, and an associative array with the data. lastInsertId method will return the value of auto-increment primary field in the table.

Updating Records

To able to update our db data we should call the update method and pass it three parameters. The first parameter is the name of the table, the second – an associative array with the data, the third parameter – a condition (optional); if you omit the third parameter, all records will be updated. The array of conditions can be passed as a WHERE condition.

	$data = array('name'  => 'Nick',
		          'login' => 'nick',
                  'email' => 'myemail@gmail.com');

	$db->update('user', $data, 'id = 1');

Deleting Records

Now you should know what each parameter is used for. The first argument is the name of the table, the second is the condition. Simply, right? Also there may be several conditions which is passed as an array. If you omit the second argument, all records of the table will be deleted.

	$db->delete('user', 'id = 1');

Example Bits of Code

Example 1:

	// Extract Zend_Db_Select
	$select = $db->select();	

	// 1st - table name, 2nd - array of selecting columns
	$select->from('news', array('YEAR(date) AS yearNews',
		'MONTH(date) AS monthNews',
		'DAy(date) AS dayNews'));

Example 2:

	// Extract Zend_Db_Select
	$select = $db->select();	

	// Descending sorting
	$select->from('news')->order('date DESC');
	$result = $db->fetchAll($select);

Example 3:

	// Extract Zend_Db_Select
	$select = $db->select();	

	// Descending sorting by date and ascending by title field
	$select->from('news')
		->order(array('date DESC', 'title'));

	$result = $db->fetchAll($select);

Example 4:

	// Extract Zend_Db_Select
	$select = $db->select();	

	// Descending sorting by date and ascending by title field
	$select->from(array('n' => 'news'), // table name and its alias
				array('newsTitle' => 'title', // The second parameter
						'newsDescription' => 'description', // column alias => column name
					'date' => 'date'))
			->join(array('a' => 'author'), // The first param for join method | alias => table name
					array('n.author = a.id'), // The 2nd param - array of condition for join operator
					array('name' => 'authorName')) // Associative array of columns
			->order('date DESC'); // Sorting descending by date column

	$result = $db->fetchAll($select);

Zend_Db_Select

Zend_Db_Select – is the assistant of making SELECT queries. Using this class methods we can build our complicated queries expressions part-by-part.

Queries Building

For example, we have to choose the record of news from a table with this query

	SELECT * FROM news WHERE id = 12;

Using Zend_Db_Select it would look like so

	// Extract Zend_Db_Select
	$select = $db->select();

	$select->from('news')->where('id = 12');
	$result = $db->fetchAll($select);

Now, let’s choose all the news records, but breaking the date’s field into three columns – year, month, day

SELECT *, YEAR(date) AS yearNews,
	MONTH(date) AS monthNews,
	DAY(date) AS dayNews
FROM news;

SQL has several types of joining operation. Below are the list of methods for supporting different joining types in Zend_Db_Select.

• INNER JOIN, methods join (table, join, [columns]) and joinInner (table, join, [columns]).
• LEFT JOIN, the method joinLeft (table, condition, [columns]).
• RIGHT JOIN, the method joinRight (table, condition, [columns]).
• FULL JOIN, the method joinFull (table, condition, [columns]).
• CROSS JOIN, the method joinCross (table, [columns]).
• NATURAL JOIN, the method joinNatural (table, [columns]).

There are also some special methods of Zend_Db_Select class.

• orWhere() – the same as where(), but with logical OR.
• group() – one column’s name can be sent to this method by one line or the lines’ array of columns’ names./li>
• limit() – passes the desired number of rows to choose by the first parameter, by the second – number of the optional rows which can be omitted.

The Result

Another one Zend Framework lesson is completed. Digest the received knowledge, and I hope we will try to continue our experiment in the next part. Bye!

P.S. I look forward to receiving your feedback and questions in the comments below.

Why to use Zend Framework?

The major aim for any CMF – reduce time for a project’s working up. Using this product, you can achieve following:

1. Permanent structure of your projects. The problem of majority projects, making from nothing, – absence of a permanent structure. First, you put necessary function in one module, in the next project you realized you’d made a mistake and decided to change everything. As a result, the more you create a website / web-applications, the more you improve your knowledge, well then you make changes in the structure of new projects. But now try to imagine that you will have to go back to support/revision of your oldest project. I’m sure you’ll just get entangled or waste much of time for the code’s investigation. When you create a web-based application frameworks, this problem disappears, because you’re always guided by rules. This approach can guarantee that, if the oldest project’s revision is necessary, you will always know its structure and can finish it off easily.
2. Increase the speed of development. There is a set of classes in ZF that allow to realize a lot of typical actions. You’ll not need to create one more bicycle cause you have the whole Kamaz of ready-made bicycles.:)
3. Increase the level of safety. Everybody makes mistakes and no one is safety. It is difficult to argue, but with the help of ZF you can significantly reduce the error rate in the project. Because it’s really to make a lot of typical actions with the help of built-in classes, it means you have to write less code. And less code, less errors.

Is It Difficult?

Someone says that ZF is too complicated for understanding, heavy, requires a lot of server resources. It’s not like this in reality. If you can to learn php, so moreover you can deal with ZF, and as for heaviness, a good diet will eliminate this shortcoming with no problems.

Positive and Negative Of ZF

There are no ideal solutions and ZF is not the exception. It has its both positive and negative sides, which we’ll discuss in this part. Let’s start with the negative:

1. Heavy, version 1.8.a for exaple is 17 MB (well, not be afraid of), although this is not so much. If you’re scared this size, see the size of many commercial CMS. Almost of them rolled over for 10 MBs and it is not surprising, cause they have a lot of functions. It is the similar story with ZF. It provides a lot of opportunities, but it’s not the fact that you can use them all.
2. Requires a lot of time to study. Actually, this all is individually here. Some may mark time a year, while it will be enough for others just a few days and they are ready to write their first applications.
3. Resource-intensive. To be honest, I have not seen more than one hosting provider that would kick the bucket from ZF.

That’s all the negative sides. Now the positive:

1. ZF is a set of classes, most of which are not tied to each other, so that it can be used as the spare parts in other projects and completely. There is all you need in today’s Web projects.
2. The presence of a component to work with third-party services.
3. Object-oriented approach.
4. MVC pattern based.
5. Well documented.

So, it’s enough, no more theory and let’s go straight to practice. We estimate the possibility of the giant, so to speak:) Inorder to work with ZF, we need ZendFramework (you can download the latest version from here, HTTP server with the mod_rewrite support, PHP at least version 5.2, and MySQL 5. Download the latest stable version. By the way I almost forgot, you can download ZF in two different assemblies:

• Full
• Minimal.

Full Package contains the Dojo Toolkit, and the demos to work with a skeleton. Because you are just beginning to study this framework, I recommend to download this version.

Minimal Package contains only ZendFramework library.

Extract the folder with the core (/ library / Zend), ZF is better to keep a few levels higher, so that don’t produce the files for each project, in my example, it turned out in this folder D: \ library \ ZF \ 1.7.8 \ Zend \. (i’m on PC)

Making the Structure of the Project

Let’s organize the file structure for our future project. Create two directories in the root of the application:

• application – here all our software modules of the project will be stored
• public, where will be available all share files.

Also create index.php and .htaccess in the root, in which immediately add rules of redirects:


RewriteEngine on
RewriteRule .* index.php


It’s necessary to add similar .htaccess file, in the folder “public”.


RewriteEngine off


Now lets create 3 folders in “application” directory: configs, library, modules.

• configs — here is configuration files of the project.
• library — for additional libraries.
• modules — and it’s for modules of our application.

After all these simple manipulations I had such a structure:

The root:

• application
• configs
• library
• modules
• public
• .htaccess
• .htaccess
• index.php</li

If the structure is ready, so we can move on to the coding ;-)
Open our index file (index.php). Let the interpreter know that php code wiil start soon and determine 4 constants:


PATH_TO_ZF - the path to ZF
PATH_TO_APPLICATION - the path to the folder “application”
PATH_TO_LIBRARY - the path to our libraries
PATH_TO_MODULES - the path to our modules.


The code:

define('PATH_TO_ZF', '../../../ZF/1.7.7/');
define('PATH_TO_APPLICATION', './application/');
define('PATH_TO_LIBRARY', PATH_TO_APPLICATION . 'library/');
define('PATH_TO_MODULES', PATH_TO_APPLICATION . 'modules/');

Now we should tell our intepriter the path to load all our stuff from:

include_path(PATH_TO_ZF . PATH_SEPARATOR . PATH_TO_APPLICATION . PATH_SEPARATOR . PATH_TO_LIBRARY);

The next step is to download Zend_Loader (later we will return to it) and register classes’ autoload.

require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();

So, Zend_Loader is loaded, now let’s activate Zend_Controller_Front (about it, too, later) and point the location of our modules to the dispatcher. Then start the process of dispatching.

$controller = Zend_Controller_Front::getInstance();
$controller->addModuleDirectory(PATH_TO_MODULES)->dispatch();

The result should be something like this:

define('PATH_TO_ZF', '../../../ZF/1.7.7/');
define('PATH_TO_APPLICATION', './application/');
define('PATH_TO_LIBRARY', PATH_TO_APPLICATION . 'library/');
define('PATH_TO_MODULES', PATH_TO_APPLICATION . 'modules/');

set_include_path(PATH_TO_ZF . PATH_SEPARATOR . PATH_TO_APPLICATION . PATH_SEPARATOR . PATH_TO_LIBRARY);

require_once 'Zend/Loader.php';
Zend_Loader::registerAutoload();
$controller = Zend_Controller_Front::getInstance();
$controller->addModuleDirectory(PATH_TO_MODULES)->dispatch();

As you can notice Zend_Controller_Front never loaded because Zend_Loader loadsController automatically. Zend_Loader recognizes location of the controller on its name:
Zend_Controller_Front is in Zend/Controller/Front.php

A Little Bit More About Controller

Zend_Controller_Front implements the Singleton pattern, that means it can be initialized in the project only once. When you call a method dispatch(), the manager goes into a loop of dispatching passing three events:

1. Routing defines what module, controller and the event can be called. If other ways are not written, then: site.ru/modules/controller/action/var1/value1/var2/value2 /. You can also override the paths through Zend_Controller_Route, but more on that in the next article.
2. Dispatching – checking for the called module, controller, and events and call events.
3. Answer – the view rendering.

Developing our Module

Create the folder “default” in our modules folder, it will be our first module. If we turn to our website using the link http://localhost/site.ru (you may have another location), it will be carried our default module. Name of default module can be changed, for example, to the “index”. It is done using the method – setDefaultModule (), object Zend_Controller_Front. It’s necessary to call the method before dispatching. As a parameter the method should get the module name, which will be used by default.


$controller->setDefaultModule('index');


Come on. We will create now two more folders in the module’s folder:

• controllers — there are module controllers
• views — but here everything related to the view (presentation)

Create a new controller (IndexController.php), and put this code:

class IndexController extends Zend_Controller_Action
{
public function indexAction()
{
return;
}
}

Now you need to create a script for our controller. For it, create folders “scripts/index” in a folder “views”. It should be something like this:


default
controllers
IndexController.php
views
scripts
index


Create a file index.phtml in the folder views/scripts/index/. Try to test it! If there are no errors, it means you are good to listen to me :) Now add the event:


$this->view->var = ‘ZendFramework’;


General view of the controller looks like this:

class IndexController extends Zend_Controller_Action
{
public function indexAction()
{
$this->view->var = ‘ZendFramework’;
}
}

Lets add into the view file the following code:

echo $this->var;


After that, update the page.

Creating an Error 404 Page

Create another controller in our module, ErrorController.php:

class ErrorController extends Zend_Controller_Action
{
public function errorAction()
{
return;
}
}

Now lets create a submission for the error: /default/views/scripts/error/error.phtml:


404


In order to test it, type in your browser’s address bar: site/qwerty. As we do not have this page, so the result will be appropriate. In order that would include the output error due to which the script is stopped before dispatching we need to call the throwExceptions() method and passing the appropriate parameters, if we want to see a mistake, true, and false, if we want to differentiate a mistake when we created this page.

You’re Done!

First, I think that’s enough. For our first meeting we discussed a lot of interesting things. It is not all clear while, but do not worry. Skill comes with time. The main thing is not to be lazy and try to do something. In the article I mentioned that ZF is based on the MVC architecture. If you’re scared or have entered a dead end, the words “view”, “controller”, then launch Google and read a basis MVC theory.

That’s all; I hope you enjoyed this tutorial, and thanks for reading! See you in next chapter.

Getting Started

To start with, I am going to take a look at my own needs and see what it appears I need the most. I want to make sure then when creating my own custom HTML & CSS framework, that I include the things I use the most so it will be useful to me in the future. When starting your own I would make a simple list of the most used things you have found yourself doing over and over with each website project.

For this example I will cover the items I found myself needing the most – You can always add or remove items to better fit your own needs when making your own custom HTML and CSS framework:

1. Basic starting DOCTYPE and website head area
2. Link on the HTML document to my .CSS stylesheet
3. A good .CSS reset file
4. A starting point for my project already in place
5. A .PNG fix for older browser versions

A Basic Starting Point

For a basic starting point we will need to know the main items that will be in every website. First will be our DOCTYPE. Although this may change for some people, I know that I mostly use the same one. I got tired of trying to remember it, and it was getting old trying to copy it each time I created a website. This is a must have item within our framework.

Lets begin by creating a new file and naming it index.html – This will be the first start of our framework. Open this file and add your DOCTYPE at the beginning of the document. Since I use the XHTML strict, then I have added the following to my index.html file.

Index.html File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Now that we have a start of our index.html – We will continue on it by adding the HEAD section. This will be the area that we contain our meta information and link to your stylesheets in. Since I have used the same items for years, I want to make sure I include them. Adding them and leaving them blank will allow me to reuse the framework as many times as I want, and customize it each time I create a new project, but will prevent me from having to re-type it over and over every time I am creating a new website.

Now we will take a look at the other information we will be adding into our index.html file. This is the HEAD area:

Index.html

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<title></title>

</head>

Let’s take a look at everything we have added in the above code:

First is our content type, which is a must for proper document retrieval. Next is our description, keywords, and author. After these are our links to our stylesheets we will be creating (Both reset.css and style.css) – Next will be our JavaScript used to fix older browsers with the .PNG file viewing, and then all followed by our Title tag.

Adding these to the framework, and leaving the description, keywords, author and title blank – Will make it very easy to edit each time we make a new website using it.

I am going to add the following to my index.html since it is still a basic start to my every website I create. This will finish up our index.html – This will also create our BODY section of the website framework, and close out our HTML in our document.

Index.html

<body>

		<div id="wrapper">

		</div> <!-- End #wrapper -->

	</body>
</html>

Notice that I have also added a DIV for starting. This has always been my first created DIV on each website I have created unless I really needed something more specific and custom. For most generic websites this one has been a must, so I am adding it into my framework.

Here is a look at the entire Index.html file completed:

Completed Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<title></title>

</head>
	<body>

		<div id="wrapper">

		</div> <!-- End #wrapper -->

	</body>
</html>

Next we will take a look at our .CSS files that we will be adding. Since we have already linked to these in our index.html file, we can create them now to be added to our framework. Notice also that I am using a sub-folder called css. This folder will need to be created, and our .css files will need to be added to this folder. This will help us keep files organized in our framework.

First is going to be our main stylesheet which I have named style.css – Let’s take a look at the basic of what will be added to it for styling purposes:

Style.css

html, body, div, p{
  margin: 0;
  padding: 0;
  border: 0;
  }

/* Main Layout */

body{}

#wrapper{}

/* Extras */

.clear{clear:both;}

Now for the ever so popular Eric Meyer Reset. This will be in it’s own file named reset.css and will also be added to our css folder we have created.

Reset.css

/* CSS Reset created by Eric Meyer - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Now we will need to create our JavaScript that will fix older browsers and allow them to see .PNG files correctly. I like to use PNG files when possible mainly because of the quality, but I need to keep in mind that some people still use older versions of IE which cannot properly view .PNG files. To fix this, I will make another folder and call it “js” – This folder will hold all of my JavaScript files that I would need to use on any website I am creating, but for now it will hold my pngfix.js file. Create a new file called pngfix.js and we will add the followiing:

pngfix.js

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

This will make IE correctly display our .PNG files. We have already added the script code to our index.html file when we created it that will look for this file. Simple enough right?

Let’s move on! – Now we should have a basic setup of files that we have created that we can use as our framework. There are still a few other things that I have found that save time for me when I am creating a website so I have made sure to add them here. If you have seen my other tutorial on creating a PHP website from scratch, then you will know I frequently convert my HTML websites to PHP. To set up my framework to be readily modified to convert, I have set up my framework with the folders and files I would create when converting my HTML website. I will now add the vars folder, to place my PHP variables, and I will also add my includes folder that will have my PHP include files when and if I choose to convert the HTML to PHP.

Notice that I have also added another blank folder to my framework setup for images. This is the folder I always create and add my website images to for any project that I create. This helps organize my files when making new websites.

Here is a look at what my folder setup looks like with everything complete:

HTML CSS Framework
|
|-- index.html
|--- js
|     |-- pngfix.js
|--- images
|--- vars
|--- includes
|--- css
|     |-- style.css
|     |-- reset.css
|

A quick overview of the files we have created:

index.html – Our main html file for website creation

style.css – reset.css – Contained within our css folder, and used for styling the look of our website

pngfix.js – Our JavaScript file that fixes IE to properly view .PNG files

images folder – For adding our website images we will be using when creating the website using our framework

includes folder – For placing files we would create if converting the HTML website to PHP

vars folder – For adding variables to use with our PHP website if we converted it

PHP Notes for Conversion

For those of you that are like me and would be using this framework to make the website, then convert it to PHP – Here are some quick notes on including the PHP files, and also setting and using variables. This is just a quick reference that you can save and even keep as a txt file within your framework if you want for later use.

// Including the external PHP within XHTML
<?php include('path/filename.php') ?>

// Setting the variable itself
$variable="data details";

// Creating the output for the data
<?php
echo $variable
?>

Overall Focus

The overall focus of creating your own HTML & CSS framework is really to save time. It helps when having everything together and ready each time you want to start a new project for yourself or a client. Saving time and having some things already in place can also help with organization. Putting attention into these can sometimes help you be more creative and flexible since you would not have to waste time doing the same things over and over again. This can also help you place more attention on detail and prevent you from running your energy out on items not needed. All together this could mean the difference in yourself or a client being happy or not, and also meeting a deadline in time knowing that certain things are already done for you.

Download

If you would like to download the files that I have created within this tutorial to use for yourself in your own projects then feel free to. I have found making a simple framework is a priceless thing to have and has helped me numerous times. I do know that many of you may already have your own framework that you use but I wanted to share mine with you. Feel free to download the example tutorial files by clicking [HERE]

In Closing…

I hope everyone has enjoyed the article, and finds it useful in making your own HTML and CSS Framework. If you have any suggestions or questions then feel free to comment below and let me know. I hope that you also find it useful in your own projects and see the difference in time it takes to begin a new project. I hope it also helps everyone with creativity since you can now focus more energy into more important things such as design, and client specifics instead of starting a project from small snippets or trying to remember DOCTYPE’s – Happy coding! and thank you for reading!

1.Thematic, A WordPress Theme Framework

Thematic is a free, open-source, highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins, and a whole community behind it. It’s perfect for beginner bloggers and WordPress development professionals.

Preview live demo

2. Hybrid WordPress Theme Framework

Amazing WordPress theme framework, definitely one of my favorite. Here is short list what You archieve from this framework:

I’ll just give you the short list instead, so you can go ahead and play with the theme:

• Developed with child themes in mind, so you’ll never lose your customizations.
• SEO optimized. No need for plugins to handle this anymore.
• Theme options that are about content/information.
• Templates for everything.
• 13 page templates.
• Actively developed for WP 2.7 but backward compatible down to 2.5.
• 15+ plugins supported within the theme.
• Attachment handling like you’ve never experienced.
• Advanced breadcrumbs beyond any other theme.
• Ability to run just about any type of site.
• And over 20 tutorials to start.

Preview live demo

3.Carrington – CMS theme framework for WordPress

Carrington is a CMS theme framework for WordPress that makes it easy to create unique looks for different categories, posts and comments just by creating custom templates. Framework with full documentation, community forums to have Your problems explained, very friendly!

Preview live demo

4.Vanilla Theme

Vanilla’s key boast is this: Exceptional power and freedom for designers, without (or barely) needing to know or touch PHP. Thanks to the combined capabilities of PHPTAL templates, Carrington’s atomic templates, YUI CSS and full widgetization (including custom widget controls).

Lovely framework released under code.google.com section where several frameworks is combined together – definitely worth checking out!

Preview live demo

5.Whiteboard – A Free WordPress Theme Framework

It is designed to speed up the process of designing and coding a WordPress theme by eliminating the time spent on WordPress’ back-end PHP that is used in every theme.

Whiteboard is clean, noted, and compact (only 76KB in size – unzipped!). It includes all the standard PHP tags and PHP files needed for a WordPress theme – plus a few extras.

6. WP Framework – A blank WordPress Theme Framework

WP Framework is a blank WordPress theme framework, which aims to cut down on your theme development time. It gives you a solid theme foundation to build your project on top of so you can focus on project-specific features right from the git-go.

7. SandBox

The Sandbox is a powerful tool available for WordPress theme designers and developers. The Sandbox can be easily designed just with CSS, so beginners will feel comfortable not bothering with PHP.

Experienced developers and designers can accomplish almost anything with minimal work, thanks to the rich, semantic markup and profusion of classes dynamically generated by the Sandbox.

8. OnePress Community Framework

The OnePress framework is an integrated website and forum solution. It is, simply, a WordPress theme to serve as the foundation and framework for your web site and online community. Leveraging the powerful WordPress and phpBB projects, OnePress provides a set of features focused on helping you build and maintain your site from the inside out. With this set of tools, you can easily run your community and do so with professional presentation.

9. The WordPress Starter Theme Project

And here are some of the features of WPcandy starter theme:

• Blank style.css with theme name, author, URL, etc. tags at the top
• Content-ready 404, archive, search, index, single post, and page files
• Full, working comments.php file
• Complete header.php set up with links to RSS, a stylesheet, and JS file; <title> template
• Default search form template
• Blank screenshot.png file and images folder

Several child themes and resources:

Junction WordPress Child Theme

Junction is a WordPress Child Theme based on the Thematic Theme Framework. In terms of style, Junction is vastly different from Thematic, however Junction capitalizes on the power of the Thematic Framework, which allows the ability to style the entire template without touching a single line of original php or html code.

Thematic Child Themes

Thematic offers a bunch of child themes, I featured one of them, but You should check this site for Yourself, actually I suggest You to subscribe to this site if You’re serious about WordPress theme developing.

Acamas WordPress Child Theme

Acamas is a Thematic Themelet. That means Acamas requires the Thematic Theme Framework installed in your WordPress theme directory. Thematic powers Acamas. And Acamas builds on the power of Thematic. But don’t worry! Thematic is free. Even better, it’s open-source and one of the most advanced SEO WordPress themes around. Download Thematic now and set your blog on a rock-solid foundation for success.

Preview live demo

And finally I found several related articles, You should read if You’re interested in actual using/modifying and developing WordPress themes:

How I used a WordPress Child Theme To Redesign My Blog

Poll – Which WordPress Theme Framework To Use?

Interesting poll with discussion below, trying to help You choose the right WordPress theme framework for Your case.

Why I created a WordPress theme framework?

Justin Tadlock, creator of Hybrid theme framework, explains what’s theme framework at all and why You should use it at all and much more – just read this article!

How to make a child theme for WordPress: A pictorial introduction for beginners

You can read in this article:

ThemeShaper Forums

This forum will kindly give You answers to many unclear questions dedicated to help You modify WordPress themes.

Lorelle on WordPress

“Helping you learn more about blogging and WordPress every day with help, tips, advice, and techniques for blogging and using WordPress and WordPress.com. The blogging help you need. Now.” – amazing site with many useful articles and links about WordPress, blogging helping You to take Your skills to the next level.

WordPress Codex

And of course, You shouldn’t forget about actual WordPress creator codex website. It seems obvious, but often we forget such things :)

So you want to create WordPress themes huh?

Excellent WordPress guide teaching You how to create WordPress theme from scratch and clearly explaining each code snippet. I personally started here my WordPress learning.

In this article I wanted to show just the best WordPress Theme frameworks and few guidelines where to continue Your research so I kept WordPress tutorial, resource and article selection for later. Enjoy!

Few further resources:

• Top 50 WordPress Tutorials
• WordPress Theme Hacks
• Resources Every WordPress Theme Developer Should Know About!
• 100+ Massive WordPress Tutorial Collection
• WordPress Developer’s Toolbox
• Tutorial: Creating Custom Write Panels in WordPress

If You are creating and developing new web-sites regularly, You should think about template creation, collecting useful code snippets and things like that. You should do that to fasten development process, so I think You could use, change, optimize these template files to Your needs, however check out licence terms, if You use these for business purposes. However this is very generalize list for now, to clear out the best from the best sites. Use them well!

1. CSSTidy

“CSSTidy is an opensource CSS parser and optimizer. It is available as executable file (available for Windows, Linux and Mac) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.”

I pasted their information, because it says everything better than I could.

For some people there can be a question – why You need to optimize Your CSS code?  Just if You want cleaner code, faster loading page, so You both – You and visitor benefit from optimization!

Get executable file here or use online optimizer!

2. Clean CSS

You can also use this online optimizer version, which is very similar, but I am design geek, so I enjoy this site a little more. This calls, pick Your favorite one!

3. Blueprint CSS

“Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.”

Very useful template files, helping You not to start always from big fat zero..and code everything again and again – now You can spend more time adding new features and think more about design, then reiterative process.

4. Code-Sucks

Great collection of many different css layouts, code snippets (CSS, JavaScript, PHP), website templates. These really become handy in web development process. Put these in good use.

5. Snipplr

Snipplr is very useful place storing and organizing many code snippets (Javascript, HTML, PHP, CSS, Ruby). You use regularly in Your development process. And also everybody can share and add their snippets, so the section  Popular Code Snippets clearly demonstrates the best and the most used codes for everybody. Pretty great. Also these snippets work with TextMate, too.

6. MaxDesign

Perhaps You know this site, I think I mentioned it somewhere before, but however this site must be included, because it’s really useful.

There You can find listamatic1 (one list – many different ways how to style it), listamatic2 () and several tutorials how to create CSS based lists, CSS floats and use CSS selectors.

7. MeyerWeb CSS Reset

Eric Meyer CSS reset is very popular. You should use resets to neutralize browser’s default style. Also Eric pointed, that this is just a starting point, but very good one.

8. YUI Library

“Every YUI Library component ships with a series of 300 examples that illustrate its implementation. These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.”

Very useful template files, which are great for starting points and You have good collection of examples to satisfy almost every web designer.

9. 960 Grid System

This grid system is becoming really popular – they offer commonly used dimensions, based on a width of 960 pixels offering 12 and 16 column grid systems. Designers use grids, to help their sites to look more harmonious and precise. You get several template files and mockups, when You download  that grid system, which are really helpful in the right hands.

Download / Demo

10. Sensible Standards CSS Framework

This framework is also based on Eric Meyer reset system, but also there are more features as basic styling, code is optimized without any double resets and more, go to their homepage to check for details.

11. Rounded CSS corners

I guess You’ve heard about big discussions about rounded corners and how to create ones, here is great online tool where You can get rounded corners, style them online and get code immediately.

12. Content with style

Good framework collection to allow You rapidly fast develop new websites, thinking more about graphic design and less about coding.

I hope You’ll use these sites as a reference evolving Your skills and speed up Your development process! I am sure there are more sites out there, if You know some more, be honest and leave backlinks, will be appreciated!