Living Style Guide

The web application is built with Ruby On Rails 4. The frontend makes use of the following techniques: Foundation 5 (Frontend Framework), SASS (Syntactically Awesome Style Sheets), HAML (HTML abstraction markup language) and Compass (CSS Authoring Framework).

The *.scss files are organized in modules. They are located in the stylesheets folder inside the base and modules folders.

Base ->   colors - mixins - resets - typography

Modules ->   button - desk - flash-messages - footer - form - header - layout

There are only some simple rules for coding:

Only style classes! - Don't style html elements! - Don't style #ids! - Avoid cascading!

The maximum level of cascading styles is one. The elements of a module are separated by -- from the module name like e.g. layout--header. Sub-elements are separated by a dash e.g. layout--header-logo and layout--header-login

Modifiers should belong to a module class and be named with a 'is-' or 'has-' prefix like is-on for the form--features class.

This style guide was built with the Living Style Guide gem by Nico Hagenburger.

Colors

General:

Fonts:

Buttons:

Select for desk features:

Error handling:

Typography

Fonts

The deco font for headlines is JAF Facit.

The quick fox jumps over the lazy dog
.font-deco{:style => "font-size:33px"} The quick fox jumps over the lazy dog

The font for the whole page is 'Helvetica Neue', Helvetica, Helvetica, Arial, sans-serif.

The quick fox jumps over the lazy dog
%div{:style => "font-size:36px"} The quick fox jumps over the lazy dog

Font sizes

Big text:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

Small text:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

Normal text

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

Big text with deco font:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!&/()$=@;:,.

A standard link with color on hover.

Lorem ipsum
%a.std-link{:href => '#'}
  Lorem ipsum

A colored link with underline on hover.

Dolor sit amet
%a.styled-link{:href => '#'}
  Dolor sit amet

A big link with underline on hover.

Sed Do Eiusmod
%a.big-link{:href => '#'}
  Sed Do Eiusmod

Forms

Standard input field:

The standard input fields come with a right aligned label. The class for the row is form--row, for the label form--label and for the field form--field. The label must also have the classes right and inline.

.form--row
  .form--label
    %label.right.inline
      the label
  .form--field
    %input{:type=>"text"}

A row with a display only field inside a form

some info text
.form--row
  .form--label
    %label.right.inline
      the label
  .form--field-display
    some info text

Selects

A select follows the same rules as the standard input field.

.form--row
  .form--label
    %label.right.inline
      the label
  .form--field
    %select
      %option{selected: "selected"} Option 1
      %option Option 2

Input field for zip and city:

The zip and city fields are in one single row with the class form--city-zip-row. The form fields have the following classes: form--zip-field and form--city-field.

.form--row
  .form--label
    %label.right.inline
      Zip, City
  .form--field
    .form--city-zip-row
      .form--zip-field
        %input{:type=>"text"}
      .form--city-field
        %input{:type=>"text"}

Input field for price and currency:

The row with the daily, weekkly or monthly prices and the currency has the class form--field-price.

.form--row
  .form--label
    %label.right.inline
      Price per desk/ per day
  .form--field.form--field-price
    %input{type: "text"}
    %label.inline
      week
    %input{type: "text"}
    %label.inline
      month
    %input{type: "text"}
    %select
      %option{selected: "selected", value: "0"} EUR Euro
      %option{value: "1"} USD US Dollar

Checkboxes for desk features:

The features of a desk can be selected by checkboxes. The li elements of a ul with the class form--features contain all the features. A selected feature will have the class is-on.

.form--row
  .form--label
    %label.right.inline
      Features of your space
  .form--field
    %ul.form--features
      %li.is-on
        %label
          Feature on
        %input{:type=>"checkbox"}
      %li
        %label
          Feature off
        %input{:type=>"checkbox"}

Checkbox for "it's" free

For form rows without a leading label there is a class form--field-no-label.

.form--row
  .form--field-no-label
    .form--its-free
      %input{type: "checkbox", value: "1"}
      %label
        YAY - it's free!

Submit button

The submit button is right aligned. There is the class form--field-no-label to fill in the space on the left side. The submit button must have the classes button-big andright.

.form--row
  .form--field-no-label
    %input.button-big.right{:type=>"submit"}

Errors

In case of errors the div with the class field_with_errors and the ul inside the div form--field-error will be generated by the framework. It is possible to have more than one error message for a field. Each of these messages will have its own row.

  • first error message
  • second error message
.form--row
  .form--label
    %label.right.inline
      the label
  .form--field
    .field_with_errors
      %input{:type=>"text"}
  .form--field-error
    %ul
      %li
        first error message
      %li
        second error message

Buttons

Button elements

Buttons can be <div> or <a> elements:

haml style syntax:

a div as button
a link as button
.button-colored
  a div as button

%a.button-colored
  a link as button

html style syntax:

a div as button
a link as button
<div class="button-colored">
  a div as button
</div>

<a class="button-colored" href="">
  a link as button
</a>

Button Types

There are four types of buttons: button-colored, button-dark, button-light and button-big:

a colored button
a dark button
a light button
a big button
.button-colored
  a colored button

.button-dark
  a dark button

.button-light
  a light button

.button-big
  a big button

Layout

The layout module is just a module like any other. According to the layout rules from Scalable and Modular Architecture for CSS this module holds only the major components of the page. The minor components such as form, header or desk are located in the specialized modules.

In general, the classes of this module only use the Foundation grid mixins like e.g. grid-row() and grid-column() to create rows and columns with semantic markup.

Example:

.layout--header {
  @include grid-row();

  .layout--header-logo {
    @include grid-column(4);
  }
  .layout--header-login {
    @include grid-column(8);
  }
}
.layout--header
  .layout--header-logo
    The logo
  .layout--header-login
    The login stuff

Home Page

The home page consists of several rows:

Top area

The header layout--header-main shows the background image of the whole header area.

.layout--header{:style => 'background-color:#9DAABB'}
  .layout--header-inner
    .layout--header-main{:style => 'height:167px'}

The header has three columns for the logo, the login info (if a user is logged in), and the login buttons.

.layout--header{:style => 'background-color:#9DAABB'}
  .layout--header-inner
    .layout--header-main
      .layout--header-home-link{:style => 'background-color:#c8d9ef;height:167px'}
      .layout--header-current-user-info{:style => 'background-color:#adc4e0;height:167px'}
      .layout--header--buttons{:style => 'background-color:#c8d9ef;height:167px'}

About layer

The about layer is only one row in the layout. It fades in when the about button is pressed.

.layout--about
  .layout--about-inner

Login layer

The login layer fades in when the login button is pressed. The layer has two columns. The first one holds some text and links and the second colum comes with the login form.

.layout--header-login{:style => 'height:80px;display:block'}
  .layout--header-login-text{:style => 'background-color:#c8d9ef; height:100%'}
  .layout--header-login-form{:style => 'background-color:#adc4e0; height:100%'}

Search area

The search area is only one row in the layout.

.layout--search
  .layout--search-inner

Map

The map area is only one row in the layout.

.layout--map
  .layout--map-inner

The row with the featured desks has space for two desks in the left column. On the right column there is some additional text and a button for submitting a new desk.

.layout--featured-desk{:style => 'height: 80px'}
  .layout--featured-desk-image{:style => 'background-color:#c8d9ef; height: 100%'}
  .layout--featured-desk-share{:style => 'background-color:#adc4e0; height: 100%'}

Desk list

The list of desks on the index page. The desk list holds 5 desks per row. The list is built from the block-grid element of Foundation 5. The Sass mixins are applied to the class layout--desks-list

.layout--desks
  .layout--desks-inner
    %ul.layout--desks-list{:style => 'height: 266px'}
      %li.desk--list-item{:style => 'background-color:#c8d9ef; height: 50%'}
      %li.desk--list-item{:style => 'background-color:#adc4e0; height: 50%'} 
      %li.desk--list-item{:style => 'background-color:#c8d9ef; height: 50%'}
      %li.desk--list-item{:style => 'background-color:#adc4e0; height: 50%'}
      %li.desk--list-item{:style => 'background-color:#c8d9ef; height: 50%'}
      %li.desk--list-item{:style => 'background-color:#adc4e0; height: 50%'}
      %li.desk--list-item{:style => 'background-color:#c8d9ef; height: 50%'}

Desk detail page

The desk page consists of a left column with the address and additional info. On the right column there are the optional photos of the desk.

.layout--desk{ :style => 'height: 80px'}
  .layout--desk-info{:style => 'background-color:#c8d9ef; height: 100%'}
  .layout--desk-images{:style => 'background-color:#adc4e0; height: 100%'}

Separator

A separator divides the pages. It is used on both, the index and the detail pages. It consists of a (optional) headline with the class form--header and a colored bar with the class layout--separator.

The separator for a section
Content goes here
.form--header
  The separator for a section
.layout--separator
Content goes here

The class has-logo on the form--header will display an additional logo aligned to right.

Content goes here
.form--header.has-logo
  The separator for a section with a logo
.layout--separator
Content goes here

The separator used for an image. It has no margin bottom. The class for this separator is .no-border.

.layout--separator.no-border
%img{ :src => "lsg-desk-3-l.jpg", :width => "100%"}

Home

The standard header on the index page has the buttons for the about and login layers as well as for the submit a new spotbutton``.

About
Login
Submit a desk
.layout--header--buttons{:style => "background-color:#E1E3E6; padding:5px 0"}
  #about-btn.button-dark
    About
  #login-btn.button-dark
    Login
  %a.button-light Submit a desk

About

Pressing the about button fades in a black layer with some text.

About

Desksurfing gives you the freedom to work where you want.

#header--about{:style => "display:block"}
  .header--about-headline
    About
  %p
    Desksurfing gives you the freedom to work where you want.

Login text area

The part of the login layer with the text and links.

You have a coworking desk to share but no login yet? Submit a new desk

You have not recieved the confirmation email? Resend my confirmation email

#header--login{style: "display: block;"}
  %p
    You have a coworking desk to share but no login yet?
    %a Submit a new desk
  %p
    You have not recieved the confirmation email?
    %a Resend my confirmation email

Login form area

The part of the login layer with the form for user login.

#header--login{style: "display: block;"}
  .form--login
    %form
      .form--login-field
        %label.form--login-label Email
        %input#user_email{type: "email"}
      .form--login-field
        %label.form--login-label Password
         
        %a (forgotten?)
        %input#user_password{type: "password"}/
      .form--login-submit
        .form--login-submit
          %input.button-light{type: "submit", value: "Sign in"}/

Desk

The desks appear on the index page and on the desk detail page. On the index page there are two featured desks and a list of desks.

A featured desk on the index page with a large picture and some additional info:

.layout--featured-desk
  .layout--featured-desk-image
    %ul.layout--featured-desk-list
      %li
        .layout--separator.no-border
        %a.desk--image
          %img{src: "lsg-desk-6-m.jpg", width: "361"}/
        .desk--featured-link
          %a.big-link{href: "#"} Desk 1
        .desk--featured-text
          Hamburg
          %br
          Germany

Desk Listing

The recently added desks have a special logo ("New"). For these desks a div with the class desk--list-icon-new will be rendered:

.layout--desks
  .layout--desks-inner
    %ul.layout--desks-list
      %li.desk--list-item
        .desk--list-item-container
          .layout--separator.no-border
          %a{href: "#"}
            %img.desk-list-item-image{src: "lsg-desk-1-s.jpg"}
          .desk--list-item-icon-new
          %div
            %a.std-link{href: "#"}
              Desk 1
            %br
              Hamburg - Germany
      %li.desk--list-item
        .desk--list-item-container
          .layout--separator.no-border
          %a{href: "#"}
            %img.desk-list-item-image{src: "lsg-desk-2-s.jpg"}
          %div
            %a.std-link{href: "#"}
              Desk 2
            %br
              Chattanooga - USA

Pagination

The pagination of the list of desks is handled by the kaminari gem. The styles come from a kaminari theme for the Foundation 5 framework and are not part of the applications stylesheets.

.pagination-centered
  %ul.pagination
    %li.page.current
      %a 1
    %li.page
      %a 2
    %li.page
      %a 3
    %li.page
      %a 4
    %li.page
      %a 5
    %li.page.unavailable.gap%li.page
      %a 15
    %li.page
      %a 16
    %li.page
      %a 17
    %li.next.arrow
      %a Next ›

Desk detail page

The page for a single desk consists of two parts. One with detailed information like e.g. address and other info about the desk. The other part can have up to 5 optional large photos of the desk.

The part with information about the desk:

Coworking Spot
Street 79
101 Town
Region
Country
Coworking space
Number of desks: Some
This spot is awesom. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Our features:
  • Projector
  • Peace and Quiet
  • Locker
  • 24/7
Price per desk:
day 15 EUR Euro
week 90 EUR Euro
month 270 EUR Euro
.row{style: "width:303px"}
  .layout--separator
  .font-deco Coworking Spot
  .desk--block
    .desk--address-ln Street 79
    .desk--address-ln 101 Town
    .desk--address-ln Region
    .desk--address-ln Country
  .desk--block
    .desk--contact-ln
    .desk--contact-ln
      %a.styled-link{href: ""} hello@spot.com
    .desk--contact-ln
      %a.styled-link{href: "", target: "_blank"} www.spot.com
  .desk--block
    Coworking space
    %br/
    Number of desks:
    Some
  .desk-map
    %img{ src: "http://maps.googleapis.com/maps/api/staticmap?center=53.547,9.99&zoom=14&size=303x200&markers=53.547,9.99&sensor=true"}/
  .desk--block This spot is awesom. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  .desk--label
    Our features:
  .desk--block
    %ul.form--features
      %li.is-on Projector
      %li.is-on Peace and Quiet
      %li.is-on Locker
      %li.is-on 24/7
  .desk--label
    Price per desk:
  .desk--block
    day
    15
    EUR Euro
    %br/
    week
    90
    EUR Euro
    %br/
    month
    270
    EUR Euro

An optional part with up to five large images of the desk.

.layout--desk-images
  .desk--top-row
  %img.desk--image{src: "lsg-desk-6-l.jpg"}
  %img.desk--image{src: "lsg-desk-5-l.jpg"}

The footer contains short texts and links. The content is centered inside the footer div:

.footer
  Lorem ipsum.
  %a.styled-link{href: "#"} Link to something
  %a.styled-link{href: "#"} another link
  %a.styled-link{href: "#"} more links

Made by ...