atomos-ui

v1.0.0

Published

8 months ago

AtomOS - A modular and efficient design system based on Atomic Design principles

0High
0Medium
0Low

stevenvo780

css design-system atomic-design ui-components micro-components frontend css-framework

AtomOS UI

AtomOS is a modular and efficient design system based on Atomic Design principles. Created by OSCARLEON, AtomOS organizes the construction of digital interfaces into basic components, from atoms to complete organisms. This system allows designers and developers to work collaboratively, consistently and scalably, ensuring a cohesive visual identity and optimized user experience.

Installation

npm install atomos-ui

Usage

CSS Only

Include the CSS file in your HTML:

<link rel="stylesheet" href="node_modules/atomos-ui/dist/atomos.css">

Or import in your CSS:

@import 'atomos-ui/dist/atomos.css';

With JavaScript Components

import AtomOS from 'atomos-ui';

// Auto-initialize all components
AtomOS.initAtomOS();

// Or initialize specific components
AtomOS.navbarToggle();

CDN

<link rel="stylesheet" href="https://unpkg.com/atomos-ui@latest/dist/atomos.css">
<script src="https://unpkg.com/atomos-ui@latest/dist/index.js"></script>

Components

Atoms

Buttons: Styled button components with hover effects
Grid: Responsive grid system
Links: Styled navigation links
Navbar: Navigation bar with toggle functionality

Molecules

Blockquote: Quote components
Sections: Content sections

Organisms

Main Layout: Main content areas
Color Boxes: Color palette display components

Color System

AtomOS includes a comprehensive color system with:

Black: 50-900 scale
Blue: 50-900 scale
Green: 50-900 scale
White: Pure white

Example Usage

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/atomos-ui/dist/atomos.css">
</head>
<body>
  <nav class="navbar">
    <a href="#" class="nav-logo">My App</a>
    <div class="navbar-toggle">☰</div>
    <ul class="nav-links">
      <li><a href="#" class="nav-link">Home</a></li>
      <li><a href="#" class="nav-link">About</a></li>
    </ul>
  </nav>
  
  <main class="main">
    <div class="grid-container">
      <div class="col-12 col-md-6">
        <button>Click me</button>
      </div>
    </div>
  </main>
  
  <script src="node_modules/atomos-ui/dist/index.js"></script>
</body>
</html>

License

MIT

Author

OSCARLEON