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

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.
Find a community to test and discuss accessibility and sustainability with real people.

Samples

Modal

Accordion

Slider

Filter

Results: Filter:

Features

Fluid Scale

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

Security & Caching

The .htaccess has been extended to include caching and security settings.

MODX

Together with Content Blocks From Modmore you can create a flexible website builder with 100% code control. The file modx.css 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.