Handy HTML5 & CSS3 Resources

Recent projects have seen more and more HTML5 and CSS3 elements being asked for by our clients. This has led me to creating this post that lists some really handy resources for implementing these new technologies. I’ll keep adding to this post as I find new resources, so bookmark this page for future use.

HTML5

  1. HTML5 Boiler Plate Now on version 2 (released Aug 10 2011) the HTML5 Boilerplate is the professional HTML/CSS/JS template that features cross-browser normalization, performance optimizations and includes optional features like cross-domain Ajax and Flash.
  2. The Ultimate HTML5 Tutorial Collection A vast collection of tutorials and useful techniques from around the web.
  3. W3 Schools HTML5 Tutorial a simple tutorial that teaches you about the basics of the new features in HTML5
  4. HTML5 and CSS3 Tutorial by NetTuts A practical example of how to implement HTML5 and CSS3.
  5. HTML 5 Updates for .NET 4 Find out about the updates contained in Visual Studio 2010 SP1 for supporting HTML5 and CSS3.

CSS3

  1. Learning CSS3: A Reference Guide an overview that features a hand-picked and organized selection of the most useful Smashing Magazine’s articles related to CSS3.
  2. W3 Schools CSS3 Tutorial a simple tutorial that teaches you about the basics of the new features in CSS3.
  3. CSS3 Generator a useful tool by Randy Jensen that generates the following; rounded corners, box shadows, text shadows, RGBA transparencies, transitions, gradients and a whole lot more.
  4. Ultimate CSS3 Gradient Generator A powerful Photoshop-like CSS gradient editor from ColorZilla.
  5. CSS3 Button Maker A powerful tool that allows you to create fantastic looking buttons with no images.
  6. CSS3 Click Chart A visual demonstration of CSS3 in action.
  7. The Most Important CSS3 Properties Explained A good summary of the most important features in CSS3.
  8. Using CSS3: Older Browsers And Common Considerations A Smashing Magazine article that covers graceful degradation for older browsers that do not support CSS3.
  9. Create an adaptable website layout with CSS3 media queries A tutorial that will teach you how you can create an adaptable website layout using CSS3.
  10. Making HTML5 and CSS3 work with polyfills and shims A tutorial that shows you how to use the Modernizr framework to make your HTML5 and CSS3 work on older browsers.
  11. 12 Fun CSS Text Shadows Some really nice text shadow effects that you can just copy and paste into your code.
  12. 21 top tools for responsive web design Denise Jacobs rounds up 21 great tools to aid the process of making your sites responsive.
  13. Cross-Browser CSS in Seconds with Prefixr.com video tutorial by nettuts on how to use the Prefixr tool to auto-fix your CSS3 vendor prefixes.

WordPress Template Building Resources Part 3

Popular Template Tags

Template tags are used within your blog’s Templates to display information dynamically or otherwise customize your blog, providing the tools to make it as individual and interesting as you are. Below is a list of the general user tags available in WordPress, sorted by function-specific category.

Here is an excerpt from the Codex of the most commonly used Template Tags used for building a WordPress theme:

General Tags

Post Tags

The remainder can be found on the Codex here.

WordPress Template Building Resources Part 2

Meta Tags

WordPress does not include meta tags such as description and keywords in a default installation, you can add them to your template using the following code.

<meta name="description" content="<?php if ( is_single() ) {
        single_post_title('', true); 
    } else {
        bloginfo('name'); echo " : "; bloginfo('description');
    }
    ?>" />

This will add a description meta tag with the post title if the page is displaying a single post and the site name and description otherwise. If you prefer you can make the single post show the excerpt instead of the post title (probably more useful as the post title is likely to be the page title).

<meta name="description" content="<?php if ( is_single() ) {
        the_excerpt();
    } else {
        bloginfo('name'); echo " : "; bloginfo('description');
    }
    ?>" />

Further Reading

WordPress Template Building Resources Part 1

WordPress is an amazing platform for creating blogs and simple brochure style websites. Some may argue that WordPress is even a suitable platform for an e-commerce site or a content managed web application. Personally, as I’m more familiar with ASP.NET I tend to stick to the Microsoft platform for complex sites, this way I’m totally confident that I can produce a solution for any requirements a client may have. Only recently have I become a convert to WordPress, I have discovered that WordPress has become a platform that offers a great deal of functionality for very little investment and thus makes it an ideal candidate for small, low budget sites.

Before you adopt a new framework for building web sites, it’s worth checking out the quality of the documentation and the community that support it. I’m pleased to say that WordPress and the WordPress community resources are some of the best I have seen and are a great place to start when you get down to coding.

Blank Starter Themes

There is nothing wrong with using the default themes that come with WordPress as blank starter themes or even using them to create child themes. There is also nothing wrong with creating a theme from scratch. However, there are a number of free starter themes that you may find more suitable for theme creation as they can save you time and money whist also offering a high degree of flexibility to meet your design requirements. Here are a few blank themes I have tried.

http://html5reset.org/#wordpress
This is a HTML 5 blank template, a style-free theme designed to help get your custom WordPress project off the ground in double quick time.

http://wordpress.org/extend/themes/thematic
Thematic is a highly extensible, WordPress Theme Framework featuring 13 widget-ready areas, drop-down menus, grid-based layout samples, plug-in integration, short codes for your footer, & a whole lot more. Perfect for any blog and the starting point for theme development.

http://starkerstheme.com
Starkers is a bare-bones WordPress theme created to act as a starting point for the theme designer. Free of all style, presentational elements, and non-semantic markup, Starkers is a stripped-back version of the ‘Twenty Ten’ theme that ships with WordPress.

There are many more blank themes available if the themes above don’t have what you need, here’s a good place to start looking: http://www.google.co.uk

Dummy Content

When building your theme it helps if your development site has a good variety of dummy content to make sure your theme can handle all possibilities. You can add your own content however it’s more efficient to use a pre-build solution.

http://codex.wordpress.org/Theme_Unit_Test
downloadable XML file that you use to import dummy content into a WordPress site.

http://wordpress.org/extend/plugins/wp-dummy-content/
WP-Dummy-Content is a WordPress plugin that has a one click install that generates a bunch of pages, sub-pages and posts.

Creating a child theme

A WordPress child theme is a theme that inherits all the attributes of a parent theme but gives you the opportunity to overwrite specific elements to make your own version. Making a child theme is very simple all you need to do is:

  1. Create a new folder for your theme e.g. wp-content/themes/your-theme-name
  2. Add a new text file named style.css
  3. Edit header section of style.css like so:
/*
Theme Name:     Test Child Theme
Theme URI:      http://yourwebsite.com
Description:    Child theme based on the Twenty Eleven theme
Author:         You
Author URI:     http://yourwebsite.com
Template:       twentyeleven
Version:        1
*/
  1. Finally, enable the child theme and restyle the site using your new style.css file.

Further reading: http://codex.wordpress.org/Child_Themes

WordPress Template Files

After you have created you custom or child theme, you may want to override the default page templates. To do this all you need to do is add the relevant php file to your template folder. You will need to know what template does what so below is an excerpt from the WordPress, template hierarchy document that should give you a pointer: http://codex.wordpress.org/Template_Hierarchy

Home Page display

  1. home.php
  2. index.php

Front Page display

  1. front-page.php – Used for both Your latest posts or A static page as set in the Front page displays section of Settings -> Reading
  2. Page display rules – When Front page is set in the Front page displays section of Settings -> Reading
  3. Home Page display rules – When Posts page is set in the Front page displays section of Settings -> Reading

Single Post display

  1. single-{post_type}.php – If the post type were product, WordPress would look for single-product.php.
  2. single.php
  3. index.php

Page display

  1. custom template – Where custom template is the Page Template assigned to the Page.
  2. page-{slug}.php – If the page slug is recent-news, WordPress will look to use page-recent-news.php
  3. page-{id}.php – If the page ID is 6, WordPress will look to use page-6.php
  4. page.php
  5. index.php

Category display

  1. category-{slug}.php – If the category’s slug were news, WordPress would look for category-news.php
  2. category-{id}.php – If the category’s ID were 6, WordPress would look for category-6.php
  3. category.php
  4. archive.php
  5. index.php

Tag display

  1. tag-{slug}.php – If the tag’s slug were sometag, WordPress would look for tag-sometag.php
  2. tag-{id}.php – If the tag’s ID were 6, WordPress would look for tag-6.php
  3. tag.php
  4. archive.php
  5. index.php

Custom Taxonomies display

  1. taxonomy-{taxonomy}-{term}.php – If the taxonomy were sometax, and taxonomy’s slug were someterm WordPress would look for taxonomy-sometax-someterm.php. In the case of Post Formats, the taxonomy is ‘post_format’ and the terms are ‘post-format-{format}. i.e. taxonomy-post_format-post-format-link.php
  2. taxonomy-{taxonomy}.php – If the taxonomy were sometax, WordPress would look for taxonomy-sometax.php
  3. taxonomy.php
  4. archive.php
  5. index.php

Custom Post Types display

  1. archive-{post_type}.php – If the post type were product, WordPress would look for archive-product.php.
  2. archive.php
  3. index.php

(when displaying a single custom post type see the Single Post display section above.)
Author display

  1. author-{nicename}.php – If the author’s nice name were rami, WordPress would look for author-rami.php.
  2. author-{id}.php – If the author’s ID were 6, WordPress would look for author-6.php.
  3. author.php
  4. archive.php
  5. index.php

Date display

  1. date.php
  2. archive.php
  3. index.php

Search Result display

  1. search.php
  2. index.php

404 (Not Found) display

  1. 404.php
  2. index.php

Attachment display

  1. MIME_type.php – it can be any MIME type (image.php, video.php, audio.php, application.php or any other).
  2. attachment.php
  3. single.php
  4. index.php

Add a Default Value to a Databound DropDownList

3 ways to add a default value to a databound ASP.NET dropdownlist control

When you directly bind an asp.net dropdownlist to a data source you lose any list items that already exist. As a general rule of thumb most web applications that use dropdownlists have a default list item such as “Please Select”.

ASP.NET offers a number of ways to either overrule this behaviour or programatically add your default list items at runtime. Here are my 3 favourite techniques.

1. Append Databound Items Option

The dropdownlist control has an attribute named AppendDataBoundItems, set this to true and .NET will add the new items without removing any existing items. The only drawback with this method is that you need to be careful if you have some business logic that rebinds the control, you could easily end up with duplicate list items.

<asp:DropDownList 
ID="ddl_MyDropDownList" 
AppendDataBoundItems="true" 
runat="server">
        <asp:ListItem Value="" Text="Please Select" Selected="True" /> 
</asp:DropDownList>

 

2. Items Collection Add Command

In your business logic you can programatically access the dropdownlist’s items collection and add a new list item. You must do this after the item has been databound, otherwise it will be lost. The pre-render event is a likely candidate for this type of control manipulation.

ddl_MyDropDownList.Items.Add( _
New ListItem("Please Select", String.Empty))

 

3. Items Collection Insert Command

In your business logic you can programatically access the dropdownlist’s items collection and insert an item at a given index. This is far more useful than the “Items.Add” method. As you will see in the code below, we can simply insert an item at index 0 this will ensure that the new list item will appear at the top of the list. As a further measure I’ve set the new item’s selected property to True, this is entirely optional.

ddl_MyDropDownList.Items.Insert( _
0, New ListItem("Please Select", String.Empty))
ddl_MyDropDownList.Items.Item(0).Selected = True