SlideShare a Scribd company logo
1 of 51
Download to read offline
Developing Your Ultimate Package
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 for
all 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.
Developing Your Ultimate Package
Opening the package
Root
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
index.php


<?php   $section = "home"; ?>
<?php   $body_class = "home"; ?>
<?php   $page_title = "Home"; ?>
<?php   include('_start.php') ?>

    Hello

<?php include('_end.php') ?>
_start.php (slim version)

<!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




<title><?php echo("$page_title"); ?></title>



<body class="<?php echo("$body_class"); ?>">
_end.php


  </body>

  </html>
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
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]-->
/*


    [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
Developing Your Ultimate Package
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.
Further reading...




•http://colly.com/comments/the_process_toolbox_a_nine_part_epic/
•http://erskinelabs.com/post/the-process-toolbox-part-seven-convention/
Developing Your Ultimate Package
•   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?
Developing Your Ultimate Package

More Related Content

What's hot

WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structurekeithdevon
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationRachel Cherry
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern librariesRuss Weakley
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Hajas Tamás
 
Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Don Cranford
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Designmlincol2
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSNaga Harish M
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentEstelle Weyl
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSSTodd Anglin
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By PalashPalashBajpai
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2Josh Lee
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build themDick Olsson
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development BasicsTahir Shahzad
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bagstuplum
 

What's hot (20)

WordPress Theme Structure
WordPress Theme StructureWordPress Theme Structure
WordPress Theme Structure
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011Drupal Theme Development - DrupalCon Chicago 2011
Drupal Theme Development - DrupalCon Chicago 2011
 
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. FoundationBattle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
 
CSS pattern libraries
CSS pattern librariesCSS pattern libraries
CSS pattern libraries
 
Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)Future-proof styling in Drupal (8)
Future-proof styling in Drupal (8)
 
Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5Creating Custom Templates for Joomla! 2.5
Creating Custom Templates for Joomla! 2.5
 
The web context
The web contextThe web context
The web context
 
Intermediate Web Design
Intermediate Web DesignIntermediate Web Design
Intermediate Web Design
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone developmentiPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
iPhone Web Applications: HTML5, CSS3 & dev tips for iPhone development
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
WordPress Theme Development: Part 2
WordPress Theme Development: Part 2WordPress Theme Development: Part 2
WordPress Theme Development: Part 2
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
 
新 · 交互
新 · 交互新 · 交互
新 · 交互
 
Html5 Brown Bag
Html5 Brown BagHtml5 Brown Bag
Html5 Brown Bag
 

Viewers also liked

Technote Index Map Help
Technote Index Map HelpTechnote Index Map Help
Technote Index Map Helpguest0e7fb2
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマHideki MACHIDA
 
The Original Hacker número 11.
The Original Hacker número 11.The Original Hacker número 11.
The Original Hacker número 11.Huehue 1
 
La evolución de los medios de información
La evolución de los medios de informaciónLa evolución de los medios de información
La evolución de los medios de informaciónYolanda Santana
 
password (facebook)
password (facebook) password (facebook)
password (facebook) Mr. FM
 
concrete5 5.7でテーマ作ってみよう 超初級編
concrete5 5.7でテーマ作ってみよう超初級編concrete5 5.7でテーマ作ってみよう超初級編
concrete5 5.7でテーマ作ってみよう 超初級編Yuriko Kamimori
 
Real Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan DidakReal Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan DidakEast Bay WordPress Meetup
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkdie.agilen GmbH
 
A portrait chapter_1
A portrait chapter_1A portrait chapter_1
A portrait chapter_1mellamogaby
 
TYPO3 CMS 6.2 LTS - Die Neuerungen
TYPO3 CMS 6.2 LTS - Die NeuerungenTYPO3 CMS 6.2 LTS - Die Neuerungen
TYPO3 CMS 6.2 LTS - Die Neuerungendie.agilen GmbH
 
Sql Injection and Entity Frameworks
Sql Injection and Entity FrameworksSql Injection and Entity Frameworks
Sql Injection and Entity FrameworksRich Helton
 

Viewers also liked (20)

Livestock and Land
Livestock and LandLivestock and Land
Livestock and Land
 
Clipagem tarumã setembro 2010
Clipagem tarumã   setembro 2010Clipagem tarumã   setembro 2010
Clipagem tarumã setembro 2010
 
NASL
NASLNASL
NASL
 
cPanel User Manual
cPanel User ManualcPanel User Manual
cPanel User Manual
 
Xdebug confoo11
Xdebug confoo11Xdebug confoo11
Xdebug confoo11
 
Technote Index Map Help
Technote Index Map HelpTechnote Index Map Help
Technote Index Map Help
 
Introduction Php
Introduction PhpIntroduction Php
Introduction Php
 
C lipagem tarumã maio 2010
C lipagem tarumã   maio 2010C lipagem tarumã   maio 2010
C lipagem tarumã maio 2010
 
いちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマいちばん簡単なconcrete5テーマ
いちばん簡単なconcrete5テーマ
 
C lipagem tarumã outubro 2010
C lipagem tarumã   outubro 2010C lipagem tarumã   outubro 2010
C lipagem tarumã outubro 2010
 
The Original Hacker número 11.
The Original Hacker número 11.The Original Hacker número 11.
The Original Hacker número 11.
 
La evolución de los medios de información
La evolución de los medios de informaciónLa evolución de los medios de información
La evolución de los medios de información
 
password (facebook)
password (facebook) password (facebook)
password (facebook)
 
concrete5 5.7でテーマ作ってみよう 超初級編
concrete5 5.7でテーマ作ってみよう超初級編concrete5 5.7でテーマ作ってみよう超初級編
concrete5 5.7でテーマ作ってみよう 超初級編
 
Real Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan DidakReal Developer Tools for WordPress by Stefan Didak
Real Developer Tools for WordPress by Stefan Didak
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
 
A portrait chapter_1
A portrait chapter_1A portrait chapter_1
A portrait chapter_1
 
Google Dorks
Google DorksGoogle Dorks
Google Dorks
 
TYPO3 CMS 6.2 LTS - Die Neuerungen
TYPO3 CMS 6.2 LTS - Die NeuerungenTYPO3 CMS 6.2 LTS - Die Neuerungen
TYPO3 CMS 6.2 LTS - Die Neuerungen
 
Sql Injection and Entity Frameworks
Sql Injection and Entity FrameworksSql Injection and Entity Frameworks
Sql Injection and Entity Frameworks
 

Similar to Developing Your Ultimate Package

HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 BoilerplateMichael Enslow
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010alanburke
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...SPTechCon
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Aslam Najeebdeen
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012crokitta
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrMichael Enslow
 
3 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 202101053 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 20210105John Picasso
 
crtical points for customizing Joomla templates
crtical points for customizing Joomla templatescrtical points for customizing Joomla templates
crtical points for customizing Joomla templatesamit das
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCRGaurav Mishra
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceAdam Norwood
 

Similar to Developing Your Ultimate Package (20)

HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010HTML 5 Drupalcamp Ireland Dublin 2010
HTML 5 Drupalcamp Ireland Dublin 2010
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
Web Design Bootcamp - Day1
Web Design Bootcamp - Day1Web Design Bootcamp - Day1
Web Design Bootcamp - Day1
 
Nuxt.JS Introdruction
Nuxt.JS IntrodructionNuxt.JS Introdruction
Nuxt.JS Introdruction
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Html5
Html5Html5
Html5
 
Apex & jQuery Mobile
Apex & jQuery MobileApex & jQuery Mobile
Apex & jQuery Mobile
 
3 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 202101053 coding101 fewd_lesson3_your_first_website 20210105
3 coding101 fewd_lesson3_your_first_website 20210105
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
crtical points for customizing Joomla templates
crtical points for customizing Joomla templatescrtical points for customizing Joomla templates
crtical points for customizing Joomla templates
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
Responsive design
Responsive designResponsive design
Responsive design
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
Create a landing page
Create a landing pageCreate a landing page
Create a landing page
 
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCRDrupal7 Theming session on the occassion of  Drupal7 release party in Delhi NCR
Drupal7 Theming session on the occassion of Drupal7 release party in Delhi NCR
 
Going on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web PerformanceGoing on an HTTP Diet: Front-End Web Performance
Going on an HTTP Diet: Front-End Web Performance
 

More from Simon Collison

A Dialect of Our Own Design
A Dialect of Our Own DesignA Dialect of Our Own Design
A Dialect of Our Own DesignSimon Collison
 
Elegance Without Compromise
Elegance Without CompromiseElegance Without Compromise
Elegance Without CompromiseSimon Collison
 
EE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet RevolutionEE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet RevolutionSimon Collison
 
Nailing Your Own Projects
Nailing Your Own ProjectsNailing Your Own Projects
Nailing Your Own ProjectsSimon Collison
 
High Noon Shoot Out - Design
High Noon Shoot Out - DesignHigh Noon Shoot Out - Design
High Noon Shoot Out - DesignSimon Collison
 
The Business Of Web Design
The Business Of Web DesignThe Business Of Web Design
The Business Of Web DesignSimon Collison
 

More from Simon Collison (15)

Old Dog, New Tricks
Old Dog, New TricksOld Dog, New Tricks
Old Dog, New Tricks
 
Notes from the Edge
Notes from the EdgeNotes from the Edge
Notes from the Edge
 
A Dialect of Our Own Design
A Dialect of Our Own DesignA Dialect of Our Own Design
A Dialect of Our Own Design
 
Elegance Without Compromise
Elegance Without CompromiseElegance Without Compromise
Elegance Without Compromise
 
Adaptive Systems
Adaptive SystemsAdaptive Systems
Adaptive Systems
 
Project management
Project managementProject management
Project management
 
Subconscious Design
Subconscious DesignSubconscious Design
Subconscious Design
 
Design To Communicate
Design To CommunicateDesign To Communicate
Design To Communicate
 
The Pursuit of Magic
The Pursuit of MagicThe Pursuit of Magic
The Pursuit of Magic
 
EE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet RevolutionEE: Five Years Of Quiet Revolution
EE: Five Years Of Quiet Revolution
 
Nailing Your Own Projects
Nailing Your Own ProjectsNailing Your Own Projects
Nailing Your Own Projects
 
The Process Toolbox
The Process ToolboxThe Process Toolbox
The Process Toolbox
 
High Noon Shoot Out - Design
High Noon Shoot Out - DesignHigh Noon Shoot Out - Design
High Noon Shoot Out - Design
 
The Business Of Web Design
The Business Of Web DesignThe Business Of Web Design
The Business Of Web Design
 
Knowing Your Audience
Knowing Your AudienceKnowing Your Audience
Knowing Your Audience
 

Recently uploaded

Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsP&CO
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examplesamberjiles31
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.ukaroemirsr
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGlokeshwarmaha
 
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdfTalent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdfCharles Cotter, PhD
 
To Create Your Own Wig Online To Create Your Own Wig Online
To Create Your Own Wig Online  To Create Your Own Wig OnlineTo Create Your Own Wig Online  To Create Your Own Wig Online
To Create Your Own Wig Online To Create Your Own Wig Onlinelng ths
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
Project Brief & Information Architecture Report
Project Brief & Information Architecture ReportProject Brief & Information Architecture Report
Project Brief & Information Architecture Reportamberjiles31
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxWorkforce Group
 
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptxHELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptxHelene Heckrotte
 
Data skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsData skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsyasinnathani
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..dlewis191
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.mcshagufta46
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023Steve Rader
 
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBBPMedia1
 
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfPDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfHajeJanKamps
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access
 
Mihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZMihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZKanakChauhan5
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...Khaled Al Awadi
 

Recently uploaded (20)

Entrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizationsEntrepreneurship & organisations: influences and organizations
Entrepreneurship & organisations: influences and organizations
 
Intellectual Property Licensing Examples
Intellectual Property Licensing ExamplesIntellectual Property Licensing Examples
Intellectual Property Licensing Examples
 
7movierulz.uk
7movierulz.uk7movierulz.uk
7movierulz.uk
 
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISINGUNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
UNLEASHING THE POWER OF PROGRAMMATIC ADVERTISING
 
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdfTalent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
Talent Management research intelligence_13 paradigm shifts_20 March 2024.pdf
 
To Create Your Own Wig Online To Create Your Own Wig Online
To Create Your Own Wig Online  To Create Your Own Wig OnlineTo Create Your Own Wig Online  To Create Your Own Wig Online
To Create Your Own Wig Online To Create Your Own Wig Online
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
Project Brief & Information Architecture Report
Project Brief & Information Architecture ReportProject Brief & Information Architecture Report
Project Brief & Information Architecture Report
 
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptxCracking the ‘Business Process Outsourcing’ Code Main.pptx
Cracking the ‘Business Process Outsourcing’ Code Main.pptx
 
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptxHELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
HELENE HECKROTTE'S PROFESSIONAL PORTFOLIO.pptx
 
Data skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story pointsData skills for Agile Teams- Killing story points
Data skills for Agile Teams- Killing story points
 
Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..Team B Mind Map for Organizational Chg..
Team B Mind Map for Organizational Chg..
 
A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.A flour, rice and Suji company in Jhang.
A flour, rice and Suji company in Jhang.
 
Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024Borderless Access - Global Panel book-unlock 2024
Borderless Access - Global Panel book-unlock 2024
 
NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023NASA CoCEI Scaling Strategy - November 2023
NASA CoCEI Scaling Strategy - November 2023
 
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John MeulemansBCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
BCE24 | Virtual Brand Ambassadors: Making Brands Personal - John Meulemans
 
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdfPDT 89 - $1.4M - Seed - Plantee Innovations.pdf
PDT 89 - $1.4M - Seed - Plantee Innovations.pdf
 
Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024Borderless Access - Global B2B Panel book-unlock 2024
Borderless Access - Global B2B Panel book-unlock 2024
 
Mihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZMihir Menda - Member of Supervisory Board at RMZ
Mihir Menda - Member of Supervisory Board at RMZ
 
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...NewBase  25 March  2024  Energy News issue - 1710 by Khaled Al Awadi_compress...
NewBase 25 March 2024 Energy News issue - 1710 by Khaled Al Awadi_compress...
 

Developing Your Ultimate Package

  • 5. A base layer of 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 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.
  • 8. • 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
  • 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.
  • 12. 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.
  • 15. Root
  • 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>
  • 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) <!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"); ?>">
  • 25. _start.php <title><?php echo("$page_title"); ?></title> <body class="<?php echo("$body_class"); ?>">
  • 26. _end.php </body> </html>
  • 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; }
  • 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 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]-->
  • 36. /* [PROJECT] by ERSKINE DESIGN VERSION 1.0 IE6 OVERRIDE STYLES CONTENTS ---------- ------------------- */
  • 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('');
  • 46. If you like the idea and general approach, you’d do worse than to build your own package.
  • 47. Our package isn’t publicly available because it is ours - bespoke, custom, built especially for our purposes suiting our needs.
  • 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?