CSS

General principles:

• Separate look and position
• Separate CSS from HTML
• Apply namespaces to classes .widget-title not .widget .title
• Separate components and templates. A component(E.G. dialogue-box) is composed of different templates(E.G. close window icon) This separation happens on the CSS preprocessor(LESS or SASS)
• Classes without prefix are for styling and styling only - Use js- prefix if it's a js-hook.

Class naming conventions:

• For layout classes use l- prefix
• For component modifier use .{the component}--{the modifier}}
• For sub-components use .{the component}__{the sub-component}

Bootstrap

We use bootstrap as our base css, whatever you do, don't modify the bootstrap files, if you need to add a css rule, just override it with one of our own files.

Preprocessing

We use LESS for preprocessing.

CSS organization

• theme.less (determines the order of .less files loaded)
• common.less (common to all)
• colorschema.less (list of color variables)
• misc.less (all that does not fit in other categories)

Following files are targeted at specific elements :

• login.less
• navbar.less
• footer.less
• knownode-widget.less
• input-form.less
• node-edge-page.less