A new Bootstrap theme and web design patterns for Croydon Council

Our objective

To design and develop a front end theme defining standards for web page layout, fonts, colour palette and design patterns.

The theme will be implemented and maintained across multiple websites in order to create a visual consistency for Croydon Council online.

A design pattern provides a solution to a re-occurring design challenge.

What is Bootstrap?

Bootstrap is the most popular CSS framework for responsive and mobile-first websites, an open source toolkit for developing with HTML, CSS, and JS.

Bootstrap uses Sass variables and mixins for theming, responsive grid system for layout, pre built components for design patterns, and JS plugins for user interaction.

Why we chose Bootstrap

Our objective at Croydon Digital Service is to build a visual consistency spanning our online publishing platforms. Creating seamless user journeys by joining up technologies in both their design and content style.

Our online services for residents and businesses have been developed across a variety of different platforms and coding languages, designed and built both in house and by external providers.

All this means that we needed to settle on a front end theme that is cross platform compatible, flexible, easy to customise and can be applied by developers with a range of skills and competencies.

Advantages in theme development

  • Utilising Bootstrap 4 components we have been able to quickly define our markup standards, creating fully documented design patterns and coding best practices.
  • Using Bootstrap 4 custom theming with Sass variables, we have been able to define our own colour palette, fonts and other styles, setting our global style preferences with minimal effort.
  • Global theme updates such as making changes to colour palette and fonts are quick to achieve using Sass variables.
  • Using Bootstrap 4 theming classes, enables our developers to implement new design patterns often without the need for writing any custom code.
  • Web accessibility is a priority for us, Bootstrap components have already been extensively tested and documented. With correct implementation it is possible to create websites and applications that fulfill WCAG 2.0 (A/AA/AAA).
  • By customising then recompiling Bootstrap into a single CSS file, our theme CSS can be hosted in one location. This means we can serve our CSS to multiple websites from one location, with theme updates made globally.
  • Bootstrap provides us with the option to import all of Bootstrap’s node modules in one go, or choose only the modules we require for a lighter load.
  • Using Bootstrap 4 JavaScript plugins allows us to add user interaction that is already tested and documented. Although we do include Bootstrap JS in most of our projects for interactive elements, we also have the option of only applying the Bootstrap CSS for projects that use coding languages that may conflict with Bootstrap JS.
  • Prototyping layouts with Bootstrap’s responsive grid system and column ordering in mind is fast. We can also design new pages and patterns with an understanding of how they will be implemented in development.

Advantages in theme application

  • Bootstrap 4 is open source, widely used and well documented, this reduces the need for us to write our own full documentation on the front end theme. Developers of all levels can work with the theme as long as they have a knowledge of Bootstrap or are able to spend some time learning the fundamentals.
  • Bootstrap 4 layout, spacing and theming classes reduce the need for custom CSS coding. This makes development faster and more consistent. Preventing variation in coding practices and variation in styling.
  • Developers are able to create page layouts and drop in components quickly using the Bootstrap 4 markup examples and classes, often without opening a CSS file. If styling tweaks are required these can be created on an individual platform basis, or factored into the theme.
  • Compiling our theme into a single CSS file and serving it from one location protects our brand and online identity.

Bootstrap 4 vs Bootstrap 3

Bootstrap 4 is the latest version of Bootstrap and we chose this version because it features new Sass variables designed for global styling and easy theming, ideal for this project.

Bootstrap 4 supports all major browsers except Internet Explorer 9 and below. We are currently testing a CSS fallback to support these older browsers, see Bootstrap 4 for IE8 and IE9.