Modern Classless CSS Framework - cosmoCSS

Demo Download

Author:	cspablocortez
Views Total:	79 views
Official Page:	Go to website
Last Update:	April 2, 2025
License:	MIT

Preview:

Modern Classless CSS Framework – cosmoCSS

Description:

Ever needed to quickly style a static site, prototype, or documentation page without messing around with CSS classes?

I’ve run into this countless times. You just want decent defaults for standard HTML elements.

That’s where classless CSS frameworks come in, and cosmoCSS is a solid contender in this space.

You link cosmoCSS in your <head>, write semantic HTML (like <article>, <nav>, <table>, etc.), and it applies sensible, modern styles automatically.

No need for .container or .btn-primary classes. It handles responsive design out of the box and even includes automatic switching between light and dark modes based on user preference.

Key Features

Modern, responsive design – Adapts to any screen size with fluid typography and spacing
Automatic light/dark mode switching – Respects user system preferences without additional code
Zero configuration required – Add the stylesheet and you’re done, no classes needed
Smooth microinteractions – Subtle animations and transitions for a polished feel
Zero dependencies – Lightweight and self-contained for optimal performance
Semantic HTML support – Write clean, accessible markup that works with screen readers
Mobile-first design – Looks great on all devices from small phones to large monitors
Variable-based architecture – CSS custom properties enable easy global theming

Perfect Use Cases

Quick prototyping – When you need to spin up a clean, functional prototype without spending time on CSS
Documentation sites – Create readable, professional documentation with minimal effort
Simple blogs or personal websites – Focus on content creation while maintaining visual appeal
Internal tools and dashboards – Build useful interfaces quickly without the overhead of complex CSS frameworks

How to use it:

1. Add the stylesheet in your <head> section.

<link rel="stylesheet" href="cosmo.min.css" />

2. Write semantic HTML. That’s it! Your elements will automatically receive styling based on cosmoCSS’s rules.

<article>
  <h1>Page Title</h1>
  <p>Content with <a href="#">links</a> and <code>code samples</code>.</p>
  <form>
    <label for="email">Email</label>
    <input type="email" id="email">
    <button type="submit">Save</button>
  </form>
</article>
...

How It Works

cosmoCSS uses modern CSS features under the hood:

Fluid scaling
Typography and spacing use clamp() for responsive values that scale between minimum, preferred, and maximum sizes:

--fs-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);

CSS Variables
All colors, spacing, and typography are defined as variables, making customization straightforward:

:root {
 --color-bg: #fff;
 --color-text-primary: #334159;
 --grid-max-width: 920px; 
}

Dark mode
The prefers-color-scheme media query switches variable values:

@media (prefers-color-scheme: dark) {
 :root {
   --color-bg: rgb(17 18 20);
   --color-text-primary: #e9eaed; 
  } 
}

Microinteractions
Subtle animations improve UX without being distracting:

a:hover:before {
 transform: scaleX(1);
 transform-origin: bottom left; 
}

FAQs:

Q: How do I customize cosmoCSS?

A: Since it relies on CSS variables, the easiest way is to override them in your own stylesheet loaded after cosmoCSS. Define new values for variables like --color-primary, --font-family-sans, or --grid-max-width. For more significant changes, you might need to write more specific CSS selectors to override the base styles, or fork the project.

Q: What if I need a specific class for layout or a component?

A: cosmoCSS doesn’t prevent you from adding your own classes and CSS. It provides the base styling. If you need a custom grid, component, or utility, write your own CSS alongside it. Just be aware of potential specificity conflicts.

Q: Is it suitable for large, complex web applications?

A: Generally, no. Classless frameworks excel at simplicity. Large apps usually benefit from component-based architectures and utility-class frameworks (like Tailwind) or component libraries (like Material UI, Bootstrap) for managing complexity and ensuring consistency across many custom UI elements.

Modern Classless CSS Framework – cosmoCSS