About

Semanticus CSS is inspired by the semantic and accessible foundations of Pico CSS and the flexibility of utility composition patterns popularized by Bootstrap.

It aims to address the friction that often appears shortly after installing Pico CSS, when you want to customize spacing, layout, colors, and other CSS properties. It does so by combining Bootstrap-style utilities adapted to the same CSS variable system.

Why not just use Bootstrap?

Or any other full-fledged CSS framework, for that matter.

Semanticus CSS is not appealing solely because of its small footprint. Its real value lies in its semantic-first and accessibility-focused styling approach, helping developers build beautiful interfaces while gradually guiding them toward accessibility best practices without overwhelming them with the complexities of ARIA patterns and implementation details.

Size Comparison

Bundle	Gzip
Bootstrap (utilities + grid)	16.3 KB
Semanticus (utilities + grid)	10.6 KB
Bootstrap (full bundle)	53.8 KB
Semanticus (full bundle)	23.7 KB

Why not just use Pico CSS?

Sadly Pico CSS has not been actively maintained for a while, and it lacks a clear roadmap for future development.

Besides the convenience and added flexibility of utility classes, Semanticus CSS aims to uphold Pico CSS's accessibility principles as part of the design.

For instance, it kept the following accessibility features:

• A loading region can be expressed with aria-busy="true"
• Validation can be expressed with aria-invalid
• Disabled controls remain native disabled controls

And updated existing ones using the latest web platform features and patterns, e.g.:

• Tooltips use the ARIA: tooltip pattern
• Dropdowns use the ARIA: menu pattern
• Modals use the Invoker Commands API
• Breadcrumbs don't rely on the i18n aria-label property, for styling purposes, but instead use the native semantics of <nav> and <ol> elements, while still encouraging the use of aria-label for better accessibility.

Size Comparison

Bundle	Gzip
Pico (semantics only)	10.2 KB
Semanticus (semantics only)	10.9 KB
Pico (semantics + classes)	11.5 KB
Semanticus (semantics + components + variants)	13.5 KB