CurlyFramework

Tiny Framework for accessibility and sustainability, not only for MODX or Kirby CMS. Based on Tachyons, powered by Alpine.js and flavoured with lessons learned over the years.

Docs
Github

Better accessibility and sustainability in web development?

It doesn't have to be a complete overhaul, small steps can help you get there. I recommend Michelle Barker's talk "Building a greener web" at "All Day Hey! 2023". Here are some tips:

  • Use WebP and native lazyload (images, embeds).
  • Use fewer fonts and try to use variable fonts (.woff2).
  • Load embeds only on user interaction.
  • Test keyboard navigation.
  • Test reduced-motion.
  • Find a community to test and discuss accessibility and sustainability with real people.

Tools

Sa11y

Sa11y.js visually highlights content issues at the source with a simple tooltip on how to fix them:

Checklist

Here are some checks for a good website development workflow.

Go deeper with the BITV/WCAG 2.2 Toolbox or get in touch with me.

Image Alt Generator

Upload an image to get an image description from ChatGPT. Note that the AI uses a lot of resources and uses your image for training. So use it responsibly!

your uploaded image

Samples

Zoom Detector

Zoom: %

Positive:

Fixed or sticky elements can sometimes use a large amount of screen space, especially when the user zooms in to more than 150%. In this case, it may be better to inherit these elements.

In this script, you divide the outerWith width by the innerWidth to calculate the zoom factor. If the zoom factor is greater than 100%, you can add a class to reset the position. Try this with a Chromium browser using the Ctrl and +/- keys. It's actually a proof of concept, so the CSS isn't in the core at the moment.

Modal

Modal [popover]

The script also takes care of the focus so that it stays in the modal. Here is a example link to the test. You can also close it with the Escape key.

Accordion

Accordion <details>

Tabs

Slider

Filter

Filter: Results: out of

CSS Parallax

Richtext

This is a H4 headline.

A paragraph after a headline is here.

Another paragraph after a paragraph is here.

This is a H5 headline.

A paragraph after a headline is here.

Another paragraph after a paragraph is here.

This is a H4 headline.

A paragraph after a headline is here.

Another paragraph after a paragraph is here.

Form accessible upload

Success

Styleguide

Type Scale mobile desktop

Colors

Spacing

Grid

Features

Fluid Scale

All elements can be scaled using the .scale-content in the HTML node. Along with the CSS grid and responsive font classes, this is a great basis for the design presets from PenPot, Figma, Adobe XD and zeplin.io.

Security & Caching

The .htaccess file has been greatly enhanced with compression, caching and header settings such as content security policy or XSS protection.

MODX

Together with modmore's ContentBlocks you can create a flexible website builder with 100% code control. The modx.css file brings a minimalist layout to the MODX Manager backend.

Interested in MODX? Have a look at JoliTypo and Gitify-Preset.

Get it

Get the latest version

git clone git@github.com:jenswittmann/CurlyFramework.git or npm i curlyframework

Include the CSS and JS files in your markup and you are ready to go! Override the CSS settings using custom properties and use inline JS via AlpineJS to skip the build process.

Need more?

Install dependency via npm i and use CodeKit (or esbuild with custom config) to compile your assets. Play around, learn and share.

Thank you