Code Convention
Code Convention - HTML containers
Common Containers
Class naming and container convention
Containers
.main-section - Defines outer blocks in the layout e.g header, content, sidebar, footer .main-section-inner - Inner container for main section .box-section - Container for multiple block items (OPTIONAL - only used if multiple block items can or do exist e.g banners) .box - Block item .box-skin-a - Block item style e.g background-color:#fff;padding:0.75em; (OPTIONAL) .box-inner - Inner container for box .box-title - Block item title container (OPTIONAL) .box-image - Block item image container (OPTIONAL) .box-desc - Block item decription (OPTIONAL)
General
.fck-editor-content - used on all containers where client formatted text is written out.
HTML - Example
See sorce
Multi-boxes (e.g banners)
Title - multi box
[IMG]
Text...
Title - multi box
(styled)
[IMG]
Text...
Title - multi box
[IMG]
Text...
Title - multi box
(styled)
[IMG]
Text...
Single box (e.g widget, news box)
Title - Single box
[IMG]
Text...
Title - Single box
(styled)
[IMG]
Text...
Code Convention - CSS comments
CSS comments - general formatting logic (CSS markup)
/*****************************************************************************
CSS SECTION
*****************************************************************************/
/* ==========================================================================
section level 1
========================================================================== */
/* --------------------------------------------------------------------------
section level 2
------------------------------------------------------------------------- */
/**
* section level 3
*/
---
/**
MULTIPLE LINE COMMENT / IMPORTANT COMMENT
*/
/* ONE LINE COMMENT */
CSS comments - Example of formatting logic in use (CSS markup)
/* ==========================================================================
STRUCTURE
========================================================================== */
/* ==========================================================================
HEADER (main section)
========================================================================== */
/* ==========================================================================
PRIMARY MENU (main section)
========================================================================== */
/* ==========================================================================
SEARCH ENGINE PACKAGE (main section)
========================================================================== */
/* ==========================================================================
CONTENT (main section)
========================================================================== */
/* ==========================================================================
SIDEBAR (main section)
========================================================================== */
/* ==========================================================================
SECONDARY MENU (main section)
========================================================================== */
/* ==========================================================================
LAST MINUTE BOX (main section)
========================================================================== */
/* ==========================================================================
FOOTER (main section)
========================================================================== */
/* ==========================================================================
WRAPPER BOTTOM BAR (wrap)
========================================================================== */
-------------------- STRUCTURE inside MEDIA QUERIES ------------------
/* --------------------------------------------------------------------------
STRUCTURE
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
HEADER (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
PRIMARY MENU (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
SEARCH ENGINE PACKAGE (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
CONTENT (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
SIDEBAR (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
SECONDARY MENU (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
LAST MINUTE BOX (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
FOOTER (main section)
------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
WRAPPER BOTTOM BAR (wrap)
------------------------------------------------------------------------- */
