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.

Responsive

Use mixins for resonsive behavior:

.some-class
key: value
@include up-to(pads-wide)
key: value
@include up-to(pads)
key: value
@include up-to(phones-wide)
key: value
@include up-to(phones)
key: value
@include down-to(pads-wide)
key: value
@include down-to(pads)
key: value
@include down-to(phones-wide)
key: value
@include down-to(phones)
key: value
@include only(pads-wide)
key: value
@include only(pads)
key: value
@include only(phones-wide)
key: value
@include only(phones)
key: value

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.