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/03/18 15:38] admin |
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. | ||
| Line 53: | Line 54: | ||
| * Please use JQuery UI and JQuery Tools where applicable. Don't use other libraries like Motools, Dojo, etc., please only JQuery. | * Please use JQuery UI and JQuery Tools where applicable. Don't use other libraries like Motools, Dojo, etc., please only JQuery. | ||
| + | * Javascript should be coded modular like the blocks themselves. | ||
| + | * It is important to end lines with semicolon not just newlines since the javascript code will we compressed with JSMin when in production. | ||
| + | * **Naming the JS-files**\\ If for example we have the module "menu" with the views "menu-sidebar" and "menu-header", you can name one javascript file "menu.js", which will be used in any case when either "menu-sidebar" or "menu-header" are on the page (but that's rather unusual, since js-code for the views in most cases differ). Most of the time you name the js-files like the views of the module, "menu-sidebar.js" and the other "menu-header.js", distinct files for any of the views. Later the c-mts frontend will pick one or both of these js-files when the view of the module is on the page.\\ Inside these files you refer to just this block, defining a variable for the element, and then giving it any selector you use in the closure as parameter, to limit them to that block, like:\\ <code javascript> | ||
| + | //menu-sidebar.js | ||
| + | | ||
| + | $(function() { | ||
| + | var b = $('.menu-sidebar'); | ||
| + | $('li.active', b).each( | ||
| + | .... | ||
| + | }); | ||
| + | </code> | ||
| + | | ||
| + | * Code efficiently. [[http://www.punkchip.com/2010/12/javascript-efficiency/|Please follow rules 1-4 in this article]]. We don't use CDN hosted files to guarantee the availability of the libraries. | ||
| + | * To start you can put these js-files in one single folder. Later you will then distribute the files to the according module folders. | ||
| + | * You may use any jQuery-validation plugin you like, for the balloons we suggest to use the tooltip-plugin from bootstrap (just that one module, please don't put the whole bootstrap code in the project). | ||
| - | = You may also review the markup of our other sites - you will see they are all coded pretty much the same way. Please see = | + | **You may also review the markup of our other sites - you will see they are all coded pretty much the same way. Please see ** |
| * http://www.dreilaendertour.com/ | * http://www.dreilaendertour.com/ | ||
| * http://www.marinaaltaprueba.com | * http://www.marinaaltaprueba.com | ||
