Component Structure | COLONY Components

Video Overview

A look at the types of components available and their standard structure.

Component Types

The following component types are currently available within the Components Library.

Layouts

Structural components that control the layout and positioning of other items such as sections, grid and containers. These elements are the foundation layer of COLONY websites providing a consistent appearance on all screen sizes. Layouts can be used as a wrapper to house other components and in some instances can be nested within each other to create more complex arrangements.

Atoms

Small discrete components providing a single purpose such as a links, images, buttons or inputs. These elements assit with the speed of build by replacing repetitive code writing with a click and paste alternative. Atoms also commonly include the standard COLONY markup for consistency and are used as the building blocks for more complex components.

Molecules

Made of multiple atoms or more complex markup with a distinct purpose such as cards, carousels, accordions or tabs. These elements appear visually complete and often come with a custom css file to control their appearance. Molecules can be added individually or grouped with layouts to create your own custom components.

Organisms

Complete website sections often composed of multiple Molecules & Layouts such as a hero section, contact page or blog grid. These elements are fully responsive & ready use with only minimal configuration or they can be more heavily customised to create a unique page. Also often used to add functionality to an existing site quickly.

Code Snippets

Comming soon, self-contained Javascript or Go snippets to provide additional functionality or speed up development.

Fundamentals

Components are all developed according to the same principles. Using COLONY Framework as a base, utilising the spacing variables where possible but avoiding shorthand classes to keep most styling self-contained in their accompanying CSS files. They are minimal in appearance (usually monochrome) to allow for simple matching to the destination sites theme.

Components are designed to be customisable with a unqiue indentifying class and a consistent internal structure for easy CSS targeting. They can also be nested or combined with each other to create more complex arrangements.

Structure

To support customisation all components have a consistent internal structure. This allows for easy identification of the various elements and their purpose. The following example shows a standard structure of a component.

<div class="colony_card colony_card_1">
    <div class="head">
        <img src="https://via.placeholder.com/800x450" alt="" class="w100">
    </div>
    <div class="body">
        <div class="title">Card Title Goes Here</div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <button class="btn-1">Button 1</button>
        </div>
    </div>
</div>

Component Class

Each component is wrapped in an div with a unique Component Class that can be used to target the element via CSS. The Component Class is pre-fixed with colony_ to avoid infringing on any existing items on the site. In the example above this class is colony_card_1.

Category Class

Many components are also wrapped in a Category Class that can be used to target groups of similar elements via CSS. The Category Class is pre-fixed with colony_ to avoid infringing on any existing items on the site. In the example above this class is colony_card.

Internal Classes

The classes inside components are simplistic with simple and literal naming. Internal classes such as title, head body or content amoung others are often shared by many components and can be targeted with CSS by combining them with the Component Class or Category Class.

Supporting Files

In addition to their HTML components may also have supporting CSS, Javascript or JSON files. These are stored in dedicated sub-folders within the Static Folder. The are then linked to the project either via an @import statement in style.css (for CSS) or via a script link added to scripts.html (for Javascript).

For more detail see Simple Installation and Advanced Installation.