WordCamp [Name] [Year]

Style guide for the WordCamp [Name] [Year] 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.

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.