metron-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Raghu Mitra Kandikonda <r...@hortonworks.com>
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.

ANGULAR:
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<https://angular.io/docs/ts/latest/guide/style-guide.html>.
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.

HTML & CSS:
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.

https://google.github.io/styleguide/htmlcssguide.xml
https://github.com/airbnb/css

You can look at more style guides at http://styleguides.io/

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 (https://css-tricks.com/bem-101/)
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.


-Regards,
Raghu Mitra

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