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.
npm install tonecss
In angular.json file:
"styles": [
"node_modules/tonecss/tone.css",
"src/styles.css"
]
Download the latest release and include it in your project:
<link rel="stylesheet" href="path/to/tone.css">
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>
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... */
}
ToneCSS is built with a mobile-first approach, ensuring your applications look great on any device without additional effort.
ToneCSS styles all standard HTML elements:
ToneCSS supports all modern browsers, including:
ToneCSS is licensed under the MIT License.
FAQs
Classless framework
The npm package tonecss receives a total of 1 weekly downloads. As such, tonecss popularity was classified as not popular.
We found that tonecss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.