Design Library V 1.0
Find out what's included in the V 1.0 release, and what's coming up in V 1.1 of the Brighton & Hove City Council website design library.
Version 1.0 site functionality
- Tick check iconFour sections: Design Guidelines, Website Template Specifications, Pattern Library, and Design Examples
- Tick check iconFully responsive mobile friendly interface
- Tick check iconThis site's design follows the Brighton & Hove guidelines contained within
- Tick check iconAnnotated HTML and CSS pattern examples
- Tick check iconCode snippets for best practice and accessibility
- Tick check iconSearch the site using keywords or pattern reference numbers
- Tick check iconView HTML and CSS web page examples
Version 1.0 site content
Pattern Library
| Section | Patterns |
|---|---|
| Homepage | Service icons, Banner images |
| Page content | Content area headlines, Content sections, In page alerts, Top of page alerts, Link types, Button types, List types, Comparison lists, Pull out helper / fact box, Expandable helper, Bottom of page user actions, Responsive tables, Downloads |
| Sidebars | Left sidebar, Right sidebar |
| Supporting content | Useful information, Related documents, Contact information, Call to action user response, Newsletter sign up |
| Navigating content | Previous, next & ghost buttons, Show more content, Show / hide functionality |
| Form inputs | Accessibile forms, Field labels and descriptions, Text fields, Short text fields, Text areas, Drop down selection, In-line radio buttons, Stacked radio buttons, Stacked check boxes, Conditional questions, Repeatable fields |
| Formatted data | Date input, Date of birth, From - to dates, Prefix & post fix, Reference numbers, Address lookup, Manual address entry, User contact details, Preferred method of contact, Add a person, Add a person in conditional, Drag and drop file uploads |
| Validation & alerts | Top of page alerts, Required & optional fields, Input field validation, Advanced validation, Data consent validation, Alert associated to selected field |
| Form output data | Simple output data page |
| Form progress | Question label |
| Data consent and terms | Data consent new browser tab, Data consent in form, Terms new browser tab, Terms in form, Double opt ins |
| User interaction | Tool tips |
Template Specifications
| Topic | Specifications |
|---|---|
| Site and page | Defining breakpoints, Site and page width, Site and page margins and padding |
| Layout grids | Three column, Left side bar, Right side bar, Four column, Two column, One column, Call to action |
| Page Layout - Drupal | Content area definitions, Breadcrumb, Page headlines, Section navigation area, Page content area, Side bars |
| Page Layout - Mendix | Content area definitions, Breadcrumb, Page headlines, Alert area, Form area, Call to action area, Side bars |
| Accessibility | Screen reader only class, Accessible icons, Skip to main content, Heading levels |
Website Design Guidelines
| Topic | Guidelines |
|---|---|
| Colour | Website colour palette, Website colour usage cheat sheet, Colour tints and info boxes, Green and blue buttons, Campaign colour palettes |
| Header and footer | Responsive header, Header Logo, Header and logo colour options, Header size, Header orange bar, New message, Search bar, My account link, Services menu, Cookie alert, Service update, Responsive footer |
| Typography | Fonts and fallback fonts, Responsive text size guide |
| Icons and buttons | Icon cheat sheet, Buttons and icons combined, Using icons as navigation, Inputs and links |
| Inputs and links | Input styles, Link styles |
Design Examples
| Section | Pages |
|---|---|
| Homepage | Homepage responsive, Homepage banners |
| Drupal pages | Start page, Service hub, Service sub hub, Topic page, Service updates |
| Mendix and Drupal pages | Error, Terms and conditions |
| Mendix | Single question, Multiple question, Validation alerts, Form progress and success, Application summary, Opt in (new tab), Opt in (in form), Double opt in |
| My Account pages | Homepage, Services, Log in / register, Reset password, Council tax overview, Council tax pages |
| News pages | Landing page, Article, Category, Search |
| Maps and directories | Schools, Paring spaces, SEN, Directory search, Directory listing |
What's coming in Version 1.1?
Site functionality
- Tick check iconHigh contrast acessible colour theme
- Tick check iconHyperlinks from design patterns to the Mendix code library
- Tick check iconDownloadable Photoshop design resources
Pattern library
| Section | Pattern |
|---|---|
| Navigating Content | Services Menu, Pagination, Step by step guide, Form progress bar, Form progress bar dynamic |
| Form input | Outgoings/income/savings, Add a vehicle, Bank or Building Society payment, Multi step file uploads |
| Form validation | Set password validation, Reset pasword validation, Verification code validation |
| Form output | Single summary table, Multiple summary tables, Reference number, Check your answers, Summary after submit |
| User interaction | Auto save progress, Manual save progress, Load progress, Mendix form errors, Mendix unsaved form alert, Filters, Sorting results, Map and list views |
