Basic Web Design Templates
I’ve used the following templates for web design for the past few years and have found them to be great starters for every project I’ve worked on. While nothing here at ClickNathan is in any way cookie cutter, there are chunks of basic code that any project can start from and build out as particularly necessary from there. What is presented below are some of the absolutely most useful ones I’ve created, however, note the free download near the bottom: if you’re running Panic’s Coda or Coda 2, you can import these as Clips and make your workflow even easier.
Basic HTML5 Page Setup
The following snippet makes sure I never forget to include the favicon, has built in links to a default Javascript file I use and the style sheet, plus a little extra for old Internet Explorer browsers.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" />
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="javascript.js"></script>
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
Basic Cascading Stylesheet (CSS)
With this little gem I quickly add in the basics I use for every site, including setting up new HTML5 elements like header and aside as block level elements, “border boxing” the appropriate elements for responsive web design and removing borders and outlines that cause funky behavior in some browsers (and just starting fresh in general). Then with the first “selectors” call I have, I’m just setting up a placeholder for using background images on a elements and, then with the second, setting a dedicated area for border-radius. Finally, box everything off with it’s purpose: so larger layout elements will be defined in the Positioning area, then I handle all Typography related stuff in the next section, and so on.
/* CSS by Your Name ... | you@yourdomain.com */
body {text-align:center;
font: 16px/150% Helvetica,Arial,sans-serif;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
div,article,section,figure,footer,header,nav,h1,h2,h3,h4,h5,h6,p,blockquote,aside {box-sizing:border-box;}
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,font,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,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margin:0; padding:0;} {margin:0; padding:0;}
img,fieldset {border:none;}
a {outline:none;}
selectors {display:block; height:100%; text-indent:-999em;}
selectors {border-radius:5px;}
/* Positioning */
/* Typography */
/* Animations,Transitions */
/* Gradients,Shadows */
/* Forms */
/* Media Queries */
WordPress Page Editor Buttons
The following is what I use as a general starting point, and default fallback, for all of the various buttons that come with WordPress’ TinyMCE editor (ie, the bold, italics, ordered list, blockquote, etc. buttons you can use to format your post). These fall in line with my particular workflow, feel free to adjust as necessary.
.alignright {text-align:right;}
.alignleft {text-align:left;}
.aligncenter {text-align:center;}
img.aligncenter, div.aligncenter {display:block; margin:15px auto;}
img.alignright, div.alignright {float:right; margin:0 0 15px 15px;}
img.alignleft, div.alignleft {float:left; margin:0 15px 15px 0;}
#copy p.wp-caption-text {text-align:center !important; font-style:italic; margin:5px 0 !important;}
div.wp-caption img {margin:0 auto !important; display:block; float:none;}
.page_nav {height:15px; padding:10px; float:left;}
.page_nav p {width:48%; float:left;}
#content ul, #content ol {margin:15px 0 15px 35px;}
blockquote {background:url(img/bq_open.png) no-repeat; margin:15px 0; padding:0 0 0 55px; min-height:50px;}
blockquote p {background:url(img/bq_close.png) no-repeat bottom right; margin:0 !important; padding:0 55px 0 0 !important; min-height:50px; font-size:135%; line-height:150%;}
#comments {clear:both;}
#comments ol.commentlist {list-style:none; margin-left:0 !important;}
#comments blockquote {margin:0 0 15px 75px;}
.commentlist cite {display:block; text-align:right;}
.avatar {float:left; margin:5px 10px 10px 0; padding:5px;}
.commentmetadata {float:right; margin-top:-22px;}
.commentlist li {clear:both; margin-bottom:25px; padding:10px;}
.commentlist li.alt {}
.createcomments textarea {width:300px; margin-left:160px;}
.createcomments input {padding:5px; width:300px;}
.createcomments label {display:block; width:150px; text-align:right; float:left; padding:5px;}
.createcomments button {margin-left:370px;}
.gallery {float:left; clear:both; margin:15px auto;}
.gallery-item {float:left; margin:5px;}
.gallery div {display:none;}
Basic Javascript
JS is always the most variable of things I’ll need to do with a site, and often requires particularly indepth customization…however the following is almost always my default starter file. It creates three simple functions that allow me to hide, show or add hide/show toggle functionality to create “CSS popup windows”, also known as modals or pop-overs. Then I add in the code for Prefix Free to eliminate my need for all of those annoying -moz, -webkit, etc. CSS3 prefixes and call it a day until the day comes calling for more customization.
//Hide / Show Divs
function hidediv(d) { document.getElementById(d).style.display = "none"; }
function showdiv(d) { document.getElementById(d).style.display = "block"; }
//CSS/Javascript popup windows
function toggleLayer( whichLayer )
{
var elem, vis;
if( document.getElementById ) // this is the way the standards work
elem = document.getElementById( whichLayer );
else if( document.all ) // this is the way old msie versions work
elem = document.all[whichLayer];
else if( document.layers ) // this is the way nn4 works
elem = document.layers[whichLayer];
vis = elem.style;
// if the style.display value is blank we try to figure it out here
if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}
/** prefix free
* StyleFix 1.0.3 & PrefixFree 1.0.7
* @author Lea Verou
* MIT license
*/(function(){function t(e,t){return[].slice.call((t||document).querySelectorAll(e))}if(!window.addEventListener)return;var e=window.StyleFix={link:function(t){try{if(t.rel!=="stylesheet"||t.hasAttribute("data-noprefix"))return}catch(n){return}var r=t.href||t.getAttribute("data-href"),i=r.replace(/[^\/]+$/,""),s=t.parentNode,o=new XMLHttpRequest,u;o.onreadystatechange=function(){o.readyState===4&&u()};u=function(){var n=o.responseText;if(n&&t.parentNode&&(!o.status||o.status<400||o.status>600)){n=e.fix(n,!0,t);if(i){n=n.replace(/url\(\s*?((?:"|')?)(.+?)\1\s*?\)/gi,function(e,t,n){return/^([a-z]{3,10}:|\/|#)/i.test(n)?e:'url("'+i+n+'")'});var r=i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1");n=n.replace(RegExp("\\b(behavior:\\s*?url\\('?\"?)"+r,"gi"),"$1")}var u=document.createElement("style");u.textContent=n;u.media=t.media;u.disabled=t.disabled;u.setAttribute("data-href",t.getAttribute("href"));s.insertBefore(u,t);s.removeChild(t);u.media=t.media}};try{o.open("GET",r);o.send(null)}catch(n){if(typeof XDomainRequest!="undefined"){o=new XDomainRequest;o.onerror=o.onprogress=function(){};o.onload=u;o.open("GET",r);o.send(null)}}t.setAttribute("data-inprogress","")},styleElement:function(t){if(t.hasAttribute("data-noprefix"))return;var n=t.disabled;t.textContent=e.fix(t.textContent,!0,t);t.disabled=n},styleAttribute:function(t){var n=t.getAttribute("style");n=e.fix(n,!1,t);t.setAttribute("style",n)},process:function(){t('link[rel="stylesheet"]:not([data-inprogress])').forEach(StyleFix.link);t("style").forEach(StyleFix.styleElement);t("[style]").forEach(StyleFix.styleAttribute)},register:function(t,n){(e.fixers=e.fixers||[]).splice(n===undefined?e.fixers.length:n,0,t)},fix:function(t,n,r){for(var i=0;i-1&&(e=e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(e,t,n,r){return t+(n||"")+"linear-gradient("+(90-r)+"deg"}));e=t("functions","(\\s|:|,)","\\s*\\(","$1"+s+"$2(",e);e=t("keywords","(\\s|:)","(\\s|;|\\}|$)","$1"+s+"$2$3",e);e=t("properties","(^|\\{|\\s|;)","\\s*:","$1"+s+"$2:",e);if(n.properties.length){var o=RegExp("\\b("+n.properties.join("|")+")(?!:)","gi");e=t("valueProperties","\\b",":(.+?);",function(e){return e.replace(o,s+"$1")},e)}if(r){e=t("selectors","","\\b",n.prefixSelector,e);e=t("atrules","@","\\b","@"+s+"$1",e)}e=e.replace(RegExp("-"+s,"g"),"-");e=e.replace(/-\*-(?=[a-z]+)/gi,n.prefix);return e},property:function(e){return(n.properties.indexOf(e)?n.prefix:"")+e},value:function(e,r){e=t("functions","(^|\\s|,)","\\s*\\(","$1"+n.prefix+"$2(",e);e=t("keywords","(^|\\s)","(\\s|$)","$1"+n.prefix+"$2$3",e);return e},prefixSelector:function(e){return e.replace(/^:{1,2}/,function(e){return e+n.prefix})},prefixProperty:function(e,t){var r=n.prefix+e;return t?StyleFix.camelCase(r):r}};(function(){var e={},t=[],r={},i=getComputedStyle(document.documentElement,null),s=document.createElement("div").style,o=function(n){if(n.charAt(0)==="-"){t.push(n);var r=n.split("-"),i=r[1];e[i]=++e[i]||1;while(r.length>3){r.pop();var s=r.join("-");u(s)&&t.indexOf(s)===-1&&t.push(s)}}},u=function(e){return StyleFix.camelCase(e)in s};if(i.length>0)for(var a=0;a
That gives you an idea of what some of the more basic stuff you'll find in the download below contains, but there's loads more in there, including multiple sliders I've found to be very useful, Mason.ry, Javascript tricks to make divs clickable, an entire basic WordPress theme, a ton of WP functions.php snippets, dummy content (including for testing WordPress default theme buttons), and even code for Mobile and Social web development.
Enjoy!