Show last authors
1 {{box cssClass="floatinginfobox" title="**Contents**"}}
2 {{toc/}}
3 {{/box}}
4
5 This document covers some basic conventions that are used in XWiki codebase. Please read over this document and make sure your code conforms to the rules here.
6
7 = HTML =
8
9 The following rules must be followed:
10
11 * The HTML output produced by XWiki pages must be valid HTML 5.
12
13 == WCAG ==
14
15 The XWiki project is also following the [[W3C WCAG Guidelines>>http://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines]]. In addition we're also following the [[Dutch Web Guidelines>>http://www.webrichtlijnen.nl/english/guidelines]] which are even stricter than the WCAG ones.
16
17 The following WCAG-related rules must be followed (in addition to the ones automatically enforced by the [[XWiki's WCAG Tests>>Community.WCAGTesting]]):
18 * Icon fonts must have a ##role="img"## attribute (see [[//Providing a Semantically Identified Icon Font with role=img//>>https://www.w3.org/WAI/GL/wiki/Providing_a_Semantically_Identified_Icon_Font_with_role%3Dimg]]). For example:(((
19 {{code language="html"}}
20 xwiki.iconset.render.wiki = {{html clean="false"}}<span class="fa fa-$icon" role="img"></span>{{/html}}
21 {{/code}}
22 )))
23
24 = CSS =
25
26 The following rules must be followed:
27
28 * the CSS must be valid conform [[CSS 2.1 specification>>http://www.w3.org/TR/CSS21/]]. This can be tested using the [[W3C CSS Validator>>http://jigsaw.w3.org/css-validator/]]
29 * don't use ##!important## declarations
30 * don't use inline style declarations
31 * don't hard code colors in properties - use [[ColorTheme variables>>extensions:Extension.Color Theme Application||anchor="HUsingColorThemesvariables"]]
32 * test your code on at least 3 browsers (IE, FF, Safari)
33
34 The following recommendations could be followed:
35
36 * Properties:
37 ** alphabetical order
38 ** 2 spaces indentation
39 ** put a space between selector and declaration start, ex. "##a {}##"
40 ** use of CSS shorthands
41 ** use relative sizes (em, %) instead of fixed ones (px)
42 ** use appropriate CSS files for writing IE rules
43 *** limit as much as possible the number of IE hacks used
44 * Organization:
45 ** comment headers for separation and grouping of different parts of the code
46 * Overwriting:
47 ** document the localization of the overwrite using "Overwrites" and "Should be in" comments
48
49 == Comments ==
50
51 **Short comments** (less then 120 characters):
52
53 {{code language="css"}}
54 /* This is a short comment. */
55 {{/code}}
56
57 **Long comments**:
58
59 {{code language="css"}}
60 /* This is a very long comment that wraps
61 on multiple lines ...
62 and so on. */
63 {{/code}}
64
65 **Sectionning**:
66
67 This style should be used to declare sub-sections on a CSS file.
68
69 {{code language="css"}}
70 /**
71 * Section title.
72 */
73 {{/code}}
74
75 == Issues ==
76
77 * We currently don't have a naming convention
78
79 == Tools ==
80
81 * [[Firebug>>http://getfirebug.com/]]
82 * [[CSS Optimizer>>http://www.cssoptimiser.com/]] and [[CSS Compressor>>http://www.csscompressor.com/]] are two excellent online tools that can shrink CSS
83
84 = Testing =
85
86 See the [[Community.Testing]].

Get Connected