Homify Living Style Guide

Introduction

Before starting to work on our front end, be sure to get in touch with our coding standards:

When writing new elements you should decide if they are:

Coding Style

Some rules for writing CSS

  • Avoid cascading where possible
  • Only use classes, no IDs or tag names

Components naming conventions

For each module/component in app/assets/stylesheets/components/:

  • .module: lowercase, with dashes if needed
  • .module--sub-element: divided with two dashes (two dashes appear only once per class to separate the module and everything else)
  • .-modifier: only to be used in combination with a .module or .module--sub-element
  • Each module gets an own Sass file components/_module.sass and style guide documentation components/_module.md with examples.

Please have a look at this blog post about naming conventions.

Configuration

All Sass files within app/assets/stylesheets/config/ must not generate CSS output. Allowed:

  • @imports (only import other files that follow the same rules)
  • $variable definitions
  • @mixin definitions

Global styles

In app/assets/stylesheets/base/ only few global styles should be (re)set:

  • tagname: reset all or specific HTML tags
  • %placeholders: should be defined here
  • @font-face: importing of webfonts
  • .-global-modifier-: can be combined with any element (they usually should represent a specific state of the website)

Grid

The layout is based on different images sizes that should work well in different combinations and responsive cases.

Global modifiers

User helper classes

Those classes hide the elements they are assigned to, when the condition is not true:

<div class="-admins-">           visible for logged in admins only  </div>

<div class="-editors-"> visible for logged in editors only </div>

<div class="-user-"> visible for logged in users only </div>

<div class="-not-user-"> hidden for logged in users </div>

<div class="-professional-"> visible professionals only </div>

<div class="-not-professional-"> hidden for professionals </div>

<div class="-premium-"> visible premium users only </div>

<div class="-not-premium-"> hidden for premium users </div>

Hint: elements with -not-*- classes also show up for visitors that are not logged in.