Webmonkey » Templates http://www.webmonkey.com The Web Developer's Resource Fri, 05 Apr 2013 20:20:46 +0000 en-US hourly 1 http://wordpress.org/?v=3.4.2 WordPress Embraces Responsive Design With New ‘Twenty Twelve’ Theme http://www.webmonkey.com/2012/08/wordpress-launches-new-default-theme-twenty-twelve/ http://www.webmonkey.com/2012/08/wordpress-launches-new-default-theme-twenty-twelve/#comments Wed, 29 Aug 2012 16:10:24 +0000 Scott Gilbertson http://www.webmonkey.com/?p=58749 WordPress Embraces Responsive Design With New ‘Twenty Twelve’ ThemeThe default WordPress theme might be the most common site design on the web. And now, not only is there a new default WordPress theme, but it's responsive, adapting its layout to fit any screen.]]>

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.

]]> http://www.webmonkey.com/2012/08/wordpress-launches-new-default-theme-twenty-twelve/feed/ 0 HTML5 Reset Speeds Up Site Development With Handy Boilerplate Code http://www.webmonkey.com/2010/08/html5-reset-speeds-up-site-development-with-handy-boilerplate-code/ http://www.webmonkey.com/2010/08/html5-reset-speeds-up-site-development-with-handy-boilerplate-code/#comments Tue, 17 Aug 2010 18:48:35 +0000 Scott Gilbertson http://www.webmonkey.com/?p=48333 HTML5 Reset Speeds Up Site Development With Handy Boilerplate CodeIf 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.

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:

]]> http://www.webmonkey.com/2010/08/html5-reset-speeds-up-site-development-with-handy-boilerplate-code/feed/ 7 Blank HTML Document http://www.webmonkey.com/2010/02/blank_html_document/ http://www.webmonkey.com/2010/02/blank_html_document/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=416

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. 



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

        "http://www.w3.org/TR/html4/loose.dtd">



<html lang="en">



<head>



	<meta http-equiv="content-type" content="text/html; charset=utf-8">

	<title>Title Goes Here</title>



</head>



<body>

<p>This is my web page</p>



</body>



</html>
]]> http://www.webmonkey.com/2010/02/blank_html_document/feed/ 6 Blank HTML Document With Right Nav http://www.webmonkey.com/2010/02/blank_html_document_with_right_nav/ http://www.webmonkey.com/2010/02/blank_html_document_with_right_nav/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=422

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. 


<!DOCTYPE html>

<head>

<meta charset="utf-8" />

	<title>My Web Page</title>





	<style type="text/css">

		* { margin: 0; padding: 0; }



		html { height:100%; }



		body {

		text-align: left;

		width: 100%;

		height: 100%;

		font-size: 62.5%;

		font-family: Helvetica, arial, sans-serif;

		color: #000;

		background: #fff;

		margin: 0;

		border: 0;

		padding: 0; }



		a { color:#007ca5; text-decoration:none; outline: none; }

		a:visited { color:#666; }

		a:active { color:#999; }



		.right_col a { color:#fff; text-decoration: none; outline: none; }

		.right_col a:hover { color:#fff; text-decoration: underline; outline: none; }

		.right_col a:visited { color:#fff; }

		.right_col a:active { color:#fff; }



		img, a img { border-style: none; }



		h1, .h1 { font-size: 2.4em; }

		h2, .h2 { font-size: 2em; } /* 20pt */

		h3, .h3 { font-size: 1.8em; } /* 18pt */

		h4, .h4 { font-size: 1.6em; } /* 16pt */

		h5, .h5 { font-size: 1.4em; } /* 14pt */

		h6, .h6 { font-size: 1.1em; } /* 11pt */



		.small { font-size: .9em; }



		.clearer { clear:both; }



		.header {

			text-align: left;

			background: #4f0f00;

			color: #fff;

			width: 980px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.main_col {

			text-align: left;

			float: left;

			background: #fff;

			color: #000;

			width: 660px;

			height: 600px;

			margin: 0 20px 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.right_col {

			text-align: left;

			float: right;

			background: #007ca5;

			color: #fff;

			width: 280px;

			height: 600px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.footer {

			text-align: left;

			background: #eceae1;

			color: #000;

			width: 980px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.wrapper {

			text-align: center;

			width: 1000px;

			margin-left: auto;

			margin-right: auto;

			}





	</style>



</head>

<body>



  	<div class="wrapper">



		<div class="header">



			<br />

			<h1>Header content goes here</h1>

			(980px wide + 10px padding)



			<br /><br />



		</div>





		<div class="main_col">



			<h2>Main content goes here</h2>

			(660px wide + 10px padding + 20px right margin)



		</div>





		<div class="right_col">



			<h5>Right column content goes here</h5>

			(280px wide + 10px padding)



		</div>



		<br class="clearer" /">





		<div class="footer">



			<span class="small">

				Tiny footer content goes here

				<br />

				(980px wide + 10px padding)

			</span>



		</div>



  	</div>



</body>

</html>
]]> http://www.webmonkey.com/2010/02/blank_html_document_with_right_nav/feed/ 15 Blank HTML Document With Left Nav http://www.webmonkey.com/2010/02/blank_html_document_with_left_nav/ http://www.webmonkey.com/2010/02/blank_html_document_with_left_nav/#comments Tue, 16 Feb 2010 01:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=424

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. 


<!DOCTYPE html>

<head>

<meta charset="utf-8" />



	<title>My Web Page</title>



	<style type="text/css">

		* { margin: 0; padding: 0; }



		html { height:100%; }



		body {

		text-align: left;

		width: 100%;

		height: 100%;

		font-size: 62.5%;

		font-family: Helvetica, arial, sans-serif;

		color: #000;

		background: #fff;

		margin: 0;

		border: 0;

		padding: 0; }



		a { color:#007ca5; text-decoration:none; outline: none; }

		a:visited { color:#666; }

		a:active { color:#999; }



		.left_col a { color:#fff; text-decoration: none; outline: none; }

		.left_col a:hover { color:#fff; text-decoration: underline; outline: none; }

		.left_col a:visited { color:#fff; }

		.left_col a:active { color:#fff; }





		img, a img { border-style: none; }



		h1, .h1 { font-size: 2.4em; }

		h2, .h2 { font-size: 2em; } /* 20pt */

		h3, .h3 { font-size: 1.8em; } /* 18pt */

		h4, .h4 { font-size: 1.6em; } /* 16pt */

		h5, .h5 { font-size: 1.4em; } /* 14pt */

		h6, .h6 { font-size: 1.1em; } /* 11pt */



		.small { font-size: .9em; }



		.clearer { clear:both; }



		.header {

			text-align: left;

			background: #4f0f00;

			color: #fff;

			width: 980px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.left_col {

			text-align: left;

			float: left;

			background: #007ca5;

			color: #fff;

			width: 160px;

			height: 600px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.main_col {

			text-align: left;

			float: right;

			background: #fff;

			color: #000;

			width: 800px;

			height: 600px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.footer {

			text-align: left;

			background: #eceae1;

			color: #000;

			width: 980px;

			margin: 0 0 0 0;

			border: 0;

			padding: 10px;

			overflow: hidden;

			}



		.wrapper {

			text-align: center;

			width: 1000px;

			margin-left: auto;

			margin-right: auto;

			}





	</style>



</head>

<body>



  	<div class="wrapper">



		<div class="header">



			<br />

			<h1>Header content goes here</h1>



			(980px wide + 10px padding)



			<br /><br />



		</div>





		<div class="left_col">



			<h5>Left column content goes here</h5>



			(160px wide + 10px padding)



		</div>



		<div class="main_col">



			<h2>Main content goes here</h2>

			(800px wide + 10px padding)



		</div>





		<br class="clearer" /">





		<div class="footer">



			<span class="small">

				Tiny footer content goes here

				<br />



				(980px wide + 10px padding)

			</span>



		</div>



  	</div>



</body>

</html>
]]> http://www.webmonkey.com/2010/02/blank_html_document_with_left_nav/feed/ 4 Content-Type http://www.webmonkey.com/2010/02/content-type/ http://www.webmonkey.com/2010/02/content-type/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=810

Every 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/ 1 CharSet http://www.webmonkey.com/2010/02/charset/ http://www.webmonkey.com/2010/02/charset/#comments Mon, 15 Feb 2010 20:45:47 +0000 Webmonkey Staff http://stag.wired.com/primate/?p=813

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:

English: 

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

Japanese: 

 <meta http-equiv="content-type" content="text/html; charset=shift_jis" />

Chinese: 

 <meta http-equiv="content-type" content="text/html; charset=gb18030">


]]> http://www.webmonkey.com/2010/02/charset/feed/ 1