tonecss

v0.1.8

Published

a month ago

Classless framework

0High
0Medium
0Low

azulis

css classless styles ui

ToneCSS

Build beautiful prototypes without writing a single class name

ToneCSS is a lightweight, classless CSS framework that helps you create elegant web applications and prototypes with zero effort. Focus on your code and content while ToneCSS takes care of the styling.

✨ Features

Zero Classes - Just write semantic HTML and get professional styling instantly
Fully Customizable - Control every aspect of the design with CSS variables
Lightweight - Minimal footprint for maximum performance
Mobile-first - Responsive by default
Modern - Built for contemporary web development practices
Fast Prototyping - Create MVPs and prototypes in minutes, not hours

📦 Installation

Using npm

npm install tonecss

Angular use

In angular.json file:

"styles": [
    "node_modules/tonecss/tone.css",
    "src/styles.css"
]

Direct Download

Download the latest release and include it in your project:

<link rel="stylesheet" href="path/to/tone.css">

🚀 Quick Start

Just include ToneCSS in your HTML and start writing semantic markup:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My ToneCSS Project</title>
  <link rel="stylesheet" href="node_modules/tonecss/dist/tone.css">
</head>
<body>
  <header>
    <h1>Hello ToneCSS!</h1>
    <p>Beautiful styling without classes</p>
    <nav>
      <ul>
        <li><a href="#features">Features</a></li>
        <li><a href="#docs">Documentation</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <article>
      <h2>Start Building Faster</h2>
      <p>Focus on your content and functionality, not on styling.</p>
    </article>
  </main>
  
  <footer>
    <p>Made with ToneCSS</p>
  </footer>
</body>
</html>

🎨 Customization

ToneCSS comes with a comprehensive set of CSS variables that allow complete customization:

:root {
  /* Base colors */
  --tone-primary: #3498db;
  --tone-secondary: #2ecc71;
  --tone-accent: #e74c3c;
  
  /* Typography */
  --tone-font-family: system-ui, sans-serif;
  --tone-font-size: 16px;
  
  /* Component styling */
  --tone-border-radius: 4px;
  --tone-transition: all 0.2s ease;
  
  /* And many more... */
}

📱 Responsive Design

ToneCSS is built with a mobile-first approach, ensuring your applications look great on any device without additional effort.

📚 Component Showcase

ToneCSS styles all standard HTML elements:

Typography: Headings, paragraphs, lists, blockquotes
Forms: Inputs, buttons, selectors, checkboxes
Tables: Clean, readable tables with proper spacing
Navigation: Nav elements, menus, and breadcrumbs
Layout: Grid-based layouts, cards, and article structures
Interactive Elements: Buttons, accordions, modals

🌐 Browser Support

ToneCSS supports all modern browsers, including:

Chrome
Firefox
Safari
Edge
Opera

📄 License

ToneCSS is licensed under the MIT License.

View on NPM | GitHub Repository | Documentation