Design Lunatic » Snippets https://www.designlunatic.com Just another WordPress site Tue, 12 Nov 2013 17:22:29 +0000 en-US hourly 1 http://wordpress.org/?v=3.6.1 HTML Starter Template https://www.designlunatic.com/2012/01/html-starter-template/ https://www.designlunatic.com/2012/01/html-starter-template/#comments Thu, 19 Jan 2012 23:16:41 +0000 Design Lunatic http://www.designlunatic.com/?p=952 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:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>TITLE OF THE PROJECT HERE</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="style.css">
</head>
<body>



</body>
</html>

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!

]]> https://www.designlunatic.com/2012/01/html-starter-template/feed/ 4