Archive for the ‘Templates’ Category

WordPress Embraces Responsive Design With New ‘Twenty Twelve’ Theme

Meet Twenty Twelve, the latest default WordPress theme. Image: Screenshot/Webmonkey.

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 player Drew 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.

File Under: Frameworks, HTML5, Templates

HTML5 Reset Speeds Up Site Development With Handy Boilerplate Code

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.

HTML5 Reset draws on many well-known sources like Eric Meyer’s reset stylesheet, the Modernizr script for HTML5 across browsers, Dean Edwards’ IE7.js. (Separately, there’s also the excellent HTML5 Boilerplate, which has similar HTML5 and CSS 3 features, but of course a slightly different way of implementing them.)

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.

See Also:

File Under: HTML, Templates

Blank HTML Document

This is a blank HTML document. If you want to make the simplest of web pages, copy and paste this code into a text editor and start typing your awesome content.


Continue Reading “Blank HTML Document” »

File Under: CSS, HTML, Templates

Blank HTML Document With Right Nav

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. Continue Reading “Blank HTML Document With Right Nav” »

File Under: CSS, HTML, Templates

Blank HTML Document With Left Nav

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.


Continue Reading “Blank HTML Document With Left Nav” »