Web Design Guidelines Check 'n Go eCommerce Team

Main Objective:

Define a set of guidelines for all members of the eCommerce Team to maintain consistency and help the transition of projects from one person to another.

The considered areas in these guidelines are:

  1. Folder Structure
  2. Naming Conventions
  3. Coding Style
  4. Credits
  1. Folder Structure Top ↑

    • From the list below, use only the folders you need
    • If you find yourself constantly using a folder that’s not listed here, please consider adding it to this list (notify the update to the team)

    Basic Folder Structure:

    • root
    • /css
    • /scss
    • /images
    • /js
    • /fonts
    • /assets (pdf, zip, xls, doc, ppt)
    • /media (swf, audio, video)
    • /includes
    • /backups
      • /css
      • /scss
      • /images
      • /js
      • /fonts
      • /assets
      • /media
      • /includes
    • index.html

    A basic folder structure template can be found here:

    Notes about the Folder Structure:

    • There’s an index.html file in the root for reference. You can use this file to start your project with.
    • The subfolders in the /backup folder are not created in the folder structure template. Create them as you see fit.
    • Inside the /scss folder you'll find several partials, i.e.: _grid.scss, _mediaqueries.scss, etc….
  2. Naming ConventionsTop ↑

    CSS Selectors & File Names:

    • All lowercase
    • Separate words with dashes/hyphens
    • Be descriptive but don’t make names too long
    • Avoid the use of underlines “_”
    CSS Selector example:
    .left-nav-bar {…}
    File Name example:


    Use camelCase style:

    var navItem = $("nav li");
  3. CSS Coding StyleTop ↑

    • Try to use single line style whenever possible
    • Sometimes when writing vendor prefixed properties/values, single line style may not be the best way to go, in that case it’s Ok to use multiline
    Suggested styles for single line (notice the difference in the spacing on the brackets and colons):
    1. .main-message { width: 80%; min-height: 200px; border: #ccc 1px solid; }
    2. .main-message {width: 80%; min-height: 200px; border: #ccc 1px solid;}
    3. .main-message { width:80%; min-height:200px; border:#ccc 1px solid; }
    Multiline for vendor prefixed selectors:
    -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
  4. CreditsTop ↑

    If you'd like to display your credits in SCSS/CSS and JavaScript files created by you, you can do so by adding a comment section at the top. This will give others a reference about the date the file(s) were originally created and by whom.

    Credits in CSS file example:
    /* !CSS file for Mobile Menu and new hero image
             Date = March 2014
             Created by = Name lastName
    Notice the “!” symbol. This symbol tells your preprocessor that the comment should be kept when minifying the CSS, this way your credits are always visible even in minimized files.
    Credits in JavaScript file example:
    /* Custom scripts for Checkngo.com
             Date = March 2014
             Created by = Name lastName

Initially created by Ricardo Zea for the Web Design eCommerce Team