-
Notifications
You must be signed in to change notification settings - Fork 0
Design: Conventions
These are a set of instructions that will define your final design. If followed carefully we can accomplish a high level of collaboration, as we'll be developing the same way and hopefully come to a state where we can complete each other's work.
Contents
1 Basic Structure 2 Common Stylesheet 3 Naming Technique 3.1 Naming Styles 3.2 Naming Directories & Files
Each template will be an "XHTML Traditional" by default. This assures the XHTML directives are followed and when not available (in older browsers) it will fall back to traditional HTML 4 parsing. The title should contain the website title and a selection of keywords, preferably related to the content of the page. Character encoding should be in UTF-8 format. All stylesheets and JavaScript files should be placed in the
section (and none in the ). If the design requires a fixed width for the page this will be defined in a "container" div. A sample of the previous looks something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Website Name - {keywords}</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" />
</head>
<body>
<div id="container">
...
</div>
</body>
</html>
There is a generic stylesheet attached to this page that outlines the main parts of any stylesheet and inserts some default styling that will help you be more productive by focusing on the specifics of each template.
Click here to download visit the repo (common.css)
Establishing a naming standard for the CSS styles and even asset files is important to keep the consistency among designs - this makes editing by other developers or even updating in the long term easier.
First, let's list the main parts of any web page:
- The outer div containing all the code is called container
- The top part is called header
- The left sidebar is called left
- The main area is called content
- The right sidebar is called right
- The bottom part of the page is called footer
Inside each these main parts is other markup with different ids and/or classes. Remember to assign a id to a style that is particular to one object and a class to generic styles, usually used more than once in the page.
Common ids, classes, styles in every stylesheet are the following:
- id="logo", the top left image that clicks to the homepage
- id="menu", almost always the left side menu
- class="clear", a class to clear the float both sides of the parent block element.
The same consistency should be preserved between the style names and the directory structure. Further information is mentioned below.
The main technique we use is called dash-spacing. Basically, it's replacing the spaces in a multi-word name or phrase with dashes. This allows us to apply different kinds of structuring in the names:
HTML Ancestry - Dashes imply forward direction, and may be used to define an element's ancestry. This let's us visualize the structure of the markup just by reading the CSS file.
#content { ... }
#content-title { ... }
etc.
Element Variation - We define a "base class" to hold all the similar rules, and then add variations to specify the style differences, while avoiding overriding similar generic class names. For example:
.box { ... }
.box-top10 { ... }
etc.
Namespaces - If a block of content needs to be differentiated from the rest of the code, especially if it's generated from a javaScript or has a particular (snippet-like) role in the page, then we can assign all styles within that block with the same first name. This allows you to create class names that are both standard and unique across markups of similar structure, as illustrated:
.scroller-wrapper { ... }
.scroller-image { ... }
etc.
Other more specific directions follow:
When a structure is generic, that is when it can be used in more than one section, give it a generic name and assign it as a class, for example:
.align-left
.clear
If it is bonded to a specific section (you are only going to use it in one area) use a descriptive style name (by adding the parent name first followed by a dash and then it's actual purpose to the style) and assign it as an id:
#header-toplinks
#updates-left
Do visual grouping, that means if a set of styles are applied to titles, don't hesitate to define them as
h3#first-title
h3#second-title
h3#third-title
This gives a better description about the style's purpose and separates them from the rest of the generic classes, providing a visual way to organize your styles.
All styles should have letters or dashes. No underscores or numbers.
In general it would be good if all the web assets follow the same logic as in the style naming.
If you have a "header" div and inside it a "topbar" div, you should create a "header" folder in the "img" directory and inside it a "topbar" folder. That keeps the assets organized and you know exactly where to find each image. Underscores on filenames, dashes on folder names - identical to the style names relative to them. Folder Grouping - As a general rule if an element has enough images to become noticeable then a new folder with it's name is created under the folder of it's most close available parent. This affects how the assets of that group are named. If an object folder is not available, assets contain the name of the object they are applied to:
container_back.jpg
button_find.gif
title_welcome.gif
If on the other hand an object folder is available then it's simply:
container/back.jpg
button/find.gif
titles/welcome.gif
Once we agree in naming things a certain way, stick to it. For example let's define the background image by the name "back". That means that every background file will always have the wording "back" in it's name that will differentiate it from the rest and describe it's role. Beyond that, using variations like "bg", "bkimg", "background" can become confusing.
Go on reading more specific web designing tips.