HTML5, Boilerplates and Plugins
With the aim of becoming well-informed on HTML5 and CSS3 I have been reading up on the latest or best practice resources for both specifications.
The best way I learn is to incorporate newly acquired skills into real-life projects. This site so far includes:
- HTML5 and CSS3
- Hand written mobile first design including a responsive grid, and responsive forms, images and type.
- Parts of the HTML5 Boilerplate
- CSS based on SMACSS techniques
- The accessible Responsive Nav plugin
- The jQuery Validation Plugin incorporating accessible form validation by Nomensa
- WordPress integration (theme development involved considered use of responsive and accessible design)
HTML5 and CSS3
I found the sitepoint book HTML5 and CSS3 for the Real World a very good starting point. This book offers an excellent understanding into the use of the new features and technologies.
Sitepoint and Learnable will probably come up a lot in these posts as I find they offer some of the best and timely resources for getting started on new technologies and techniques on front and back end development.
Handwritten Responsive Elements – HTML5 and CSS3
The responsive grid I have created for this site’s needs is based on the tutorial from the Responsive Web Design – Key Concepts course. Responsive type, forms and images were built on the tutorials in the Responsive Web Design in Action course. Both courses are from the Learnable site.
I studied the components of the widely used HTML5 Boilerplate. An Introduction by HTML5 Boilerplate article offers a good overview on the boilerplate.
One of the first thing mentioned by the article is Modernizr. Learnable offers a course on Modernizr which I will come back to as more complex features are used on this site. It is not required for the needs of this site at the moment. Another good resource is A List Apart article on Modernizer.
The use of HTML5 and CSS3 features not supported by legacy browsers is covered on this site for now by:
- HTML5 shiv to enable the use of sectioning elements
- respond.js to allow the use of CSS3 media-queries
- normalize.css to provide for consistency of HTML elements across browsers and as an alternative to the CSS reset
HTML5 Boilerplate HTML
Studying the HTML template provided as part of the boilerplate, the next parts of interest are the conditional classes applied to the html element. These provide one method to incorporate fixes for legacy version of Internet Explorer . The HTML5 Boilerplate HTML documentation describes the benefit of these classes.This technique is not required for all projects and has been removed for this one.
The documentation explains the other default HTML features of the boilerplate:
- the importance of the order of metatags.
- the placement of the Google Analytics code and a link to optimising the asynchronous version of the code. Not used here for now but may be provide interesting further study
HTML5 Boilerplate CSS
Normalize.css is included as part of the boilerplate. The HTML5 Boilerplate CSS documentation also provides information on the included defaults, helpers, placeholder media queries and print styles.
For now I will only use the helpers to hide text from browsers but make it available to screen readers. I will also use the inline print styles provided (inline to reduce the number of page requests as specified by documentation).
SMACSS by Jonathan Snook is a guide to building a structured and maintainable CSS architecture. The real benefit will be seen in larger site I expect but I found it a great way to organise the CSS.
Responsive Nav Plugin
Responsive Nav plugin by @viljamis was recommended by Russ Weakley in his Learnable Responsive Design in Action course as being accessible. It is a plugin that is very easy to use and offer easily customisable options.
jQuery Validation Plugin and form validation extension
This plugin has already been covered in a previous post Accessible Forms using jQuery.
Post Update on CSS3
The CSS3 elements I have used are media queries, border-radius and box sizing. Respond.js deals with the media queries and I am not too fussed with the rounded corners of border radius not showing in legacy browsers. But I do want the very useful box-sizing property to work on my forms as this is helpful to stop my input fields from being cut off. A useful article on box-sizing by Paul Irish provides a fix for all elements. I have used this fix only on the form fields for now.