• All projects follow a strict folder and file structure, so please be sure to follow these guidelines for all projects in which platform allows.
  • A core UI folder should sit in the root of your project which hosts all files associated with the user interface of the project. This allows for easier re-development in the future.
  • All files and folders should be UpperCamelCased. This adheres to the same naming convention set out by the back-end developers and the .NET framework.
  • Any files or folders which are abbreviations, should be UPPERCASED. e.g. CSS.
  • The UI folder should consist of the following sub-folders, with files appropriately placed;
    • CSS
    • Images
    • JavaScript
    • Sass
    • Styleguide
  • When beginning a new project, to ensure consistency and that these guidelines are adhered to, download Creative Jar's boilerplate from Github.
.
├── UI
|   ├── Dist
|   |   ├── CSS
|   |   ├── Images
|   |   ├── JavaScript
|   |   └── Styleguide
|   ├── SRC
|   |   ├── CSS
|   |   ├── Images
|   |   ├── JavaScript
|   |   ├── Sass
├── Uploads
|   ├── Images
|   └── PDF

CSS & Sass

  • All CSS and Sass files related to the project's user interface should sit in their respective folders.
  • For more information on how these should be structure, see the CSS section of our guidelines.

Images

  • All images related to the project's user interface should sit within the Images folder.
  • Categorisation of images in sub-folders is encouraged. e.g Icons.
  • Any content based images should sit within the Uploads folder, as this is likely to be where clients upload their content images also.
  • Where images in the UI folder should be UpperCamelCased, images in the Uploads folder should be lowercased and hyphenated for increased readability and SEO purposes e.g. creative-jar-logo.png
.
├── UI
|   ├── SRC
|   |   ├── Images
|   |   |   ├── HeaderBg.png
|   |   |   └── Icons
├── Uploads
|   ├── Images
|   |   └── creative-jar-logo.png

JavaScript

  • All JavaScript related to the project's user interface should sit within the JavaScript folder.
  • JavaScript related to the globally to the project should sit within a main JavaScript file named Global.js
  • Components of JavaScript should sit within a Component folder. These files should follow the same naming convention as the relevant CSS.
  • JavaScript files which have been downloaded such as jQuery or relevant plugins should sit within a Vendor folder.
  • The use of Require.js is strongly encouraged for the loading and dependency management of JavaScript files.
.
├── UI
|   ├── SRC
|   |   ├── JavaScript
|   |   |   ├── Components
|   |   |   |   ├── Navigation.js
|   |   |   |   └── Tabs.js
|   |   |   ├── Vendor
|   |   |   |   └── jquery-1.11.2.min.js
|   |   |   ├── Global.js
|   |   |   └── Product.js

Styleguide

  • All files related to the project's styleguide
  • Styleguides should be generated using Hologram
  • Utilise Creative Jar's boilerplate for all relevant files and for a base template for you to customise for a client's project.