Project Description

The Teleflora Pattern Library is designed to be a comprehensive reference guide for Teleflora's user-interface patterns. The objective is to serve both as a visual repository and a common lexicon of Teleflora's code syntax.

The project is a simple HTML prototype written in HAML or ERB that is designed to be viewed with Serve.

Serve is an open-source rapid prototyping framework for Web applications. It makes it easy to prototype functionality without writing a single line of backend code. Serve is distributed as a Ruby gem. Once both Ruby and Serve are installed, Serve can be run in the project directory by running the command 'serve' in a command-line interface (CLI).

For more information on Serve and how to get started visit the README file in the Teleflora project repository.

Serve uses a strict file structure. Top level directories in Serve are composed of a _template-file.html.erb, _layout.erb, and an index.html.erb. Nested directories can reference the _template-file.html.erb and/or _layout.erb file. The project attempts to break sections into succinct modules.

The project also runs Guard in conjunction with Livereload. Guard is a command line tool to easily handle events on file system modifications and can be run in the Teleflora root directory by running 'guard' in a CLI.

This project uses SASS or more specifically SCSS as a CSS preprocessor. The build leverages Compass to generate (compile to) CSS. Compass is also distributed as a Ruby gem and can be easily installed from the command prompt.

Code Standards

A syntactical overview of the Teleflora's front-end code base.


The site is built mobile first. Teleflora uses a SMACSS and OOCSS style architecture. The layout is built on a fluid Variable Grid System and is composed of a 12 column responsive grid layout. The system is based on the responsive 12 column 960 Grid System. Employing the DRY (Don't Repeat Yourself) methodology styles that are continually reused are assigned their own class.


The class structure is as follows:


  • l-* classes are in the 'layout' directory

  • m-* classes are in the 'modules' directory

  • is-* interactive state classes are in their corresponding module file.


    •   <!-- container starts -->
  <div class="container_4 d-container_12">
    <div class="grid-2 d-grid_6">
      <p class="is-visible">Content...</p>
    </div>
    <div class="grid-2 d-grid_6">
      <p class="is-visible">Content...</p>
    </div>
  </div>
 <!-- container ends -->

    Code Conventions

    A list of project code conventions:


  • Spaces not tabs (2 spaces)

  • Comment opening tags, closing tags, modules, and complex functionality

  • Use universal naming conventions to allow for efficient and reusable code

  • Relative paths

  • Lists tags require a closing tag

  • Use HTML5 doctype

  • Load Javascript files at the end of the page

  • Use Modernizr.load() as a resource loader for Javascript and CSS