Skip to main content

Kookaburra Page

Kookaburra Page is used to create page templates.

The page template is the foundation for all templates. See Templates for more information on how page templates relate to albums, sets, etc.

Colors​

The foundational colors for the page. When creating a new template, you can quickly "rough in" your page appearance here, for example, changing from the default high-key style to a low-key style.

Colors in specific areas can be overridden later using whatever provided spot color controls in their respective control groups.

The International WCAG 2.1 AA accessibility standard mandates a 4.5:1 contrast ratio for text. Accessibility requirements have been been adopted in the United States, the European Union, and the United Kingdom, and may be in effect elsewhere as well. We recommend researching your local regulations.

The Accessible Color Generator and Gov.UK Contrast Checker are useful tools for ensuring adequate contrast ratios. ColorCodes.io and HexColorPedia are great resources for exploring color.

Layout​

Top-level controls for setting up the document.

Typography​

Basic styling controls for text, hyperlinks, lists, and other foreground elements typically comprising the page content.

Forms​

Basic styling for form elements, such as would be used for your contact form.

Running Head​

The running head is a fixed-position element at the top of the page, and remains on-screen while scrolling. This typically houses your logo or name, the site navigation menu, or other "sticky" UI elements.

Customization options for the site navigation menu.

Navigation displays in either a "desktop" or "mobile" layout, depending on the size or the browser window in relation to your chosen breakpoint.

Above the breakpoint, in "desktop" mode, the site navigation is fully unfurled on the page, and supports drop-down menus to a depth of ONE sub-menu. We limit this depth for the sake of keyboard accessibility, as it would be cumbersome for keyboard users to navigate menus of any greater depth. Remember, keyboard accessibility is a primary feature of Kookaburra!

Below the breakpoint, in "mobile" mode, the site navigation collapses into a sidebar, opened via a pancake menu button in the running head. Within the sidebar, the menu unfurls in a vertical layout.

Resize your browser to preview both modes while designing.

If enabled, displays your site title, or a graphic logo of your choosing.

Main​

The Main section houses your page content, including breadcrumbs, album copy, the thumbnail grid for the album or album set, etc.

Located at the very bottom of the page, typically contains your copyright notice, and a link to your privacy policy.

Modals​

Adding a modal to any page is easy. Use this pattern in any content area that accepts HTML:

<a data-fancybox href="#modal-id">Open modal</a>

<div id="modal-id" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

The first element is a trigger used to open the modal; the second element is the modal itself. Be sure to include all of the attributes shown in the example, as each serves a purpose.

The id value, "modal-id", can be anything, but the two instances should match; mind the # character in the trigger, as syntax is important for properly referencing the content by id.

For the trigger, you can use an ANCHOR element as above, or you may use a BUTTON element instead; the button version looks like this:

<button data-fancybox data-src="#modal-id">Open modal</button>

<div id="modal-id" style="display: none;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Customize the appearance of modals in the Kookaburra Page template, in the "Modal" control group.

Image Presentation: Grid​

...

Image Presentation: Single Column​

...

Slideshow​

...

Single-image Pages​

...

Compliance​

...

Advanced Setup​

...