CSS Pattern Visual Reference

Pattern Preview

Pattern Preview Reference

This page shows all available CSS patterns for headers. Use this to visualize and select patterns for your pages.

pattern-rugby

For rugby/sports pages

pattern-data

For data/blog content

pattern-clean

For design/modern pages

pattern-dark

For professional/about pages

pattern-light

Light professional

pattern-racing

For F1 pages

pattern-football

For college football pages

pattern-tech

For technical documentation

$ci-1 (Primary)

Main brand color

How to Use This Preview

  1. Edit colors in _sass/_01_settings_colors.scss
  2. Edit patterns in _sass/_07_layout.scss
  3. Save the file - Jekyll auto-regenerates
  4. Refresh this page - See changes instantly
  5. Test on actual pages - Apply patterns to pages using pattern_class

Quick Pattern Testing

To test a pattern on this page temporarily, add this to the front matter:

header:
  pattern_class: pattern-rugby