Monday 21st November 2016

Building the new Invent Partners website

When we decided to give the Invent Partners website an overhaul recently, we employed the power of our dotAdmin CMS and SASS CSS technology to give the new website a daring colour palette and allow website editors to deploy a rich selection of layout elements.

Using SASS

SASS is a CSS scripting technology which allows the developer to employ variables and functions (mixins) to create CSS stylesheets using a more structured, maintainable scripting format.

We used SASS to create style variants for the rich palette employed in the Invent Partners website design. We created classes for each colour variation of the main layout the main navs, content panels and buttons, employing SASS mixins to generate CSS for each colour variant.

Variables

To manage the colour scheme, we created a set of variables for the different colours used throughout the layout. We also set variables for fonts, font sizes, and other layout constants such as dimensions and border radiuses.

Mixins

We created mixins for page colour variations, main nav colours, content row colours, card colours and button colours. We could then create a set of modifier classes for any of these layout elements so that the site administrator could select a different colour of an element.

Using the colour variants

We created CSS classes for these colours which could be used as modifier classes on a range of elements, for example:

<div class="content-row green"> </div>

Layout elements

We created a library of layout elements which can be deployed in different combinations, allowing the website administrator to create different content elements.

content-row

Content rows can de defined using the class content-row. They can be modified with a colour class. We can also split a content-row into 50% width columns, with either side having a background image, a background colour, and text.

card

Cards can be use to present information in a grid style layout. They can be modified with a colour class.

banner-row

Header rows have a large background image and a text area with white text and a semi-opaque background, ensuring readability of the headings.

Some examples

Below are some examples of this library of classes used in practice.

A banner-row and content-row

<div class="banner-row" style= "background-image: url('/media/lendal-bridge.jpg');">
    <div class="banner-heading">
        <div class="container">
            <h3>A banner-row and content-row with a heading image</h3>
        </div>
    </div>
</div>
<div class="content-row">
    <div class="container">
        <p>Content text lives in this content-row below the heading-row</p>
    </div>
</div>

Content text lives in this content-row below the heading-row

A content-row with halves


<div class="content-row red">
    <div class="half right background-image" style="background-image: url('/media/dotadmin_screengrab.png');">
    </div>
    <div class="half left">
        <div class="text">
            <h2>A heading</h2>
            <p>Some text goes in here</p>
            <a href="#" class="btn btn-color-1">A default button</a>
        </div>
    </div>
</div>

A heading

Some text goes in here

A default button

Coloured headings

<div class="content-row">
    <div class="container">
        <h3 class="orange">Orange heading</h3>
        <p>An orange heading.</p>
        <h3 class="green">Green heading</h3>
        <p>Cards can be use to present information in a grid style layout. They can be modified with a colour class.</p>
        <a href="#" class="btn btn-color-1">A default button</a>
    </div>
</div>