7.7.0 🌑

New features

• docs: Darkmode is here! Detect OS mode and save user preferences. The basic version requires only 4 lines of code. Thanks to CSS variables.
• docs: Added a checklist for a good website development workflow with accessibility in mind.
• docs: Added a simple ChatGPT tool to generate image alt descriptions.
• richtext: show empty elements note c0f76eb
• .htaccess: using remote images for local development adf9d44

Optimise

• docs: <details> Accordions now close each other on opening when connected via name attribute. Thanks to @FlxRobole from @Pixeltalk-Leipzig for the tip!
• docs: update style
• a11y: use larger outline offset for focus highlight, better for Darkmode
• form/skiplinks: respect correct font colour in Light-/Darkmode
• fluidscale: detect zoom level on page init and prevent too many small values
• update alpine.js

Tip

Check out pixeltalk.io Archive for some inspiring talks from Leipzig. See you next time!

Full Changelog: 7.6.0...7.7.0

7.6.0 🧇

New features

• 🔥 Import CSS files via @use for CodeKit 3.30 and Dart Sass 1.81.0.
• fluidscaling: Detect and respect the zoom level of the browser. Set zoomlevel as a CSS property. See commit for details.
• print.css: refactor and add .print__black/.print__bg-white classes for sustainable printing.
• Add CSS visibility classes .vh/.vv. Helpful when hiding content with CSS animations.
• .htaccess: update Content-Security-Policy for sa11y.js.
• modx.css/contentblocks: give #contentblocks-modal-mask a modern background in the MODX manager.
• Use breakpoints for typescaling and calculate rem from px.
• modx.css: update default MODX region background to get a more focusable MODX manager layout (WIP)

Optimise

• docs: add check with sa11y.js
• docs: optimise screenreader accessibility for slider and remove `aria-hidden' for items (not useful for CSS scrollsnap).
• docs: add .reset-spacing
• modx.css: update template path for MODX-Gitify-Preset.
• .scale-content: Use properties for easier customisation
• Ignore _a11y.scss in PurgeCSS
• Remove MagicPreview button merge: It is now included in MagicPreview 1.4.
• remove border-width from _vars.scss
• Remove tachyons/src/_negative-margins

Tip

Check out Kirby CMS as a lightweight CMS. It also works great with CurlyFramework. Maybe we will release CurbyFramework in the future 😸

Full Changelog: 7.5.0...7.6.0

7.5.0 🎒

New features

• docs: add example tabs with keyboard navigation
• docs: add a simple styleguide
• docs: add a visual css grid debug mode ↝ curlyframe.work
• modx.css: set custom colour for MODX Manager navbar and primary button, also replace MODX logo (works great with ManagerModify Plugin)
• modx.css: move ContentBlocks field settings to first position
• modx.css: add style for simpler MagicPreview template and get a more suitable style for MODX Manager
• modx.css: add style for modern action buttons in Collections for MODX3
• Content Security Policy: allow font-src data: (bugfix for MODX Redactor Editor)

Optimise

• docs: better output for screenreaders
• update .scale-content
• update .richtext spacing
• update _reset.css: hide summary details arrow on Safari browser
• remove .page
• remove custom font from jens-wittmann.de
• remove babeljs as default

Notes

Tip

Check out MODX-Gitify-Preset if you're using MODX.

Full Changelog: 7.4.0...7.5.0

7.4.0 🍋‍🟩

New features

• add: add .focus-highlight (thanks to https://www.oidaisdes.org/de/two-color-focus-indicator.de)
• add: caching rule for mp4/webm in .htaccess
• add: auto hyphenation for large links in .richtext
• add: keep focused element visible with fixed header (scroll-padding) for WCAG 2.2 2.4.11
• docs: add form with accessible upload via alpinejs
• docs: add reduced-motion test to checklist

Optimise

• remove: hide tab focus when not needed
• remove: default webfont
• remove: translateY() from .icon-font

Notes

Tip

Pixeltalk.io is using CurlyFramework 🚀

Full Changelog: 7.3.0...7.4.0

7.3.0🧉

New features

• Set correct button font-family for input[type=file] in _typo.scss
• Add some new examples (slider, filter) and layout for docs

Optimise

• Remove --spacing-0 from _vars.scss
• Optimise path to node_modules/ in _bundle.scss for better handling as MODX template
• Update npm dependencies

Full Changelog: 7.2.0...7.3.0

7.2.0 🧃

New Features

• update MODX ContentBlocks manager style
• add --breakpoint-small-only
• add .overscroll-behavior-none
• add .subgrid
• add .lazyload-hidden
• add .btn--clean
• add .flex-auto-1-0
• add underline to links for .richtext with font thickness

Optimize

• add overscroll-behavior none as default to prevent unwanted page moving on drag'n drop
• add padding 0 to .reset-spacing
• optimize .richtext type scale, bugfix spacing in FF and safelist classes for PurgeCSS
• add **/*.tpl files for PurgeCSS (when using pdoTools)
• remove lazysizes.js (use native loading="lazy" instead)

Full Changelog: 7.1.0...7.2.0

7.1.0 🍉

New projects started, which means improvements and bug fixes that I have learned on the existing projects.

✅ optimize Tachyons 5 custom build for CurlyFramework
✅ update .no-scrollbar to work in Firefox
✅ update CSP Headers
✅ update HTTP caching via .htaccess
✅ block AI Bots via robots.txt
✅ update .richtext spacing
✅ use tachyons type scale
✅ update dependencies: postcss, cssnano, alpinejs and curlyframework tachyons
✅ add custom _reset.scss
✅ Docs: update modal attributes and add accordion example with @alpinejs/collapse

Full Changelog: 7.0.2...7.1.0

7.0.2🍦

Next version of the personal framework for more accessibility and sustainability.

Its possible to skip the build process to save resources: Overwrite CSS via custom properties and use inline JS via AlpineJS.

✅ add tachyons v5 custom build for CurlyFramework
✅ use CSS custom properties (variables)
✅ add PostCSS to Codekit
✅ revert typo scale and rename classnames
✅ update demo and docs

⚠️ move MODX related into MODX-Gitify-Preset
⚠️ remove helper.js

6.0.0 ⛱

• add alpine.js
• add helper.js
• add .scrollsnap
• add .no-scrollbar
• add .headline, .richtext and .image
• add print.css
• add tachyons support for Dart Sass
• update _a11y.scss
• update _animation.scss
• update _contentblocks.scss
• update _form.scss
• update _grid.scss
• update _icons.scss
• update _mixins.scss
• update _styling.scss
• update _typo.scss
• update _vars.scss
• remove _hover.scss
• remove a11y.js

Examples: https://jenswittmann.github.io/CurlyFramework/

🩲 5.5.0

• add nav button animation
• add options for different grid-gaps for mobile and no row gap class
• update sizes for better breakpoint fitting
• add video functions to a11y.js
• animate [hidden] and elements with class .dn
• use currentcolor for scrollbars
• comment out not always needed css for smaller size
• add responsive embed class