Root folders

The project structure is based on Middleman. You can see the following folder in the root and this is what their function is:

Build

This folder contains the static pages that are deployed on http://ggw-prototype.goalgorilla.com. You should not work in this folder.

Data

This folder contains all data, stored in .yml files. This is convenient when we want to reuse template files and run them with different sets of data.

Source

This is our working folder. It contains all our template files, CSS, Javascript, images, fonts and navigation. When executing middleman, this folder is being watched and it triggers LiveReload upon changes.

CSS folders

Within Middleman there is no active compilation from SCSS to CSS files. Middleman watches changes in this folder which is reflected in the browser by LiveReload. When making a build, the scss files are converted to css files. In the css folder we see there are several folders with files. This is the order they are included:

1 Vars (variables)

Variables are reusable values which take care of style consistency and allow for easy changing of patterns. Variables only live in SCSS files (not in CSS) and the files do not contain CSS selectors

2 Abstractions

Abstractions are reusable pieces of CSS, often called Mixins as well. With abstractions we can avoid repeating selectors throughout the CSS. Just like variables this folder never contains any CSS selectors.

3 Layout

Here we specify the responsive grid in which we positioning all components and modules.

4 Base

Base styles define the default look for HTML. These rules will generally be made up of element selectors for HTML elements such as headings, paragraphs and lists.

5 Components

Components are elements that are used across the site and are not limited to a specific block, section or page. So components must not be specified with parent wrappers.

6 Modules

Modules are specific blocks, pages and sections on the site. These styles are usually not exchangable with other modules and/or pages.

7 Styleguide

There are some styles needed for the styleguide only, which will not be used on Greenwire itself. We list these styles here, so we can easily extract them from the production build.

Javascript

Here we store all the javascript files which will be compiled and minified. There are several folders for the reason of controlling the order of loading and to separate their origin.

Contrib

These are scripts from third parties that we do not change ourselves. It is possible to update these scripts.

Custom

These scripts we have created ourselves and also contain the execution of contrib scripts.

Oldie

These scripts are only parsed in old versions of internet explorer, usually to polyfill HTML5 or CSS3.

Libraries

This folder contains libraries that are maintained by third parties and might be updated regularly. We update the libraries folder using Bower. Including the files in our project is done via middleman sprockets (eg. "//= require "modernizr.2.8.2.custom.js"). You do not have to specify the path to this folder, Middleman will search in the libraries folder by default.

Images

Images that are used for the site, such as CSS background images (use sprites!), map markers and illustration images.

Font

In this folder we store the font-icons.

Documentation - Design elements - UI components - Prototype

In this folder we store all template files. Middleman provides access to many templating languages to simplify your HTML development. The languages range from simply allowing you to use Ruby variables and loops in your pages, to providing a completely different format to write your pages in which compiles to HTML. We are mainly using a combination of HAML and Markdown. You can read more this in the editing the style guide section.

Layouts

Layouts allow the common HTML surrounding individual pages to be shared across all your templates. PHP developers will be used to the concept of "header" and "footer" includes which they reference at the top and bottom of every page. The Ruby world, and Middleman, take an inverse approach. The "layout" includes both the header and footer and then wraps the individual page content.

We have multiple layout files, for example to create seperate navigation for the style guide and the prototype.

Partials

Partials are a way of sharing content across pages to avoid duplication. They are a part of Middleman. Partials can be used in page templates and layouts. With partials we can abstract snippets like menu's to be reused across pages and even layouts. Partials should be used when you keep repeating the same markup code in templates (mostly prototype).