CSS Coding Style - Revision history

Mudrd8mz: Text replacement - "`" to ""`


2021-07-15T08:26:06Z
Text replacement - "<code (.*)>" to "<syntaxhighlight lang="$1">"

				
				
				
				
				
				← Older revision
				Revision as of 08:26, 15 July 2021
				
Line 39:
Line 39:
=== Correct === === Correct ===



<code css>@media only screen and (min-width: 768px) { <syntaxhighlight lang="css">@media only screen and (min-width: 768px) {
     .selector-one,      .selector-one,
     .selector-two {      .selector-two {
Line 49:
Line 49:
=== Incorrect === === Incorrect ===



<code css>.selector_one, .selector_two { color: #fff; background-color: #000; }</syntaxhighlight> <syntaxhighlight lang="css">.selector_one, .selector_two { color: #fff; background-color: #000; }</syntaxhighlight>



== Selectors == == Selectors ==
Line 62:
Line 62:
=== Correct === === Correct ===



<code css>.selector_name { <syntaxhighlight lang="css">.selector_name {
     color: #fff;      color: #fff;
} }
Line 73:
Line 73:
=== Incorrect === === Incorrect ===



<code css>div#selName { <syntaxhighlight lang="css">div#selName {
     color: #fff;      color: #fff;
} }
Line 98:
Line 98:
=== Correct === === Correct ===



<code css>.something { <syntaxhighlight lang="css">.something {
     margin-top: 0;      margin-top: 0;
     font-size: 1.25em;      font-size: 1.25em;
Line 105:
Line 105:
=== Incorrect === === Incorrect ===



<code css>.something { <syntaxhighlight lang="css">.something {
     margin-top: 0px;      margin-top: 0px;
     font-size: 1pt;      font-size: 1pt;
Line 115:
Line 115:



A block-style comment at the top of the CSS file should explain the purpose of the rules in the file. A block-style comment at the top of the CSS file should explain the purpose of the rules in the file.
<code css> <syntaxhighlight lang="css">
/** /**
  * File base.css.   * File base.css.
Line 123:
Line 123:



Block-style comments can also be used to denote a section in a CSS file where all rules pertain to a specific component, view, or functionality: Block-style comments can also be used to denote a section in a CSS file where all rules pertain to a specific component, view, or functionality:
<code css> <syntaxhighlight lang="css">
/** /**
  * SCORM Navigation Sidebar.   * SCORM Navigation Sidebar.
Line 130:
Line 130:



Use single-line comments to provide more information to other developers about a single rule or small subset of rules: Use single-line comments to provide more information to other developers about a single rule or small subset of rules:
<code css> <syntaxhighlight lang="css">
/* Required because YUI resets add a black border to all tables */ /* Required because YUI resets add a black border to all tables */
</syntaxhighlight> </syntaxhighlight>
Line 140:
Line 140:
* The standard property should come after the vendor-prefixed property. * The standard property should come after the vendor-prefixed property.



<code css>.selector { <syntaxhighlight lang="css">.selector {
     background-color: #444; /* Fallback for browsers that don't support gradients. */      background-color: #444; /* Fallback for browsers that don't support gradients. */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444', EndColorStr='#999'); /* IE6-IE9. */      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444', EndColorStr='#999'); /* IE6-IE9. */
Line 155:
Line 155:
* Do not use any browser-specific hacks. Moodle provides a more appropriate way to write browser-specific CSS using classes that are added to the body element. For example: * Do not use any browser-specific hacks. Moodle provides a more appropriate way to write browser-specific CSS using classes that are added to the body element. For example:



<code css> <syntaxhighlight lang="css">
.ie7 .forum-post { .ie7 .forum-post {
     min-height: 1px;      min-height: 1px;
Line 184:
Line 184:
Here is an example. Here is an example.



<code css> <syntaxhighlight lang="css">
.hello-world { .hello-world {
     margin-left: 10px;      margin-left: 10px;
Line 201:
Line 201:
Will become: Will become:



<code css> <syntaxhighlight lang="css">
.hello-world { .hello-world {
     margin-right: 10px;      margin-right: 10px;
Line 240:
Line 240:
==== Correct ==== ==== Correct ====



<code css>@textColor: red; <syntaxhighlight lang="css">@textColor: red;
@wellBackground: #ccc; @wellBackground: #ccc;
@tableBackground: blue; @tableBackground: blue;
Line 248:
Line 248:
==== Incorrect ==== ==== Incorrect ====



<code css>@text-color: red; <syntaxhighlight lang="css">@text-color: red;
@wellBackground: #ccc; @wellBackground: #ccc;
@tableBackgrounColor: blue; @tableBackgrounColor: blue;
Line 261:
Line 261:
==== Correct ==== ==== Correct ====



<code css>div { <syntaxhighlight lang="css">div {
     .something {      .something {
         color: red;          color: red;
Line 275:
Line 275:
==== Incorrect ==== ==== Incorrect ====



<code css>div .something { <syntaxhighlight lang="css">div .something {
     color: red;      color: red;
} }
Line 292:
Line 292:
==== Correct ==== ==== Correct ====



<code css>.error { <syntaxhighlight lang="css">.error {
     font-size: @fontSizeSmall;      font-size: @fontSizeSmall;
     color: @errorText;      color: @errorText;
Line 304:
Line 304:
==== Incorrect ==== ==== Incorrect ====



<code css>.error { <syntaxhighlight lang="css">.error {
     font-size: 12px;      font-size: 12px;
     color: red;      color: red;



Mudrd8mz: Text replacement - "" to ""

2021-07-14T13:05:24Z
Text replacement - "<code>" to "<syntaxhighlight lang="php">"

				
				
				
				
				
				← Older revision
				Revision as of 13:05, 14 July 2021
				
Line 21:
Line 21:
== File naming == == File naming ==



Within plugins, CSS files are normally named <code>styles.css</syntaxhighlight>. Within plugins, CSS files are normally named <syntaxhighlight lang="php">styles.css</syntaxhighlight>.



In the theme, files can be named according to the theme designer's wishes but should: In the theme, files can be named according to the theme designer's wishes but should:
Line 28:
Line 28:
* be as succinct as possible * be as succinct as possible
* be descriptive * be descriptive
* be placed in the folder <code>style/</syntaxhighlight> for CSS files, or in <code>less/</syntaxhighlight> for LESS files. * be placed in the folder <syntaxhighlight lang="php">style/</syntaxhighlight> for CSS files, or in <syntaxhighlight lang="php">less/</syntaxhighlight> for LESS files.



== Blocks == == Blocks ==
Line 88:
Line 88:
* For color codes, if you use HSLA or RGBA, always provide a hex fallback. * For color codes, if you use HSLA or RGBA, always provide a hex fallback.
* Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values. * Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values.
* Do not use <code>!important</syntaxhighlight>. If there is no alternative something is wrong with the CSS you are trying to override. * Do not use <syntaxhighlight lang="php">!important</syntaxhighlight>. If there is no alternative something is wrong with the CSS you are trying to override.
* Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to. * Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to.



Line 220:
Line 220:
Or in other words: currently the comments must always precede a statement, they will not work if they are not followed by anything. Or in other words: currently the comments must always precede a statement, they will not work if they are not followed by anything.



Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <code>@extend</syntaxhighlight>, indented rules, etc... Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <syntaxhighlight lang="php">@extend</syntaxhighlight>, indented rules, etc...



=== Forcing the text direction === === Forcing the text direction ===



Whilst <code>.dir-rtl</syntaxhighlight> should not be used any more, we've added <code>.text-ltr</syntaxhighlight> which allows developers to force the direction of the text to left-to-right. This is especially needed for forms fields like: URLs, OS level Folders paths & apps, theme hex colors, English DB field names, emails, English text, numbers, regular expression patterns, symbols, code snippets or configuration samples. Whilst <syntaxhighlight lang="php">.dir-rtl</syntaxhighlight> should not be used any more, we've added <syntaxhighlight lang="php">.text-ltr</syntaxhighlight> which allows developers to force the direction of the text to left-to-right. This is especially needed for forms fields like: URLs, OS level Folders paths & apps, theme hex colors, English DB field names, emails, English text, numbers, regular expression patterns, symbols, code snippets or configuration samples.



== LESS == == LESS ==



Mudrd8mz: Text replacement - "" to ""
2021-07-14T13:02:25Z
Text replacement - "</code>" to "</syntaxhighlight>"
Show changes


Poltawski: /* Useful tools */
2016-12-14T15:36:27Z
Useful tools

				
				
				
				
				
				← Older revision
				Revision as of 15:36, 14 December 2016
				
Line 17:
Line 17:
=== Useful tools === === Useful tools ===



==== [http://stylelint.io stylelint] ==== We use [http://stylelint.io stylelint] is used to ensure conformance with our coding style; [https://github.com/morishitter/stylefmt stylefmt] can be used to automatically reformat CSS - for more details see [[Linting#CSS.2FSCSS.2FLESS_.28stylelint.29|Linting]]
Stylelint is a modern CSS linter which automated the conformity to our CSS coding style. 



== File naming == == File naming ==





Poltawski: /* Caveats */
2016-12-02T13:27:20Z
Caveats

				
				
				
				
				
				← Older revision
				Revision as of 13:27, 2 December 2016
				
Line 219:
Line 219:



It is important to note that the special comments must NOT end a file or a rule block. All comments not preceding a block, or a rule are ignored. It is important to note that the special comments must NOT end a file or a rule block. All comments not preceding a block, or a rule are ignored.
Or in other words: currently the comments must always precede a statement, they will not work if they are not followed by anything.



Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <code>@extend</code>, indented rules, etc... Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <code>@extend</code>, indented rules, etc...



Poltawski: /* Forcing the text direction */
2016-12-02T13:26:50Z
Forcing the text direction

				
				
				
				
				
				← Older revision
				Revision as of 13:26, 2 December 2016
				
Line 224:
Line 224:
=== Forcing the text direction === === Forcing the text direction ===



Whilst <code>.dir-rtl</code> should not be used any more, we've added <code>.text-ltr</code> which allows developers to force the direction of the text to left-to-right. This is especially useful for forms fields (numbers, emails, URLs must not be RTL'd), and for displaying code snippets or configuration samples. Whilst <code>.dir-rtl</code> should not be used any more, we've added <code>.text-ltr</code> which allows developers to force the direction of the text to left-to-right. This is especially needed for forms fields like: URLs, OS level Folders paths & apps, theme hex colors, English DB field names, emails, English text, numbers, regular expression patterns, symbols, code snippets or configuration samples.



== LESS == == LESS ==





Poltawski: /* Right-to-left */
2016-11-23T08:06:48Z
Right-to-left
Show changes


Poltawski: /* Incorrect */
2016-09-22T08:10:07Z
Incorrect

				
				
				
				
				
				← Older revision
				Revision as of 08:10, 22 September 2016
				
Line 108:
Line 108:
<code css>.something { <code css>.something {
     margin-top: 0px;      margin-top: 0px;
     font-size: 1.25rem;      font-size: 1pt;
}</code> }</code>






Poltawski: rem is no longer to be avoided MDL-56061
2016-09-22T08:09:42Z
rem is no longer to be avoided MDL-56061

				
				
				
				
				
				← Older revision
				Revision as of 08:09, 22 September 2016
				
Line 94:
Line 94:
== Units == == Units ==



* Prefer the usage of ''em'' over ''px''. * Allowed CSS units are px, rem, and em.
* Do not use the units ''pt'' or ''rem''. MDL-39934 
* Do not declare the unit when the value is 0. * Do not declare the unit when the value is 0.






Poltawski: Protected "CSS Coding Style": Official document only modified through bug/aggrement ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))
2016-07-29T08:45:10Z
Protected "CSS Coding Style": Official document only modified through bug/aggrement ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite))

				
				
				
				
				
				← Older revision
				Revision as of 08:45, 29 July 2016
				
(No difference)

← Older revision		Revision as of 08:26, 15 July 2021
Line 39:		Line 39:
	=== Correct ===		=== Correct ===

	<~~code~~ css>@media only screen and (min-width: 768px) {		<syntaxhighlight lang="css">@media only screen and (min-width: 768px) {
	.selector-one,		.selector-one,
	.selector-two {		.selector-two {
Line 49:		Line 49:
	=== Incorrect ===		=== Incorrect ===

	<~~code~~ css>.selector_one, .selector_two { color: #fff; background-color: #000; }</syntaxhighlight>		<syntaxhighlight lang="css">.selector_one, .selector_two { color: #fff; background-color: #000; }</syntaxhighlight>

	== Selectors ==		== Selectors ==
Line 62:		Line 62:
	=== Correct ===		=== Correct ===

	<~~code~~ css>.selector_name {		<syntaxhighlight lang="css">.selector_name {
	color: #fff;		color: #fff;
	}		}
Line 73:		Line 73:
	=== Incorrect ===		=== Incorrect ===

	<~~code~~ css>div#selName {		<syntaxhighlight lang="css">div#selName {
	color: #fff;		color: #fff;
	}		}
Line 98:		Line 98:
	=== Correct ===		=== Correct ===

	<~~code~~ css>.something {		<syntaxhighlight lang="css">.something {
	margin-top: 0;		margin-top: 0;
	font-size: 1.25em;		font-size: 1.25em;
Line 105:		Line 105:
	=== Incorrect ===		=== Incorrect ===

	<~~code~~ css>.something {		<syntaxhighlight lang="css">.something {
	margin-top: 0px;		margin-top: 0px;
	font-size: 1pt;		font-size: 1pt;
Line 115:		Line 115:

	A block-style comment at the top of the CSS file should explain the purpose of the rules in the file.		A block-style comment at the top of the CSS file should explain the purpose of the rules in the file.
	<~~code~~ css>		<syntaxhighlight lang="css">
	/**		/**
	* File base.css.		* File base.css.
Line 123:		Line 123:

	Block-style comments can also be used to denote a section in a CSS file where all rules pertain to a specific component, view, or functionality:		Block-style comments can also be used to denote a section in a CSS file where all rules pertain to a specific component, view, or functionality:
	<~~code~~ css>		<syntaxhighlight lang="css">
	/**		/**
	* SCORM Navigation Sidebar.		* SCORM Navigation Sidebar.
Line 130:		Line 130:

	Use single-line comments to provide more information to other developers about a single rule or small subset of rules:		Use single-line comments to provide more information to other developers about a single rule or small subset of rules:
	<~~code~~ css>		<syntaxhighlight lang="css">
	/* Required because YUI resets add a black border to all tables */		/* Required because YUI resets add a black border to all tables */
	</syntaxhighlight>		</syntaxhighlight>
Line 140:		Line 140:
	* The standard property should come after the vendor-prefixed property.		* The standard property should come after the vendor-prefixed property.

	<~~code~~ css>.selector {		<syntaxhighlight lang="css">.selector {
	background-color: #444; /* Fallback for browsers that don't support gradients. */		background-color: #444; /* Fallback for browsers that don't support gradients. */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444', EndColorStr='#999'); /* IE6-IE9. */		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444', EndColorStr='#999'); /* IE6-IE9. */
Line 155:		Line 155:
	* Do not use any browser-specific hacks. Moodle provides a more appropriate way to write browser-specific CSS using classes that are added to the body element. For example:		* Do not use any browser-specific hacks. Moodle provides a more appropriate way to write browser-specific CSS using classes that are added to the body element. For example:

	<~~code~~ css>		<syntaxhighlight lang="css">
	.ie7 .forum-post {		.ie7 .forum-post {
	min-height: 1px;		min-height: 1px;
Line 184:		Line 184:
	Here is an example.		Here is an example.

	<~~code~~ css>		<syntaxhighlight lang="css">
	.hello-world {		.hello-world {
	margin-left: 10px;		margin-left: 10px;
Line 201:		Line 201:
	Will become:		Will become:

	<~~code~~ css>		<syntaxhighlight lang="css">
	.hello-world {		.hello-world {
	margin-right: 10px;		margin-right: 10px;
Line 240:		Line 240:
	==== Correct ====		==== Correct ====

	<~~code~~ css>@textColor: red;		<syntaxhighlight lang="css">@textColor: red;
	@wellBackground: #ccc;		@wellBackground: #ccc;
	@tableBackground: blue;		@tableBackground: blue;
Line 248:		Line 248:
	==== Incorrect ====		==== Incorrect ====

	<~~code~~ css>@text-color: red;		<syntaxhighlight lang="css">@text-color: red;
	@wellBackground: #ccc;		@wellBackground: #ccc;
	@tableBackgrounColor: blue;		@tableBackgrounColor: blue;
Line 261:		Line 261:
	==== Correct ====		==== Correct ====

	<~~code~~ css>div {		<syntaxhighlight lang="css">div {
	.something {		.something {
	color: red;		color: red;
Line 275:		Line 275:
	==== Incorrect ====		==== Incorrect ====

	<~~code~~ css>div .something {		<syntaxhighlight lang="css">div .something {
	color: red;		color: red;
	}		}
Line 292:		Line 292:
	==== Correct ====		==== Correct ====

	<~~code~~ css>.error {		<syntaxhighlight lang="css">.error {
	font-size: @fontSizeSmall;		font-size: @fontSizeSmall;
	color: @errorText;		color: @errorText;
Line 304:		Line 304:
	==== Incorrect ====		==== Incorrect ====

	<~~code~~ css>.error {		<syntaxhighlight lang="css">.error {
	font-size: 12px;		font-size: 12px;
	color: red;		color: red;

← Older revision		Revision as of 13:05, 14 July 2021
Line 21:		Line 21:
	== File naming ==		== File naming ==

	Within plugins, CSS files are normally named <~~code~~>styles.css</syntaxhighlight>.		Within plugins, CSS files are normally named <syntaxhighlight lang="php">styles.css</syntaxhighlight>.

	In the theme, files can be named according to the theme designer's wishes but should:		In the theme, files can be named according to the theme designer's wishes but should:
Line 28:		Line 28:
	* be as succinct as possible		* be as succinct as possible
	* be descriptive		* be descriptive
	* be placed in the folder <~~code~~>style/</syntaxhighlight> for CSS files, or in <~~code~~>less/</syntaxhighlight> for LESS files.		* be placed in the folder <syntaxhighlight lang="php">style/</syntaxhighlight> for CSS files, or in <syntaxhighlight lang="php">less/</syntaxhighlight> for LESS files.

	== Blocks ==		== Blocks ==
Line 88:		Line 88:
	* For color codes, if you use HSLA or RGBA, always provide a hex fallback.		* For color codes, if you use HSLA or RGBA, always provide a hex fallback.
	* Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values.		* Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values.
	* Do not use <~~code~~>!important</syntaxhighlight>. If there is no alternative something is wrong with the CSS you are trying to override.		* Do not use <syntaxhighlight lang="php">!important</syntaxhighlight>. If there is no alternative something is wrong with the CSS you are trying to override.
	* Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to.		* Prefixed vendor-specific properties pairs should appear directly before the generic property they refer to.

Line 220:		Line 220:
	Or in other words: currently the comments must always precede a statement, they will not work if they are not followed by anything.		Or in other words: currently the comments must always precede a statement, they will not work if they are not followed by anything.

	Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <~~code~~>@extend</syntaxhighlight>, indented rules, etc...		Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <syntaxhighlight lang="php">@extend</syntaxhighlight>, indented rules, etc...

	=== Forcing the text direction ===		=== Forcing the text direction ===

	Whilst <~~code~~>.dir-rtl</syntaxhighlight> should not be used any more, we've added <~~code~~>.text-ltr</syntaxhighlight> which allows developers to force the direction of the text to left-to-right. This is especially needed for forms fields like: URLs, OS level Folders paths & apps, theme hex colors, English DB field names, emails, English text, numbers, regular expression patterns, symbols, code snippets or configuration samples.		Whilst <syntaxhighlight lang="php">.dir-rtl</syntaxhighlight> should not be used any more, we've added <syntaxhighlight lang="php">.text-ltr</syntaxhighlight> which allows developers to force the direction of the text to left-to-right. This is especially needed for forms fields like: URLs, OS level Folders paths & apps, theme hex colors, English DB field names, emails, English text, numbers, regular expression patterns, symbols, code snippets or configuration samples.

	== LESS ==		== LESS ==

← Older revision		Revision as of 15:36, 14 December 2016
Line 17:		Line 17:
	=== Useful tools ===		=== Useful tools ===

	~~====~~ [http://stylelint.io stylelint] ~~====~~		We use [http://stylelint.io stylelint] is used to ensure conformance with our coding style; [https://github.com/morishitter/stylefmt stylefmt] can be used to automatically reformat CSS - for more details see [[Linting#CSS.2FSCSS.2FLESS_.28stylelint.29\|Linting]]
	~~Stylelint~~ is ~~a modern CSS linter which automated the conformity~~ to our ~~CSS~~ coding style.

	== File naming ==		== File naming ==

← Older revision		Revision as of 13:27, 2 December 2016
Line 219:		Line 219:

	It is important to note that the special comments must NOT end a file or a rule block. All comments not preceding a block, or a rule are ignored.		It is important to note that the special comments must NOT end a file or a rule block. All comments not preceding a block, or a rule are ignored.
			Or in other words: currently the comments must always precede a statement, they will not work if they are not followed by anything.

	Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <code>@extend</code>, indented rules, etc...		Also note that comments in SCSS or LESS will often not produce the desired effect. When dealing with SCSS and LESS, ensure that your special RTL comments are attached to pure CSS statements: no <code>@extend</code>, indented rules, etc...

← Older revision		Revision as of 13:26, 2 December 2016
Line 224:		Line 224:
	=== Forcing the text direction ===		=== Forcing the text direction ===

	Whilst <code>.dir-rtl</code> should not be used any more, we've added <code>.text-ltr</code> which allows developers to force the direction of the text to left-to-right. This is especially ~~useful~~ for forms fields (numbers, ~~emails~~, ~~URLs must not be RTL'd)~~, ~~and for displaying~~ code snippets or configuration samples.		Whilst <code>.dir-rtl</code> should not be used any more, we've added <code>.text-ltr</code> which allows developers to force the direction of the text to left-to-right. This is especially needed for forms fields like: URLs, OS level Folders paths & apps, theme hex colors, English DB field names, emails, English text, numbers, regular expression patterns, symbols, code snippets or configuration samples.

	== LESS ==		== LESS ==

← Older revision		Revision as of 08:10, 22 September 2016
Line 108:		Line 108:
	<code css>.something {		<code css>.something {
	margin-top: 0px;		margin-top: 0px;
	font-size: ~~1.25rem~~;		font-size: 1pt;
	}</code>		}</code>

← Older revision		Revision as of 08:09, 22 September 2016
Line 94:		Line 94:
	== Units ==		== Units ==

	* ~~Prefer the usage of ''em'' over ''~~px~~''.~~		* Allowed CSS units are px, rem, and em.
	* Do not use the units ''pt'' or ''rem''. ~~MDL-39934~~
	* Do not declare the unit when the value is 0.		* Do not declare the unit when the value is 0.

← Older revision		Revision as of 08:45, 29 July 2016
(No difference)