In order for us to easily understand eachothers code when working in a team and for quality assurance of our products we build these coding guidelines, which we recommend to be followed by all of our programmers.

Please consider these examples: mts-website-examples.zip - some of them are referenced in the following text.

• Divide main layout css/less and blocks css/less like explained in the description of the example file.
• Use single line styles which you break after 80-120 chars, so that they remain readable without horizontal scrolling.
• Use combined class names for blocks consisting of module name and module view name (like “menu menu‐header”)
• *Do not* use CaMelCaSe in class names. <div class=“productDescription”> is not acceptable, please use “product-description” or “description” instead. Please try to avoid underscores.
• Do not use Ids other than the main ids (see example files), use only classes for blocks and elements within. Blocks may be later inserted multiple times on the same page within the section.
• Use classes only if you need them (nav class=“nav_menu” is redundant)
• Encode special Characters in the HTML. Validate Your HTML on http://validator.w3.org.
• Use single line styles (not multiline and single line mixed) and use proper spacing (like space before and after curly brackets)
• Divide the blocks css and comment it (see example css files of Step 3). Always differentiate the block in css with comment.
• Closing a <div>-tag with class or id in the html must be commented with <! ‐‐.classname/#id‐‐ > (see example files), to see where a block ends. Other comments in HTML are not required.
• Use combined class names for blocks consisting of module name and module view name (like “menu menu-header” not “menuhead” or “headmenu”), do not use classes which indicate the layout (like top_left, top_right, lefter, formleft, button_yellow…) and use only english names (not “buchen”, “cerca”).
• Please use proper Indentation in the HTML (2 spaces)
• Please use Google Webfonts, not the smiley hack:

  <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />

• Do not put text in the HTML which is all uppercase or all lowercase. Texts are dynamic and will be replaced by data from the database - use CSS instead: text-transform:uppercase; or text-transform:lowercase;
• Please use JQuery UI where applicable.
• You can use forms in blocks to wrap form elements, just not within the “editor” block.
• .editor block and all other blocks must be independent from each other. if you delete the css/less for one block, the others must keep their layout.
• .editor‐blocks may contain only <h1>‐<h6>, <p>, <strong>, <em>, <hr />, <br />, <img>, <ul>, <ol>, <li>, <table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <blockquote>, <span> (only in rare cases, use <em> or <strong> instead of <span> wherever possible, <span> is not editable well with the editor-component we use in our cms (TinyMCE))
• do not use inline styles.
• all elements within .editor-blocks should use less classes than possible (but they are allowed if really needed, for example if you need to differently styled <ul>). We have to create a new style in the cms manually for each class you use within the .editor-block.
• A “block” is the child of a “section”. You can use another <div><div>-pair within the section, to use the full width, or a single <div>, if you don't need vertical positioning. If you need full width just for some blocks within a section, use the double-div-method within each block of that section, and let the section be 100% wide.

Example for blocks within sections which are 100% wide. The blocks themself are centered and use a fixed width. This may or may not be applicable for your project.

<footer>
  <div class="partner partner-­footer">
    <div><div>
       ... partner logos
    </div></div>
  </div><!­­.partner­-footer­­>
  <div class="menu menu­-footer">
    <div><div>
      ... menu items
    </div></div>
  </div><!­­.menu­-footer­­>
</footer>

(Please see the example files provided (step-1-1.html))

• We provide you with a template for the sections and blocks. Please use these module and view names.
• do not refer to a block in css/less with only it's class name. Always prefix with the element and use the last class name: not .menu-sidebar { }, but div.menu-sidebar { }.
• the “editor” is a special block class. it's css is used in the backend and the frontend. In the backend, the class name like “.editor-content” is attached to the body of the editor, not to a div. Use “div.editor-content” (with the elements name) only if you need to style the container in the frontend. For all other stylings, like paragraphs, lists, etc., use “.editor-content p”, “.editor-content ul”, etc.
• do not refer to a block in dependance to it's module name. not “.menu.menu-sidebar { }” but “div.menu-sidebar { }”
• do not refer to a block in dependance of it's section. No “header nav” or “header div.menu”. <header> is a section, thus it can only be styled in “layout.css”. Do not refer to blocks in “layout.css”, only to sections or the body itself.
• always put the element's name before the class. Not “.discountbtn” but “div.discountbtn”. This is much easier to read and debug.
• do not use double classes at all, no “.editor.editor-content”, just “div.editor-content”
• use the appropriate elements. Not “div.title” when it is a heading, use “h1”..“h6”.
• you can define a css block for the module (e.g. div.menu { }) to set styles, which affect all different views of the block (div.menu-sidebar, div.menu-header …). A common example is, that you don't want list style on all menus, then you can write something like:

    div.menu ul { list-­style:none; }
    ... (other div.menu styles) ...
    div.menu-­header li { display:inline-­block; ... }
    ... (other div.menu­-header styles) ...
    div.menu­-sidebar li { display:block; ... }
    ... (other div.menu­-sidebar styles) ...

• set the default font-family and size on the body-tag in layout.css.
• define the default styles for headings in layout.css. This way you don't have to write every time the font-family within every blocks css, but only the differences from the default style. eg.

h1, h2, h3, h4, h5, h6 { font­family: "Open Sans", sans­serif; font­weight: 400; font­
size: 30px; color: #585858; margin­bottom: 0.5em; }
h2 { font­size: 18px; color: #c00518; }
h3 { ....