Project notes

The following notes provide some basic uncategorized information about Themalize and the website.

About Themalize (anchor)

Themalize is designed and built by Phil Brown (pmbrown.net) the project is shared on Github for developers requiring such a solution or those just generally interested in CSS and/or Sass framework development.

Latest release:

Themalize v1.0.5

Release notes:

4 September 2024

Compiled assets:

Assets v1.0.5.zip

Source and assets:

Themalize v1.0.5.zip

Limited testing (anchor)

Currently Themalize has only been tested across Windows desktop with Chrome, Firefox and Edge browsers, and on Samsung mobile using Chrome. Newer CSS methods and techniques are used for some styles but only those considered baseline by MDN web docs, defined as being '...well established and works across many devices and browser versions'.

Where text and background colors are applied to components and utilities the styles have been tested to ensure the text has sufficient contrast, but please note once the base theme and/or primary colors are changed to suit project parameters the color-contrast ratios will need to be re-validated and some elements may require adjusting to pass testing again.

Contributions (anchor)

The ideas of several others developers have contributed to Themalize as described below, each developer has been credited on the associated page with links to original articles where appropriate.

• Jeremy Keith's website styles provide the technique used for responsive font sizes.
• Adam Argyle's script from his manual theme switch article has been adapted for use with the theme switch.
• Adrian Roselli's advice in an article on improving the accessibility of Adam's theme switch script.
• Mark Otto's article on the dialog element provides the script and method used for the dialogs.

If you'd like to provide feedback on Themalize or are interested in contributing to the project please feel free to email the author or file an issue on the project repository.

Dart Sass (anchor)

Themalize is compiled using Dart Sass, it's possible that some of modern CSS methods and techniques used (e.g. clamp, color-mix) may fail compiling using LibSass or Ruby Sass.

About the website (anchor)

Documentation (anchor)

The website docs are an ongoing work-in-progress that are well-formed in some parts and rushed in others with currently the only proofreading done being by the author whilst writing. In general most of the docs pages:

• Showcase the elements as styled with HTML demo's provided to demonstrate usage.
• Include the Sass source files with basic instructions to explain customizing the styles.
• Provide more detailed documentation about customizing and/or expanding the styles where appropriate.

Currently the main exception is the layout utility pages which are limited to overviewing what styles are included and providing examples of the compiled CSS. These all take more advantage of Sass functionality than other elements to help aid compiling the utilities so require more detailed documentation that's yet to be written.

Accessibility (anchor)

As noted above where Themalize uses colors the contrast-ratios have been tested to ensure all elements have sufficient contrast, the following basic steps have been taken to address web accessibility whilst building the site:

• Pages are marked up using landmark and other semantic elements to give the content structure.
• Images include alt text descriptions.
• ARIA attributes are used sparingly.
• Pages are tested with Wave and Lighthouse browser tools for basic accessibility errors.

The accessibility of the <details> disclosure elements adapted into dropdowns in the site's navigation menu is unknown to the author, any email feedback regarding the accessibility of these or anything else on the website would be highly welcomed.

Build and design (anchor)

Themalize.com is a static website built using Hugo, the site is designed with Themalize using the custom setup described on the setup and configuration page. The syntax highlighting uses Hugo's Chroma shortcodes with custom variables designed for each color-scheme, these are compiled with other site specific styles using the custom Themalize setup.