Design Lunatic » Miscellaneous

HTML Starter Template

Design Lunatic — Thu, 19 Jan 2012 23:16:41 +0000

Whenever we designers start a new HTML/CSS project, we have to create a new HTML file, open it, and write in some basic code to get started. Next, we create a reference to a stylesheet. We then have to open up the stylesheet and type in a basic CSS reset. Today, I’ll share with you my personal starter template.

Download Files

Here’s the HTML:




	
	

	TITLE OF THE PROJECT HERE

There’s an HTML5 doctype declaration, some basic meta tags, a title element, and a reference to a CSS file. This code is a great time saver.

CSS:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */

::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }


/* ========================================
   Links
   ======================================*/

a:hover, a:active { outline: 0; }

/*=========================================
	Main Styles
=========================================*/
body {
font-family: arial;
font-size: 15px;
line-height: 25px;
color: #515151;
}

This CSS includes Eric Meyer’s CSS reset, styles the highlight color to be pink, gives links some simple styles, and makes the text on the page 15px Arial with 25px line height. Of course, if you don’t like Arial, or don’t like this particular font size, you can always customize this starter template and make your own. This is meant to be customized to your own needs.

If you have any questions or comments, feel free to post them below!

“End” Classes in Grid Systems and How To Get Rid Of Them

Design Lunatic — Sun, 18 Sep 2011 03:03:06 +0000

In my opinion, grid systems are great. They provide an easy way to get started with your next project, and can simplify the developing process behind a site by a lot. However, there are some problems associated with them. Most of them are subject for a seperate post, but today, we’ll go over one of the big ones: the required classes that signify the first and last elements in a row of elements. The “first” and “last” classes, or the “start” and “end” classes.

Now, let me explain what the “end” class is for. In most grid systems released nowadays, each “grid” element has a margin-right. The value of that margin-right is the width of the gutter, which is the space between two elements beside each other. For this example, let’s say 20. Now, if each grid element has a margin-right of 20, what would happen to the last element in a row such as this one?


	
		A box with a width of 300 and a margin-right of 20.
	
	
		A box with a width of 300 and a margin-right of 20.
	
	
		A box with a width of 300 and a margin-right of 20.

If the “grid_12″ class has a width of 940, there wouldn’t be enough space for all three elements. 320×3 is 960. The 20px margin-right of the last box pushes it onto the next line.

It’s generally pretty annoying to have to add an “end” class to your last element. Today, I’ll show you how to get rid of this nusiance.

First off, here’s some sample CSS that illustrates the problem. We’ll then improve this CSS to make it work without the “end” class.

.grid_12 {
	width: 940px;
}

.grid_4 {
	width: 300px;
	margin-right: 20px;
}

.end {
	margin-right: none;
}

As you can see, the “end” class gets rid of the margin-right of the last box so that it doesn’t go onto the next line. Here’s a better way to do this:

.grid_12 {
	width: 940px;
}

.grid_4 {
	width: 300px;
	margin-right: 10px;
	margin-left: 10px;
}

This way, we don’t need the “end” class. Each grid element has a margin-left of 10 and a margin-right of 10. Now, here’s how this works: the first element in a row is 10px away from the next box, to its right. However, the next box has a margin-left of 10px as well. The two 10px margins add up to 20px, which results in the 2 boxes being 20px away from each other, the way it was originally intended.

This technique is used in my new grid system, BluCSS.

Important HTML5 Elements and How You Should Use Them

Design Lunatic — Wed, 14 Sep 2011 04:02:24 +0000

I’m sure all of you know about HTML5, the new HTML spec. One of the main things is the introduction of some semantic elements. With HTML4 (or any previous HTML), divs were usually used to hold content. With HTML5, you can make your site more SEO-friendly as well as easier to code and to style. Today, we’ll go over the new HTML5 elements specifically made to help with semantics.

Section

A section is a slightly more specific version of a div element. Divs should still be used as container elements, but sections are for specific parts of a page. For example, with a tabbed content box, a section element could be used for each tabbed page. Sections could likewise be used to organize content in a sidebar. If you have a one-page website, sections are your friend. A section for the contact area, a section for the info area…you get the drift.

Nav

The nav element, surprisingly enough, is used for navigation. It isn’t restricted to the nav bar on your site; it can be used for any group of links. You could even have a nav element inside your post, if you link to your external sources. Basically, it is used to group a set of links.

Article

This element is used to hold an independent composition. In other words, it could be used for a forum post, a comment, or a post. This one is a must-have if you’re going to create an HTML5 wordpress theme.

Aside

The aside element is used to hold content that is related to another block on the page. For example, you could use the aside element to define a word in a blog post. The content of the aside element is related to the blog post, but not quite enough to actually be inside it. The aside element can also be used as a main site sidebar, because the content in the sidebar is related to the content of the rest of the page.

Header

The header element is used to encompass the title and top part of the page. An example usage would be to wrap the navigation bar and logo on a site. Of course, the nav element would still be used for the navigation.

Footer

The footer is used to hold the content at the bottom of a page. It could also be used at the bottom of an article to contain information about the article. For example, you could use it to hold the author bio, and links to related posts.

Conclusion

HTML5 is still in development, but you should start to use it now, because it brings many added benefits compared to HTML4. Semantics, simplicity of use, the new DOCTYPE that’s super easy to memorize…HTML5.

BluCSS

Design Lunatic — Mon, 29 Aug 2011 03:30:15 +0000

Well, I’m releasing an amazing new grid system today. It’s based on what I call the “rubber layout” system. There are 4 different layout types, and each one is optimized for different displays. There are also some starter styles. Check out the project page for more info.

BluCSS

Lake Tahoe

Design Lunatic — Thu, 07 Jul 2011 06:09:19 +0000

Today I was at Lake Tahoe,which is the reason I don’t have a full post today. I will post some of the best pictures soon. Update: here they are!