Web Design Guidelines Check 'n Go eCommerce Team

Date: April 2014

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:

               \\chqnas03\EBG\Design\Shared-Assets\Designer-Assets\Resources\Templates\Basic Project Folder Structure
             

   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:

   logo-checkngo.png

   JavaScript:

   Use camelCase style:

   Example:

   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
            */
          

---