Downloaded 447 times
![<!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>](https://image.slidesharecdn.com/fowd-workshop-pres-090916201614-phpapp02/85/Developing-Your-Ultimate-Package-21-320.jpg)
![/*
[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]
*/](https://image.slidesharecdn.com/fowd-workshop-pres-090916201614-phpapp02/85/Developing-Your-Ultimate-Package-29-320.jpg)
![Conditional comments
<!--[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]-->](https://image.slidesharecdn.com/fowd-workshop-pres-090916201614-phpapp02/85/Developing-Your-Ultimate-Package-35-320.jpg)
![/*
[PROJECT] by ERSKINE DESIGN
VERSION 1.0
IE6 OVERRIDE STYLES
CONTENTS ----------
-------------------
*/](https://image.slidesharecdn.com/fowd-workshop-pres-090916201614-phpapp02/85/Developing-Your-Ultimate-Package-36-320.jpg)
![$(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('');](https://image.slidesharecdn.com/fowd-workshop-pres-090916201614-phpapp02/85/Developing-Your-Ultimate-Package-41-320.jpg)
Uploaded bySimon Collison
Developing Your Ultimate Package
The document outlines a set of rules and conventions for HTML, CSS, JavaScript, and ExpressionEngine to streamline project development. It emphasizes the importance of consistency in naming conventions, file organization, and collaborative practices, allowing team members to easily navigate and maintain projects. The package is proprietary, reflecting customizations that suit the specific needs of the organization, with ongoing version control and iterations for improvements.
More Related Content
Similar to Developing Your Ultimate Package
![Organizing & Simplifying CSS [with Sass]](https://cdn.slidesharecdn.com/ss_thumbnails/organizingcss-100527235847-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Developing Your Ultimate Package
- 3.
- 4.
- 5. A base layerof rules and conventions that act as starting points for HTML, CSS, JavaScript and ExpressionEngine for all projects.
- 6. • 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.
- 7. A bumper compendiumof 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.
- 8. • Allows bettercollaboration 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
- 9.
- 10. 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.
- 11.
- 12. We’re currently onversion 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.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. <!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>
- 22.
- 23. index.php <?php $section = "home"; ?> <?php $body_class = "home"; ?> <?php $page_title = "Home"; ?> <?php include('_start.php') ?> Hello <?php include('_end.php') ?>
- 24. _start.php (slim version) <!DOCTYPEhtml 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"); ?>">
- 25. _start.php <title><?php echo("$page_title"); ?></title> <bodyclass="<?php echo("$body_class"); ?>">
- 26. _end.php </body> </html>
- 27.
- 28.
- 29. /* [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] */
- 30. @import url(reset.css); /*RESET CSS */ @import url(forms.css); /* FORMS CSS */ @import url(scratch.css); /* SCRATCH */
- 31. /* 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; }
- 32.
- 33. /* 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; }
- 34. CSS for IE6& IE7
- 35. Conditional comments <!--[if IE6]><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]-->
- 36. /* [PROJECT] by ERSKINE DESIGN VERSION 1.0 IE6 OVERRIDE STYLES CONTENTS ---------- ------------------- */
- 37.
- 38.
- 39.
- 40.
- 41. $(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('');
- 42.
- 43.
- 44.
- 46. If you likethe idea and general approach, you’d do worse than to build your own package.
- 47. Our package isn’tpublicly available because it is ours - bespoke, custom, built especially for our purposes suiting our needs.
- 48.
- 50. • Naming conventions • Reset browser defaults • HTML & XHTML • CSS Frameworks • HTML5 ? • Scratch files • JavaScript • Mobile & Handheld • jQuery & Libraries • Print stylesheets • PHP • PNG support • Templating • Flash and SWF • Wireframing • Image folders • IE6, IE7 & IE8 • Content Management Anything else?