dominicana-indotel-ui

v1.0.1

Published

a year 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, 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

npm install dominicana-indotel-ui

Usage

CSS Only

Include the CSS file in your HTML:

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

Or import in your CSS:

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

With JavaScript Components

import AtomOS from 'dominicana-indotel-ui';

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

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

CDN

<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

<!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