User Tools
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
website_coding_guidelines [2014/04/09 11:09] 95.171.52.104 |
website_coding_guidelines [2017/08/03 12:45] (current) |
||
|---|---|---|---|
| Line 8: | Line 8: | ||
| * A "block" is the child of a "section". Use Ids only for sections (see example files) and use only classes for blocks and elements within. Blocks might be later inserted multiple times on the same page within the section. | * A "block" is the child of a "section". Use Ids only for sections (see example files) and use only classes for blocks and elements within. Blocks might be later inserted multiple times on the same page within the section. | ||
| - | * **We provide you with a template for the sections and blocks. Please use these module and view names.** Within the blocks you are free to name the blocks like you want, just keep it clean and short, and use descriptive class names. | + | * **We provide you with a template for the sections and blocks. Please use these module and view names.** Within the blocks you are free to name the blocks like you want, just keep it clean and short, and use descriptive class names, describing the content, not the layout, of course. |
| * *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 CaMelCaSe in class names. <div class="productDescription"> is not acceptable, please use "product-description" or "description" instead. Please try to avoid underscores. | ||
| * Use single line styles which you break after 80-120 chars, so that they remain readable without horizontal scrolling. | * Use single line styles which you break after 80-120 chars, so that they remain readable without horizontal scrolling. | ||
| Line 27: | Line 27: | ||
| * our frontend converts images to data-uris. for this to be successful, the url has to be wrapped into single quotes: Please do not write background:url(../images/flower.png); but background:url('../images/flower.png'), else it won't be recognised from the system. Also, in most HTML IDEs, image urls are easier to spot. | * our frontend converts images to data-uris. for this to be successful, the url has to be wrapped into single quotes: Please do not write background:url(../images/flower.png); but background:url('../images/flower.png'), else it won't be recognised from the system. Also, in most HTML IDEs, image urls are easier to spot. | ||
| * .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 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. | ||
| + | * do not use CSS-hacks. Write valid CSS. Use a class on the <HTML>-Element to refer to "ie", "ie8", "ie7" etc. - this later will be added automatically by the frontend, e.g. <html class="ie ie8"> ... | ||
| * do not use double classes at all, no ".editor.editor-content", just "div.editor-content" | * do not use double classes at all, no ".editor.editor-content", just "div.editor-content" | ||
| * please use proper spacing. A space needs to be before and after '{', after ':' and after ';'. Please no tabs. | * please use proper spacing. A space needs to be before and after '{', after ':' and after ';'. Please no tabs. | ||
