WordCamp Antwerp 2020

Style guide for the WordCamp Antwerp 2020 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.

Branding

WordCamp header. Read more about colors and fonts used on the site.

Widgets

All widget areas on the webpage presented visually.

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.