Principles
Framework
Project should be developed using COLONY Framework as a basis. Root Variables, Containers, shorthand classes for Margins & Padding, Positioning and other Framework features should all be employed where possible.
An example walkthrough of development using Framework can be found in this Demo Build.
Components
Project should be utilise COLONY Components where possible. Common items such as Sections, Grids, Inputs, Cards, Carousels, Galleries, Forms, Footers, Overlays and more can all be found in the the Components Library. In addition there are complete website sections that can be Customised to match the theme of the destination site and Code Snippets to add functionality.
An example walkthrough of development using Components can be found in this Demo Build.
Best Practice
Project should be developed following COLONY best practice for HTML, CSS, Javascript and repository management.
Desktop First our sites are developed starting from the largest screen size before adding Responsive.
Responsive to be added to style.css at the end of the CSS block for each website section.
CSS Order style.css to be populated in order of the navigation menu then by page section order.
Variables variables for fonts, colors, spacing and other common items are always preferred to absolute values.
style.css all custom CSS to be added to style.css.
main.js all custom Javascript to be added to main.js.
Assets all assets to be stored in the relevant sub-folders within the Static folder.
A high-level look at COLONY best practice can be found below.
No Bootstrap
Our Framework & Components are not compatible with Bootstrap, as there is crossover in scope and reserved class names used in both toolkits.
Do not add Bootstrap to the project repository and always seek approval before using other third-party libraries.
