# AtomOS UI

AtomOS is a modular and efficient design system based on Atomic Design principles. Created by OSCARLEON, dominicana-indotel-ui 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

```bash
npm install dominicana-indotel-ui
```

## Usage

### CSS Only

Include the CSS file in your HTML:

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

Or import in your CSS:

```css
@import 'dominicana-indotel-ui/dist/atomos.css';
```

### With JavaScript Components

```javascript
import AtomOS from 'dominicana-indotel-ui';

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

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

### CDN

```html
<link rel="stylesheet" href="https://unpkg.com/dominicana-indotel-ui@latest/dist/atomos.css">
<script src="https://unpkg.com/dominicana-indotel-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: Components to display color palettes

## Color System

AtomOS includes a complete color system with:
- Black: scale 50-900
- Blue: scale 50-900
- Green: scale 50-900
- White: pure white

## Example Usage

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/dominicana-indotel-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/dominicana-indotel-ui/dist/index.js"></script>
</body>
</html>
```

## License

MIT

## Author

OSCARLEON