The default WordPress theme is quite possibly the most widely used design on the web; the minute you sign up for or install WordPress you have a website that uses the default theme. Every year WordPress unveils a new look that will grace every “just another WordPress site.”

This year’s theme, Twenty Twelve, is the first to embrace responsive design, adapting its layout to fit any screen. The WordPress admin pages are already responsive, and the last few default WordPress themes have accommodated small screens, even using some responsive design tools like CSS @media, but this is the first default theme to fully embrace responsive design and fluidly adapt to any screen.

Twenty Twelve marks something of a departure for the default theme. Gone are the banners and featured images atop posts. Instead Twenty Twelve sticks with a largely black-and-white look that puts the emphasis on typography and a new typeface, Open Sans.

If you’d like to use Twenty Twelve on your WordPress.com site, just head to the dashboard and select Themes, (under Appearance). If you’re hosting your own WordPress install, you’ll soon have access via the Extend theme directory. And of course the new theme will be bundled with WordPress 3.5 due later this year.

This year’s theme was designed by former NFL playerDrew Strojny, though as with all things WordPress there was plenty of help from the WordPress community. The WordPress blog has more details about Twenty Twelve and there’s a live demo you can check out as well.

If you’ve been building websites for a while, chances are you have some boilerplate code you use to jump-start a new site — perhaps some CSS resets, a basic HTML structure, and so on. You tweak and refine your boilerplate as standards evolve. One of the best ways to improve your basic code is to […]

If you’ve been building websites for a while, chances are you have some boilerplate code you use to jump-start a new site — perhaps some CSS resets, a basic HTML structure, and so on. You tweak and refine your boilerplate as standards evolve.

One of the best ways to improve your basic code is to see how other people do the same thing. We recently stumbled across HTML5 Reset, a set of templates and code that makes a great starting point for a sites that will be using HTML5 and CSS 3.

As the HTML5 Reset authors note, the code is by no means an “end-all and beat-all” set of templates. In fact, the code may not work for your project at all, but even you don’t end up using it as-is, you may be able to glean some good ideas from it.

For example, because I use Sass for developing stylesheets, raw CSS isn’t all that useful for my projects. However, HTML5 Reset has a very nifty class for clearing floats without extra markup, so I ended up incorporating that element into my own Sass-based boilerplate code. Take what’s useful and leave the rest.

There are a couple versions of HTML5 Reset — the “Kitchen Sink” version that includes nearly everything and has copious comments and a “Bare Bones” version that’s stripped down to just the basics. I recommend checking out the former unless you’ve decided to commit to HTML5 Reset. It’s always easier to start off by removing things you don’t need than trying to figure out what you need to add.

If you’re curious, head over to the HTML5 Reset site to learn more. HTML5 Reset is available under the BSD license. If you see bugs or have suggestions on how to improve HTML5 Reset, be sure to let the authors know.

]]>http://www.webmonkey.com/2010/02/blank_html_document/feed/6Blank HTML Document With Right Navhttp://www.webmonkey.com/2010/02/blank_html_document_with_right_nav/
http://www.webmonkey.com/2010/02/blank_html_document_with_right_nav/#commentsTue, 16 Feb 2010 01:45:47 +0000Webmonkey Staffhttp://stag.wired.com/primate/?p=422This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the right. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content. <!DOCTYPE html> <head> <meta […]

This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the right. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content.

]]>http://www.webmonkey.com/2010/02/blank_html_document_with_right_nav/feed/15Blank HTML Document With Left Navhttp://www.webmonkey.com/2010/02/blank_html_document_with_left_nav/
http://www.webmonkey.com/2010/02/blank_html_document_with_left_nav/#commentsTue, 16 Feb 2010 01:45:47 +0000Webmonkey Staffhttp://stag.wired.com/primate/?p=424This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the left. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content. <!DOCTYPE html> <head> <meta […]

This is a blank HTML document with a header, footer, a main content area and separate column for navigational elements on the left. If you want to make a web page with a simple two-column layout, copy and paste this code into a text editor and start typing your awesome content.

]]>http://www.webmonkey.com/2010/02/blank_html_document_with_left_nav/feed/4Content-Typehttp://www.webmonkey.com/2010/02/content-type/
http://www.webmonkey.com/2010/02/content-type/#commentsMon, 15 Feb 2010 20:45:47 +0000Webmonkey Staffhttp://stag.wired.com/primate/?p=810Every web page should declare a content type. This tells the browser what language and character set to expect when rendering the text and ensures that characters are displayed properly on the page. Content type declarations go in the <head> of your document. This is a standard content type declaration: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

]]>http://www.webmonkey.com/2010/02/content-type/feed/1CharSethttp://www.webmonkey.com/2010/02/charset/
http://www.webmonkey.com/2010/02/charset/#commentsMon, 15 Feb 2010 20:45:47 +0000Webmonkey Staffhttp://stag.wired.com/primate/?p=813Every web page should declare a character set. This is one line of code that tells the browser what language and character set to expect when rendering the text. It ensures that characters are displayed properly on the page. Character set declarations go in the <head> of your document. Here are some standard character set […]

Every web page should declare a character set. This is one line of code that tells the browser what language and character set to expect when rendering the text. It ensures that characters are displayed properly on the page.

Character set declarations go in the <head> of your document.

Here are some standard character set declarations for common languages: