WordCamp Europe 2017

Style guide for the WordCamp Europe 2017 theme.

Style guide

Style guide is broken down into several specific groups:

  • Overview — Introduction
  • Settings — Global variables and examples: colors, typography etc.
  • Tools — Default mixins and functions: transitions, global paddings, hidden text etc.
  • Generic — Ground–zero styles: normalize.css, global resets, global box-sizing etc.
  • Elements — Unclassed HTML elements (type selectors): headings, paragraphs, forms, links etc.
  • Objects — Cosmetic–free design patterns
  • Components — Designed components and other UI elements that are used to build the theme.
  • Trumps — Helpers and overrides.

This style guide is based on KSS methodology. If you want to test it for yourself, you can use this project as a starting point.

Branding

WordCamp Europe 2017 logo. Read more about colors and fonts used on the site.

Code standards

We are depending on these coding standards for developing flexible, durable, and sustainable HTML and CSS. This mostly affects CSS since HTML of the theme can't be changed without making global breaking changes. But by keeping CSS organized and following a specific writing style — we are making sure that code remains readable and maintainable.

Components

Every component has a static HTML example which helps in keeping the branding consistent.