Developing Your Ultimate Package
-
Upload
simon-collison -
Category
Business
-
view
115 -
download
0
description
Transcript of Developing Your Ultimate Package
Conventions
http://costumepop.com/costume-buzz/12-costume-fails-from-comic-con/
A base layer of rules and conventions that act as starting points for HTML, CSS, JavaScript and ExpressionEngine forall projects.
• Basic HTML files & naming conventions
• PHP for basic templates prior to CMS integration.
• CSS: Stylesheets, IE-specific, reset, scratch files etc.
• JavaScript: jQuery, onload triggers, transparency support
• Other Assets such as folders for images, Flash etc.
A bumper compendium of
cascading CSS files, naming
conventions, modules, plugins and
scripts that ensure any project will
stay on convention, and be simple
for anyone to step into and work
with at any time.
• Allows better collaboration within the team; the designer can jump into the developer’s code and vice-versa.
• Anyone who hasn’t even worked on a certain project can jump in and quickly solve problems because everything is on convention.
• Keeps output fresh and ensures use of best practices.
• Establishes a thoroughly connected layer of base files allowing for swift CSS and JavaScript implementation and other assets.
• Makes life easier for developers and designers... and anyone really
• Helps maintain quality control
Iteration
We’re constantly considering HTML, CSS, browsers, JavaScript, naming conventions, CMS usage and any improvements in general methods or implementations. Constant iterations of the package are made.
Version control
We’re currently on version 2.2 - and it’s available internally on our systems with a changelog, meaning anyone can use it as a starting point for both agency and personal projects.
Opening the package
RootRoot
Assets
Stylesheets
Images
JavaScript
HTML templates
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <!-- META --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="en-us" /><meta name="description" content="" /><meta name="author" content="Erskine Design" /><meta name="Copyright" content="" />
<!-- TITLE --><title>Home</title>
<!-- CSS --><link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" /><!--[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]--><!--[if IE 7]><link href="assets/css/screen-ie7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
<link href="assets/css/print.css" type="text/css" rel="stylesheet" media="print" /><link href="assets/css/mobile.css" type="text/css" rel="stylesheet" media="handheld" />
<!-- JS --><script type="text/javascript" src="assets/js/jquery-1.3.2.js"></script><script type="text/javascript" src="assets/js/onload.js"></script><!--[if IE 6]><script type="text/javascript" src="assets/js/belatedpng-0.0.7a.js"></script><![endif]--><!--[if IE 6]><script type="text/javascript" src="assets/js/ie6.js"></script><![endif]-->
<!-- RSS -->
<!-- FAVICON --><link rel="shortcut icon" href="assets/images/site/favicon.ico" type="image/ico" />
</head>
<body>
</body>
</html>
PHP templates
<?php $section = "home"; ?><?php $body_class = "home"; ?><?php $page_title = "Home"; ?><?php include('_start.php') ?>
Hello <?php include('_end.php') ?>
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <!-- META --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="en-us" /><meta name="description" content="" /><meta name="author" content="Erskine Design" /><meta name="Copyright" content="" />
<!-- TITLE --><title><?php echo("$page_title"); ?></title>
<!-- CSS --><link href="assets/css/screen.css" type="text/css" rel="stylesheet" media="screen" />
<!-- JS --><script type="text/javascript" src="assets/js/jquery-1.3.2.js"></script><script type="text/javascript" src="assets/js/onload.js"></script>
<!-- RSS -->
<!-- FAVICON --><link rel="shortcut icon" href="assets/images/site/favicon.ico" type="image/ico" />
</head>
<body class="<?php echo("$body_class"); ?>">
_start.php (slim version)
<title><?php echo("$page_title"); ?></title>
<body class="<?php echo("$body_class"); ?>">
_start.php
</body>
</html>
_end.php
Stylesheets
CSS default
/*
[PROJECT] by ERSKINE DESIGN VERSION 1.0 CONTENTS ---------- 1.BODY 2.DEFAULT STYLING 3.HEADINGS 4.LINKS 5.IMAGES 6.LAYOUT 7.BRANDING/MASTHEAD 8.NAVIGATION 9.SITEINFO/FOOTER [etc]
*/
@import url(reset.css); /* RESET CSS */@import url(forms.css); /* FORMS CSS */@import url(scratch.css); /* SCRATCH */
/* 1.BODY---------------------------------------------------------------------- */
body { text-shadow:rgba(0,0,0,0.01) 0 0 1px; }
a.access { position:absolute; top:-9999px; left:-9999px; font-family:Verdana,sans-serif; font-size:10px; font-weight:bold; background:#eee; border:2px solid #ddd; padding:10px; }a.access:focus { display:block; top:0; left:0; color:#333; }
CSS reset
/* RESET STYLESHEET */
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, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
/* remember to define focus styles! *//*:focus { outline:0; }*/
body { line-height:1; color:black; background:white; }ol, ul { list-style:none; }
/* tables still need 'cellspacing="0"' in the markup */table { border-collapse:separate; border-spacing:0; }caption,th,td { text-align:left; font-weight:normal; }
input { vertical-align:middle; }img { display:block; }
CSS for IE6 & IE7
<!--[if IE 6]><link href="assets/css/screen-ie6.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
<!--[if IE 7]><link href="assets/css/screen-ie7.css" type="text/css" rel="stylesheet" media="screen" /><![endif]-->
Conditional comments
/*
[PROJECT] by ERSKINE DESIGN VERSION 1.0 IE6 OVERRIDE STYLES CONTENTS ---------- ------------------- */
JavaScript
jQuery
belatedPNG
ie6.js
$(document).ready(function(){ // FORMS $("input[type='button']").addClass('button'); $("input[type='checkbox']").addClass('checkbox'); $("input[type='file']").addClass('file'); $("input[type='image']").addClass('image'); $("input[type='password']").addClass('password'); $("input[type='radio']").addClass('radio'); $("input[type='submit']").addClass('submit'); $("input[type='text']").addClass('text');
// RSS ICON $("img[alt='Feed Icon']").addClass('rss_icon'); });
// BELATED PNG IMAGE FIXING DD_belatedPNG.fix('');
onload.js
$(document).ready(function(){
});
Content management
If you like the idea and general approach, you’d do worse than to build your own package.
Our package isn’t publicly available because it is ours - bespoke, custom, built especially for our purposes suiting our needs.
•http://colly.com/comments/the_process_toolbox_a_nine_part_epic/•http://erskinelabs.com/post/the-process-toolbox-part-seven-convention/
Further reading...
• Naming conventions
• HTML & XHTML
• HTML5 ?
• JavaScript
• jQuery & Libraries
• PHP
• Templating
• Wireframing
• IE6, IE7 & IE8
• Reset browser defaults
• CSS Frameworks
• Scratch files
• Mobile & Handheld
• Print stylesheets
• PNG support
• Flash and SWF
• Image folders
• Content Management
Anything else?