Skip to content
HTML pattern library for CTZN
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

CTZN User Interface

These are HTML and CSS patterns for and

The patterns are published on GitHub:

Project Goals

  • Make the interface load quickly.

  • Use minimal bandwidth for images and styles.

  • Make the interface usable on any device.

  • Make the interface look good in modern browsers at any size screen.

  • Make the interface accessible for users with diverse input devices, like touchscreens and screen readers.

  • Use simple, consistent HTML patterns to make integration with templates easy.

  • Use simple, consistent CSS patterns so rules and selectors can be reused.

Handy regular expressions

These are useful for updating files in this repository (for example, using search and replace in a text editor like Sublime Text).

Find the icons in each HTML file…

<!-- images/icons.svg -->[\s<a-z0-9A-Z="\.:/>,-/#]+?(?=</svg>)</svg>

Find knockout attributes…


Find knockout elements…

<!-- ko [^-]* -->

Find the icon elements within a label…

<label>([\s]+)<switch><svg class="icon"([^>]*)><use xlink:href="#([^"]+)"></use><foreignobject>([^<]+)</foreignobject></switch></svg><br />

And replace…

<label>$1<svg class="icon"$2><use xlink:href="#$3"></use></svg><span>$4</span><br />
You can’t perform that action at this time.