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>](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffowd-workshop-pres-090916201614-phpapp02%2f75%2fDeveloping-Your-Ultimate-Package-21-2048.jpg&f=jpg&w=240)
![/* [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]*/](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffowd-workshop-pres-090916201614-phpapp02%2f75%2fDeveloping-Your-Ultimate-Package-29-2048.jpg&f=jpg&w=240)
![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]-->](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffowd-workshop-pres-090916201614-phpapp02%2f75%2fDeveloping-Your-Ultimate-Package-35-2048.jpg&f=jpg&w=240)
![/* [PROJECT] by ERSKINE DESIGN VERSION 1.0 IE6 OVERRIDE STYLES CONTENTS ---------- -------------------*/](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffowd-workshop-pres-090916201614-phpapp02%2f75%2fDeveloping-Your-Ultimate-Package-36-2048.jpg&f=jpg&w=240)
![$(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('');](/image.pl?url=https%3a%2f%2fimage.slidesharecdn.com%2ffowd-workshop-pres-090916201614-phpapp02%2f75%2fDeveloping-Your-Ultimate-Package-41-2048.jpg&f=jpg&w=240)
Uploaded bySimon Collison
9,698 views
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.
Recommended
![Organizing & Simplifying CSS [with Sass]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2forganizingcss-100527235847-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Developing Your Ultimate Package
- 3.
- 4.
- 5.A base layerof rules andconventions that act as startingpoints for HTML, CSS, JavaScriptand ExpressionEngine forall projects.
- 6.•Basic HTML files & naming conventions• PHP for basic templates prior to CMS integration.• CSS: Stylesheets, IE-specific, reset, scratch files etc.• #"https://www.slideshare.net/slideshow/developing-your-ultimate-package/2009317#7">A bumper compendiumofcascading CSS files, namingconventions, modules, plugins andscripts that ensure any project willstay on convention, and be simplefor anyone to step into and workwith 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 consideringHTML,CSS, browsers, JavaScript,naming conventions, CMS usageand any improvements in generalmethods or implementations.Constant iterations of thepackage are made.
- 11.
- 12.We’re currently onversion 2.2 - and it’savailable internally on our systemswith a changelog, meaning anyone canuse it as a starting point for bothagency 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 andgeneral approach, you’d doworse than to build your ownpackage.
- 47.Our package isn’tpubliclyavailable because it is ours -bespoke, custom, built especiallyfor 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?