Clean design

All products that comes from MCL follow strict standards regarding quality. We can talk about frontend HTML code for some module, or about entire custom made website for client, principles are the same.
Here they are:


Webpages or applications created according to a widely accepted coding style are easier to be maintained. Validation, as any process of debugging code, is sometimes difficult, and the vast improvements in automatic error correction has made modern browser cope very well with errors in HTML or CSS. That fact makes validation seem useless to many people, and they ask themselves: "My site looks right and works fine - isn't that enough?", or "Lots of websites out there don't validate" or even "Validation stifles creativity and make websites looks boring"...

In practice, different browsers can and do display the same page differently. This doesn't imply any kind of browser bug, this is just how things works. There is a good term used for this: WYSINWOG - What You See Is Not What Others Get (unless by coincidence). Sometimes the mistakes will have no bearing on how the page renders, but some of them certainly will, and validated code is certain to outlive non-validated code.

Keeping CSS and JavaScript external

Keeping CSS files separate allow future pages to link them and use the same code, so changing and managing the design on multiple pages is easy.

Naming conventions

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

In large, complex projects, how you organize your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do. This is important for us since we are working as team, and high performance is essential.

We have adopted the BEM standard for our products. BEM is an abbreviation of the key elements of the methodology - Block, Element and Modifier. In short, BEM syntax is: block--modifier-value. Here is example of CSS class name:

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
.button--state-success {
	color: #FFF;
	border-color: #4A993E;
.button--state-danger {
	color: #800;

Less is more - we are keeping only necessary divs

During the early, learning stages of web design, people learn how to wrap element in a div so that they can apply styling and create reference for CSS. This usually leads to a proliferation of the div element and to their being used far too liberally and in unnecessary places.

This is a common problem in webdesign, There is even a term divitis, referring to the overuse of divs in HTML markup. Following principles of minimalist web design, we are trying to reduce a design to only the most essential elements.


Indentation itself has no bearing on page rendering, but it has a big effect on the code readability. We are following Joomla coding standard and in our code we apply four spaces at the time, without tabs or mixing tabs and spaces for indentation. This is not only for php code, but for HTML, Javascript and other languages as well. We are trying to be consistent, because nicely indented markup goes a long way in code beautifying and making it easy to read and jump around in.