Video Overview
A Look at the components & supporting files that are pre-loaded to our projects.
Base
Commponents that are present and activated in all repositories by default. These elements from the basic structure of the website and can then be Customised or replaced with alternatives from the Components Library as required by the project.
Header
The website header comprised of a navigation bar & a side menu for smaller screens which is added to all pages (unless otherwise specified). The element contains the colony_nav_1 nav bar and a colony_menu_1 menu components. Header is added as a Partial to layouts/partials/header.html.
Header content can be amended directly in the partial and styling can be overridden to match the destination site via CSS.
Footer
The website footer containing a logo, links, socials and some compliance information which is added to all pages (unless otherwise specified). The element contains the colony_footer_1 component. Footer is added as a Partial to layouts/partials/footer.html.
Footer content can be amended directly in the partial and styling can be overridden to match the destination site via CSS.
Optional
Components that are present but not active in all repositories by default. Activated via a configuration file in data/configComponents.json which controls the display and various other attributes of the elements. These components can also be Customised as required by the project.
All optional components are added as a Partial at layouts/partials/components.html.
Preloader
A full screen overlay that appears whilst content is loading. This element contains the colony_preloader component and accepts only 1 configuration attribute. Preloader content can be amended directly in the partial and styling can be overridden to match the destination site via CSS.
show - boolean | true displays component | false hides component.
[{
"preloader": {
"show": false
}
}]
Modal
A full screen overlay and content box that fades in to display priority messages. This element contains the colony_modal component and accepts multiple configuration attributes. Modal content can be amended directly in the partial and styling can be overridden to match the destination site via CSS.
show - boolean | true displays component | false hides component.
delay - number | delay in ms before component is shown.
repeat - boolean | true displays every page visit | false displays only once.
repeatFrequency - number | delay in days before component is shown again (if repeat = false).
If repeat is set to false the third party library JS Cookie should also be enabled to track page visits.
[{
"modal": {
"show": false,
"delay": 3000,
"repeat": true,
"repeatFrequency": 28
}
}]
Pop Up
A notification that fades in to display priority messages. This element contains the colony_popup component and accepts multiple configuration attributes. Popup content can be amended directly in the partial and styling can be overridden to match the destination site via CSS.
show - boolean | true displays component | false hides component.
position - string | left aligns left | right aligns right.
delay - number | delay in ms before component is shown.
repeat - boolean | true displays every page visit | false displays only once.
repeatFrequency - number | delay in days before component is shown again (if repeat = false).
If repeat is set to false the third party library JS Cookie should also be enabled to track page visits.
[{
"popup": {
"show": false,
"position": "right",
"delay": 3000,
"repeat": true,
"repeatFrequency": 28
}
}]
Supporting Files
In addition to the components various supporting CSS and Javascript files are also present by default in our projects. Some of these provdie the style and functionality to the pre-installed components and some support common components that are not currently installed but are regularly used.
If a supporting file is pre-loaded then it does not need to be added during Simple or Advanced Installation.
CSS
The following component CSS files are pre-loaded into all projects as standard in the location static/assets/css/components/
buttons.css fades.css features.css menus.css modals.css nav_bars.css overlays.css popups.css preloaders.css scroll_anchors.css tiles.css
Javascript
The following component Javascript files are pre-loaded into all projects as standard in the location static/assets/js/components/
forms.js menus.js modal_promo.js popup_promo.js preloaders.js