archcss 2.0.0 → 3.0.0-beta.2

package/license.md

@@ -0,0 +1,32 @@
+# Architect CSS Framework v3
+
+![Architect CSS Framework](https://img.shields.io/badge/ArchCSS%20Framework-v3-blueviolet?style=for-the-badge&logo=sass)
+![License: MIT](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)
+![License: MPL-2.0](https://img.shields.io/badge/license-MPL--2.0-orange?style=for-the-badge)
+
+MIT License (for compiled assets in /dist/):
+--------------------------------------------
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of the compiled CSS/JS of this software (the "Software"), to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the
+compiled Software, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
+
+MPL-2.0 License (for source code in /src/):
+-------------------------------------------
+The source SCSS and TypeScript code are licensed under the Mozilla Public License 2.0.
+
+You are free to use, modify, and distribute the source code, but:
+- Any modified version that is distributed must also be shared under MPL-2.0.
+- You must disclose your changes and include this license.
+
+This ensures the framework stays open and benefits the community.
+
+For commercial licensing or custom terms, contact: [Arch. CSS Dev Team](mailto:dev@archcss.com)
+
+---
+Copyright (c) 2025 [Beba Godfried A.](https://bebagodfried.com)

package/package.json

@@ -1,30 +1,65 @@
 {
   "name": "archcss",
-  "version": "2.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",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/archcss-dev/archcss.git"
+  "version": "3.0.0-beta.2",
+  "description": "Modular CSS framework based on Sass, featuring CSS utilities, a ready-to-use responsive system and an extensible structure. Designed for fast, clean and efficient integration into any modern frontend project.",
+  "main": "dist/index.css",
+  "style": "dist/index.css",
+  "jsdelivr": "dist/index.css",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "tag": "beta"
   },
   "keywords": [
-    "javascript",
+    "archcss",
     "opensource",
-    "framework",
     "ui",
     "ux",
+    "css",
+    "css3",
+    "javascript",
+    "scss",
+    "sass",
+    "typescript",
+    "framework",
     "css-framework",
-    "architect",
-    "architect-ui",
-    "archcss"
+    "sass-framework",
+    "scss-framework",
+    "npm",
+    "npm-package",
+    "style",
+    "styles",
+    "stylesheets",
+    "styles-css",
+    "bebagodfried"
   ],
-  "author": "Beba Godfried",
-  "license": "MIT",
+  "author": "Beba Godfried from ArchCSS Dev Team",
+  "license": "MIT+MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/archcss-dev/archcss.git"
+  },
   "bugs": {
-    "url": "https://github.com/bebagodfried/archcss/issues"
+    "url": "https://github.com/archcss-dev/archcss/issues"
   },
-  "homepage": "https://github.com/archcss-dev/archcss#readme"
-}
+  "homepage": "https://github.com/archcss-dev/archcss#readme",
+  "devDependencies": {
+    "postcss-scss": "^4.0.9",
+    "sass": "^1.89.2",
+    "stylelint": "^16.21.1",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.1",
+    "typescript": "^5.8.3"
+  },
+  "scripts": {
+    "sass:build": "sass src/libs:dist/ --no-source-map && sass src/scss:dist/ --no-source-map && rm -rf dist/webfonts && mkdir -p dist/webfonts && cp -r src/libs/webfonts/fontawesome src/libs/webfonts/googleapis src/libs/webfonts/lucide dist/webfonts/ && node scripts/inline-fonts.mjs dist/index.css && mkdir -p dist/css dist/ui && cp dist/index.css dist/css/main.css && cp dist/index.css dist/ui/style.css && node scripts/relocate-fonts.mjs dist/css/main.css && node scripts/relocate-fonts.mjs dist/ui/style.css",
+    "sass:watch": "sass --watch src/scss:dist/css",
+    "sass:lint": "stylelint \"src/scss/**/*.scss\"",
+    "ts:build": "tsc",
+    "dev": "pnpm run sass:watch & pnpm run ts:build --watch",
+    "dev:build": "pnpm run sass:build && pnpm run ts:build",
+    "commit": "pnpm run sass:lint && pnpm run sass:build && pnpm run ts:build"
+  }
+}

package/readme.md

@@ -1,51 +1,107 @@
-<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="">
-  </a>
-</p>
 
-<h3 align="center">Architect CSS</h3>
+# Architect CSS framework V3
+![Architect CSS Framework](https://img.shields.io/badge/ArchCSS%20Framework-v3-blueviolet?style=for-the-badge&logo=sass)
+![License: MIT](https://img.shields.io/badge/license-MIT-green?style=for-the-badge)
+![License: MPL-2.0](https://img.shields.io/badge/license-MPL--2.0-orange?style=for-the-badge)
 
-<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>
-  <br>
-  <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>
+> Modular CSS framework based on Sass, featuring CSS utilities, a ready-to-use responsive system and an extensible structure. Designed for fast, clean and efficient integration into any modern frontend project.
 
-## Quick start
+## What's Included
 
-Available options:
+- Compiled `CSS` from modular SCSS,
+- Utility-first Sass structure applied to CSS,
+- TypeScript DOM plugin for triggers and manipulation,
+- Invisible CSS watermark (framework origin tracking).
 
-- [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`
+## Quick start project
+```
+pnpm init
+pnpm add -D sass stylelint stylelint-scss stylelint-config-standard typescript
+npx tsc --init
+```
 
+## Installation
 
-[Previous releases](https://github.com/archcss-dev/archcss/releases) are also available for download.
+1. Using NPM
+```bash
+npm install archcss
+```
 
+2. Using PNPM
+```bash
+pnpm install archcss
+```
 
-## Community
+3. Using Yarn
+```bash
+yarn install archcss
+```
 
-Get updates on Architect CSS's development and chat with the project maintainers and community members.
+> Note: This package only includes **compiled CSS and JS**. Source SCSS is private.
 
-- 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.
+## NPM Scripts
 
+### Build Sass
+```bash
+pnpm run sass:build
+```
+> Compile `src/scss/` into `dist/` (no sourcemaps), ship the `dist/webfonts/` assets and inline the icon font stylesheets.
 
-## Creator(s)
+### Watch Sass Changes
+```bash
+pnpm run sass:watch
+```
+> Watch for SCSS file changes and rebuild automatically.
 
-**Beba Godfried A.**
+### Lint SCSS
+```bash
+pnpm run sass:lint
+```
+> Check Sass code style and errors using `stylelint`.
 
-- <https://github.com/bebagodfried>
+### Commit Before Release
+```bash
+pnpm run commit
+```
+> Run Sass lint and build. Fails if linting fails.
 
-## Copyright and license
+## Usage Example
 
-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/).
+### Include CSS
+```html
+<link rel="stylesheet" href="node_modules/archcss/dist/index.css">
+```
 
+The compiled `dist/index.css` already inlines the FontAwesome and Lucide
+icon stylesheets and bundles the Google Fonts imports, so a single file is
+enough. The icon font files ship under `dist/webfonts/` and are referenced
+with paths relative to the stylesheet, so CSS and icon fonts work in the
+browser and in bundlers (Next.js, Vite, webpack) without extra config.
 
+> If you only need part of it, the individual assets are available at
+> `dist/webfonts/fontawesome/css/fontawessome.min.css` and
+> `dist/webfonts/lucide/css/lucide.min.css`.
+
+### Use DOM Plugin (modals)
+```html
+<button onclick="display('#modal-1')">Open Modal</button>
+<div id="modal-1" class="hidden">Hello, I am modal</div>
+```
+
+```ts
+import Modal from 'archcss/dist/js/plugin.js';
+let modal = new Modal();
+```
+
+## License
+
+This project is dual-licensed:
+
+- **MIT**: applies to the compiled assets (`dist`)
+- **MPL-2.0**: applies to the source code (`src/scss`, `src/ts`)
+
+> You may use, modify, and redistribute freely. However, if you modify and distribute the **source code**, you must also publish your changes under the same MPL-2.0 license.
+
+This ensures the framework stays open and protected.
+
+For licensing inquiries: **dev@archcss.com**

package/changelog

@@ -1,76 +0,0 @@
-1.0.0
-**Full Changelog**: https://github.com/archcss-dev/archcss/commits/v1.0.0
-
-2.0
-[css]
-- new folders structure
-- new gradient synthax `gradient`-<color_1>-<color_2>-<color_3>
-- new radius synthax rounnded-<pill|full|1|2|3|4|5|6>
-
-- add 12 sass brand colors
-- add 3 elementor brand colors
-- add `scrollbar`-<0>
-- add `fancy` option as class for table
-- add `slate` color 
-- add `font-style reset` by d-none 
-
-- now support for flex order as [items-<order>] (from `1` to `12`)
-- now support auto color on simple brand class
-- now support auto uppercase and center for buttons
-- now support for elements visibility 
-- now support <h1...6> `class` similar to heading title
-
-- remove `flex-span` class to [flexspan]
-- remove `bc`-<color> class to `brand-color`-<brand_name>-<color_number>
-- remove `border` as bordered class to `border`-<all>
-- remove `shadow` class to [box-shadow]
-- remove `rounded`-<sm|md|lg|xl>
-- remove shadow on `translate`-<top|left|bottom|right>
-- remove litterals gap (narrow, small, normal, large, wide)
-
-- update Font Awesome to 6.5.1
-- update generic `b` and `em` font-weight
-- update naming list-style-type as class
-- update `-row` elements (width: 100%)
-- update `-row` elements for mobile-first
-- update <hidden> class
-- update <divider> (add shadow, add opacity)
-- update <rounded> (now support from `1` to `12`px )
-- update `scrollbar` width to `3px`
-- update `grid` (gutter)
-- update `table` (width, padding) and `td`, `th` (border)
-- update `spacing` rest (apply to responsive)
-- update `positions` rest (apply to responsive)
-- update `spacing` (from .25rem to 3rem)
-- update `elements` weight (font-weight)
-- update `font-*` utility supported size from `7px` to `96px` as common word-processor
-- update global `font-size` for `h1` to `h6`
-- update global `font-size` classname `fs-`<size> instead of `font`-<size>
-
-- replace `flex`-<length> with `flexspan`-<length>
-- replace `flex-col-reverse` with [flex-column-reverse]
-- replace `flex flex-col-reverse` with [flex-column-reverse]
-- replace `flex flex-column` twith [flex-column]
-- replace `flex flex-row` with [flex-row] and fix items at position
-- replace `self`-<axis> with align-self-<axis> and (add flex: 1 !!!no more need `flexspan`/`flexspan-1`)
-- replace `translate-middle` with `translate-center`
-
-- fix row items position
-- fix margin auto property
-- fix padding auto property
-- fix/update @googleapis font
-
-[js]
-- update
-- remove history
-- splite GLOBALS ($_) in `getter` (get) & `setter` (set)
-- replace `DOM()` with `dom()`
-- remove attrib
-- replace `set_attrib()` to `set_attribute()`
-- update listener [on(event: string, listener: Function)]
-- update `display()` (now support `arrayList`) _eg: display(['#elementId1','#elementId2'])_
-- update `hide()` (now support `arrayList`) _eg: hide(['#elementId1','#elementId2'])_
-- remove `onClick()`, `onDblClick()`
-- replace `on_scroll()` to `at_scroll()` [on_scroll(el: string, add_list: Array<string>, rm_list: Array<string> = [], offset: number = 0)]
-- replace and update `popUp` to `pop` with frame object
-- add/update listener [scroll_to(el: string)]