metron-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Raghu Mitra Kandikonda <>
Subject [DISCUSS] Metron GUI Syleguide
Date Wed, 01 Feb 2017 15:00:45 GMT
I would like to start a discussion around what would be a good style guide for a angular/SASS/bootstrap
based GUI for metron.

A coding styleguide (note, not a visual styleguide) is a valuable tool for teams that strives
for a degree of standardization in their code. A good styleguide, when well followed, will

-set the standard for code quality across a codebase;
-promote consistency across codebases;
-give developers a feeling of familiarity across codebases;
-increase productivity.

A lot of guidelines are already proposed by angular team in their docs which when followed
creates a good consistent code base. You can check the angular2 style guide here<>.
While the guide talks in length about anguar code(Javascript/Typescript)  it doesn't talk
about standards for html and css and hence creating the need of this doc.

There are many good style guides out there we can follow them as is or cherry pick the items
as we like. I would propose that we follow these below two guides as is.

You can look at more style guides at

While these style guides talk about general HTML/CSS we can have few more guidelines around
angular component templates and styles.
1.We can follow BEM naming conventions for all css files (
2. Keep the style of the component within the component, do not add it to the global styles
3. Prefer overwriting the styles instead of creating a new class.
Ex: if we have a global style as .btn{min-width:100px} and we want a button to have min-width
of 200px in the component style you can overwrite it as .btn{min-width:200px} instead of defining
new class like .btn-someother{min-width:200px} this will ensure that we can have a common
place to add any new attributes to buttons in the future.
4.Add all the colors and any other variables that are used in theming of the appication to
_variables.scss. This will help us to re-theme the application.
5.Use the bootstrap components and layouts as much as possible.

Raghu Mitra

  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message