Monday 21st November 2016
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.
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.
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.
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.
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>
We created a library of layout elements which can be deployed in different combinations, allowing the website administrator to create different content elements.
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.
Cards can be use to present information in a grid style layout. They can be modified with a colour class.
Header rows have a large background image and a text area with white text and a semi-opaque background, ensuring readability of the headings.
Below are some examples of this library of classes used in practice.
<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
<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>
<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>
© 2024 Invent Partners Ltd | Supporters of FdA Web Design, Wakefield