LumoCSS | Lightweight CSS framework for semantic HTML

Introduction

Accessibility

Lumo.CSS has built in system of reducing motion in the website, which means it will turn off any animations on the page. If user has set a preference to reduce motion in their browser settings the animations are gonna be disabled by default. However you can force reduced motion setting by applying data-reduce-motion="true" rule to the <body> tag.

<body data-reduce-motion="true">
    Page content inside body will have disabled animations
</body>

Lumo has built in dark mode. It enables if you set data-theme="dark" rule to the <body> tag. It does not turn on automatically based on the user preferences.

<body data-theme="dark">
    Page now has set dark mode
</body>