archcss 2.0.0 → 3.0.0

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "archcss",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "The Architect CSS, is utility-first CSS framework that allows you to quickly create and design your websites and applications with flexible, easy-to-use classes without writing any custom CSS.",
   "main": "index.js",
+  "style": "css/arch.css",
+  "jsdelivr": "css/arch.css",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

package/readme.md

@@ -1,51 +1,174 @@
 <p align="center">
   <a href="https://archcss.com/">
-    <img src="https://get.archcss.com/brand/archcss-logo-banner-t.png" alt="Architect CSS logo" width="" height="">
+    <img src="https://get.archcss.com/brand/banner/banner.webp" alt="Architect CSS logo" height="320" width="640">
   </a>
 </p>
 
-<h3 align="center">Architect CSS</h3>
+<h2 align="center">Architect CSS</h2>
 
 <p align="center">
-  Craft dynamic, feature-rich frontend experiences with a versatile designs. Leverage a utility-first CSS framework for flexible design directly in your HTML
-  <br>
-  <a href="https://archcss.com"><strong>Explore Architect CSS docs »</strong></a>
+  <b>Utility-first CSS framework for building fast, flexible, and modern UIs directly in your HTML.</b>
   <br>
+  <a href="https://archcss.com"><strong>Explore Documentation »</strong></a>
   <br>
   <a href="https://github.com/archcss-dev/archcss/issues/new?assignees=-&labels=bug&template=bug_report.yml">Report bug</a>
   ·
   <a href="https://github.com/archcss-dev/archcss/issues/new?assignees=&labels=feature&template=feature_request.yml">Request feature</a>
 </p>
 
-## Quick start
+<p align="center">
+  <a href="https://www.npmjs.com/package/archcss"><img src="https://img.shields.io/npm/v/archcss.svg?style=flat-square" alt="npm version"></a>
+  <a href="https://github.com/archcss-dev/archcss/blob/main/license"><img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="MIT License"></a>
+  <a href="https://cdn.jsdelivr.net/npm/archcss"><img src="https://data.jsdelivr.com/v1/package/npm/archcss/badge" alt="jsdelivr"></a>
+</p>
 
-Available options:
+---
 
-- [Download the latest release](https://github.com/archcss-dev/archcss/archive/v2.0.0.zip)
-- Clone the repo: `git clone https://github.com/archcss-dev/archcss.git`
-- Install with [npm](https://www.npmjs.com/): `npm install archcss@v2.0.0`
-- Import from [jsdelivr](https://jsdelivr.com/): `https://cdn.jsdelivr.net/npm/archcss`
+## Features
 
+- **Utility-first architecture**: Compose any layout and design directly in your HTML without custom CSS.
+- **Mobile-first responsive design**: Clean breakpoint variants (sm:, md:, lg:, xl:, xxl:).
+- **State variants**: Built-in hover:, focus:, and active: pseudo-variants for colors, borders, and shadows.
+- **Modern CSS Grid & Flexbox**: Complete flexbox controls, equal-width columns (grid-cols-*), and responsive auto-fit/fill scales (grid-fill-*, grid-fit-*).
+- **Rich color & gradient palette**: Extensive theme colors, bidirectional tints/shades, alpha opacity utilities, directional gradients, and 3-color linear gradients.
+- **TypeScript DOM Plugin**: Fast, lightweight helper methods for modals, triggers, smooth scrolling, and clipboard copying.
+- **Bundled Icon Fonts**: Local Lucide Icons and FontAwesome webfonts included out of the box.
 
-[Previous releases](https://github.com/archcss-dev/archcss/releases) are also available for download.
+---
 
+## What's Included
 
-## Community
+```text
+archcss/
+├── css/
+│   ├── arch.css              # Full compiled CSS framework
+│   └── attribution.css       # Standalone origin watermark
+├── js/
+│   └── plugin.js             # Compiled TypeScript DOM plugin
+├── webfonts/
+│   ├── fontawesome/          # FontAwesome CSS, min.css, and webfonts
+│   ├── googleapis/           # Google Fonts CSS and min.css
+│   └── lucide/               # Lucide icon fonts, CSS, min.css, and JS
+├── index.js                  # Package entrypoint
+├── package.json
+└── changelog
+```
 
-Get updates on Architect CSS's development and chat with the project maintainers and community members.
+---
 
-- Ask questions and explore [our GitHub Discussions](https://github.com/archcss-dev/archcss/discussions).
-- Developers should use the keyword `archcss` on packages which modify or add to the functionality of Architect CSS when distributing through [npm](https://www.npmjs.com/browse/keyword/archcss) or similar delivery mechanisms for maximum discoverability.
+## Installation
 
+### 1. Package Manager
 
-## Creator(s)
+Install ArchCSS via npm, pnpm, or yarn:
 
-**Beba Godfried A.**
+```bash
+# npm
+npm install archcss
+
+# pnpm
+pnpm add archcss
+
+# yarn
+yarn add archcss
+```
+
+### 2. CDN (jsDelivr)
+
+Link the stylesheet and optional scripts directly in your HTML:
+
+```html
+<!-- ArchCSS Core Stylesheet -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/archcss/css/arch.css">
+
+<!-- Optional: Lucide Icons -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/archcss/webfonts/lucide/css/lucide.min.css">
+
+<!-- Optional: ArchCSS DOM Plugin -->
+<script src="https://cdn.jsdelivr.net/npm/archcss/js/plugin.js"></script>
+```
+
+### 3. Git Clone or Download
+
+```bash
+git clone https://github.com/archcss-dev/archcss.git
+```
+
+You can also download [the latest release archive](https://github.com/archcss-dev/archcss/releases).
+
+---
+
+## Usage Examples
 
-- <https://github.com/bebagodfried>
+### 1. HTML with Utility Classes
 
-## Copyright and license
+```html
+<div class="flex items-center justify-between p-3 bg-light rounded-5 border-1 border-light">
+  <h2 class="font-20 fw-700 text-dark m-0">Architect CSS</h2>
+  <button class="bg-primary text-light px-3 py-1 rounded-full hover:bg-primary-200 transition-all">
+    Get Started
+  </button>
+</div>
+```
+
+### 2. Responsive Grid
+
+```html
+<div class="grid grid-cols-1 md:grid-cols-3 gap-2">
+  <div class="p-3 bg-white rounded-5 shadow-sm">Card 1</div>
+  <div class="p-3 bg-white rounded-5 shadow-sm">Card 2</div>
+  <div class="p-3 bg-white rounded-5 shadow-sm">Card 3</div>
+</div>
+```
+
+### 3. DOM Plugin
+
+Use the included DOM plugin helpers in your scripts:
+
+```html
+<!-- Trigger modal display -->
+<button onclick="display('#my-modal')">Open Modal</button>
+
+<!-- Modal element -->
+<div id="my-modal" class="hidden fixed inset-0 flex items-center justify-center bg-dark-alpha-50">
+  <div class="bg-white p-4 rounded-10 shadow-lg">
+    <p class="m-0 text-dark">Hello from ArchCSS!</p>
+    <button class="mt-2 px-3 py-1 bg-secondary text-light rounded-5" onclick="hide('#my-modal')">
+      Close
+    </button>
+  </div>
+</div>
+```
+
+```javascript
+// Copy to clipboard helper
+strcopy('npm install archcss', () => {
+  console.log('Copied to clipboard!');
+});
+
+// Smooth scroll to an element with offset
+scroll_to('#features', 60);
+```
+
+---
+
+## Community & Support
+
+- Read the documentation: [https://archcss.com](https://archcss.com)
+- Ask questions and share feedback in [GitHub Discussions](https://github.com/archcss-dev/archcss/discussions)
+- Report bugs or request features via [GitHub Issues](https://github.com/archcss-dev/archcss/issues)
+- If publishing packages that extend Architect CSS on npm, include the `archcss` keyword for discoverability.
+
+---
+
+## Creator
+
+**Beba Godfried A.**
+- GitHub: [@bebagodfried](https://github.com/bebagodfried)
+- Website: [https://archcss.com](https://archcss.com)
 
-Code released under the [MIT License](https://github.com/archcss-dev/archcss/blob/main/LICENSE). Docs released under [Creative Commons](https://creativecommons.org/licenses/by/3.0/).
+---
 
+## License
 
+Code released under the [MIT License](https://github.com/archcss-dev/archcss/blob/main/license). Documentation released under [Creative Commons BY 3.0](https://creativecommons.org/licenses/by/3.0/).