Skip to content

Introducing the QuickerSite Template Generator

I'm excited to share a new tool for the QuickerSite community: the QuickerSite Template Generator. It's a free, browser-based application that creates random, responsive website templates ready to import into QuickerSite.

Why this tool?

Designing templates from scratch takes time. You need to get the HTML structure right, place all the QuickerSite variables in the correct locations, make sure the menu works, handle mobile responsiveness, and still end up with something that looks good. The Template Generator does all of that automatically in one click.

How it works

Open the Template Generator in your browser and click Suggest Random Template. The tool randomizes everything: color scheme, fonts, layout, header background image, sidebar position, footer columns, and more. You get a live preview immediately. If something isn't quite right, tweak any setting in the sidebar and the template regenerates instantly.

When you're happy with the result, click Download Template. You'll get a page.html file that you can import directly into QuickerSite via Backsite > Setup > Templates.

What's inside the generated templates

Every template includes all the standard QuickerSite variables:

  • [TITLETAG], [METATAG_AUTHOR], [METATAG_DESCRIPTION], and all other head elements
  • [QS_BOOTSTRAPMENU_3] for the navigation, with CSS that targets the exact Bootstrap 3 class structure QuickerSite outputs
  • [SITENAME], [SITESLOGAN], [PAGETITLE], [PAGEBODY], and all content variables
  • [QSHIGHLIGHTSLABEL], [QSHIGHLIGHTS], [BANNER], [QSSITEFOOTER], and the search form block
  • [PAGERENDERTIME], [GOOGLEANALYTICS], [RSSLINK], and other optional elements

The templates are not just functional, they're built with modern best practices:

  • Google Fonts loaded with preconnect hints for fast rendering
  • A pure CSS mobile menu that works without any JavaScript - no conflicts with QuickerSite's jQuery
  • Dropdown submenus that display as an indented flat list on mobile, fully accessible without scripting
  • A skip-to-content link and screen-reader labels on search inputs
  • Automatic link color contrast checking against both text and background colors
  • A print stylesheet that hides navigation and chrome, showing only the page content
  • 23 header background images from Unsplash, with a dark overlay for text readability

Design variety

The generator offers real variety across its randomized output:

  • 16 color schemes, from professional dark themes to warm earthy tones
  • 15 heading fonts and 15 body fonts from Google Fonts, randomly paired
  • 5 header layouts: classic, centered, split, overlay, and minimal
  • Hero sections with gradient, solid, pattern, split, or Unsplash image backgrounds
  • Optional sidebar (left or right), banner sections, and 1-4 column footers

Every combination produces a unique, cohesive design. If you like most of a generated template but want to change the colors or fonts, just adjust those settings - the preview updates instantly without losing the rest of your layout.

Tested on a live QuickerSite

The templates have been tested on demo.quickersite.com across multiple page types: home pages, list pages with jQuery UI accordions, picture galleries with lightbox, and forum/theme pages. The navigation, content areas, search forms, and footer all render correctly.

Get it

The tool is completely free and open source:

It's a single HTML file with no dependencies. You can also download it and run it locally offline.

If you run into issues or have suggestions, feel free to open an issue on GitHub.

backtotop