[ctrl+alt+n]
Why patternplate
How to use the docs
Guides
Guide: Getting Started (CLI)
Guide: Getting Started (App)
Guide: Build a component
Guide: Write documentation
Guide: Create Virtual folders
Guide: Document with widgets
Guide: Convince with a cover
Advanced
Advanced: Deploy to GitHub
Advanced: Theming
Advanced: Build systems
Reference
Reference: CLI
Reference: Configuration
Reference: Demos
Reference: Documentation
Reference: Renderers
Reference: Widgets
Reference: Search
Reference: Static Files
Roadmap
GitHub
Join us on Gitter
Components
Component: Button
Component: Code
Component: Flag
Component: Headline
Component: Icon
Component: Info Pane
Component: Logo
Component: Main Header
Component: Markdown
Component: Search
Component: Tag
Component: Text
Component: Themes
Main Navigation
Search
Nice browser. Is it antique?
No, seriously - your browser is so old that some features of patternplate don't work as expected.
Don't worry - you can either continue with a restricted version or install an up-to-date browser.
We messed up.
Sorry, but your user experience might be affected.
- Try reloading the page
- Report the problem at github.com/patternplate/patternplate

Make patternplate yours

⏲ Time invest: 30 Minutes ––– 👩‍🎓 Level: Expert

patternplate has a powerful theming system that gives you full control over its interface.

There are three types of theming configuration:

  • Vector Graphics: Source string of a SVG. Keys: logo, favicon
  • Font Stacks: CSS font-family value. Keys: font*
  • Colors: CSS colors. Keys: color*

Theming playground

Edit the code in the demo below to see the values taking effect. You can copy and paste the ui object to patternplate.config.js when you are done.