Skip to main content
Work

Sémantique CSS Framework

My classless CSS framework prioritizing semantic HTML and modern CSS features
Sémantique CSS Framework
CSSHTML
View on GitHub

About this project

Semantique is a minimal, classless CSS framework designed to simplify front-end development while prioritizing semantic HTML and maintainable design. Developers can write plain HTML elements and rely on Semantique's defaults for typography, forms, buttons, grids, and responsive layouts.

Key technical decisions include:

  • Modern CSS features: Leveraged :has(), custom properties, and CSS variables for context-aware styling and flexible theming.
  • Responsive by default: Grid and layout systems automatically adapt to different screen sizes without extra classes.
  • Automatic dark-mode support: Detects user preferences using prefers-color-scheme and adjusts styling dynamically.
  • Zero runtime dependencies: Pure CSS (~6 KB minified) with no JavaScript required.
  • Semantic-first design: Encourages clean HTML structure and reusable components, simplifying prototyping and content-focused development.

This project demonstrates my focus on developer experience, scalable CSS architecture, and modern browser capabilities. It shows how thoughtful CSS design can reduce boilerplate, enforce consistency, and enable rapid UI development.

This is an actively evolving project. Future updates are planned to introduce additional components, extended utility patterns, and enhanced theming capabilities, ensuring the framework continues to grow in flexibility and usability for developers.

Impact / Key Outcomes

  • Reduced front-end boilerplate by 100% class dependency, allowing semantic HTML only.
  • Achieved ~6 KB minified footprint, keeping the framework lightweight and performant.
  • Leveraged modern CSS features (:has(), CSS variables, prefers-color-scheme) to enable automatic dark-mode and responsive layouts without JS.
  • Enabled scalable, reusable styling architecture for consistent and maintainable design across multiple projects.
  • Improved developer experience, allowing rapid prototyping and content-focused development.
  • Open-source release under MIT license, supporting community adoption and collaboration.
  • Planned future enhancements including new components and extended theming, reflecting ongoing commitment to usability and scalability.