whirlwindcss 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026-2027 beey12345
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, 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, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# Whirlwind CSS
+
+## What is whirlwind CSS?
+
+Whirlwind CSS🌪️ is a lightweight CSS framework designed to have the classes names by short.
+
+## What do i need to run whirlwind CSS?
+
+To run Whirlwind CSS you need **Vite**.
+
+## Is PurgeCSS needed?
+Although **PurgeCSS** Is recommended, it is still completly **optional**.
+
+## NOTES
+
+### Transition
+
+Whirlwind CSS has moved from the [**Codesandbox**](https://codesandbox.io/search?query=whirlwind-css) legacy version to an NPM.
+
+### Status
+
+Whirlwind CSS is still in active development so more updates will come🌪️!
+
+### How short the classes are
+
+Whirlwind CSS classes are designed to be short⚡🌪️.
+
+For comparison, the legacy whirlwind CSS used **fnt-bold** this NPM version uses **f-bold**.
+
+## How to import whirlwind
+
+To import whirlwind follow these steps:
+
+1. In your terminal write `npm i whirlwindcss` or `npm install whirlwindcss`
+2. Install postCSS if you havent already with `npm i postcss` or `npm install postcss`
+3. OPTIONAL: Install purgeCSS with `npm i purgecss` or `npm install purgecss`
+4. Import whirlwindCSS
+    - for JS type this line: `import 'whirlwindcss/dist/classes.css';`
+    - for React(TSX or JSX) type this line: `import 'whirlwindcss/dist/classes.css';`
+    - for HTML type this line: `<link rel="stylesheet" href="./node_modules/whirlwindcss/dist/classes.css">`
+    - for TS type this line: `import 'whirlwindcss/dist/classes.css';`
+
+Once done you will receive all the current whirlwind classes(If you are on the latest version).
+
+## Whirlwind CSS questions
+
+### Classes questions
+
+#### Class abbreviation questions
+
+##### What does ff mean in whirlwind?
+
+ff means **font-family** in Whirlwind CSS.
+
+## Copyright information
+
+Copyright (c) 2026-2027 beey12345 MIT license
+
+## A message from the creator of whirlwind CSS(A solo developer)
+
+Have fun styling with Whirlwind CSS🌪️🌀

package/dist/classes.css

@@ -0,0 +1 @@
+.f-bold{font-weight:700}.f-semibold{font-weight:600}.f-bolder{font-weight:bolder}.f-lighter{font-weight:lighter}.ff-arial{font-family:Arial,Helvetica,sans-serif}.ff-geneva{font-family:Geneva,Arial,Helvetica,sans-serif}.ff-georgia{font-family:Georgia,Helvetica,Arial,sans-serif}.ff-serif{font-family:serif,Georgia,Times New Roman,serif}.f-large{font-size:large}.f-larger{font-size:larger}.f-small{font-size:small}.f-smaller{font-size:smaller}.style-small-caps{font-variant:small-caps}.blk{display:block}.iblk{display:inline-block}.flx{display:flex}.iflx{display:inline-flex}.grd{display:grid}.cntnts{display:contents}.runin{display:run-in}.li-item{display:list-item}.i-li-item{display:inline list-item}.flxclmn{display:flex;flex-direction:column}.r-flxclmn{display:flex;flex-direction:column-reverse}.flxrw{display:flex;flex-direction:row}.manual-flxclmn{flex-direction:column}.manual-r-flxclmn{flex-direction:column-reverse}.manual-flxrw{flex-direction:row}.init-flx{display:flex;flex-direction:initial}.manual-init-flx{flex-direction:initial}.inh-flx{display:flex;flex-direction:inherit}.manual-inh-flx{flex-direction:inherit}.tbl{display:table}.itbl{display:inline-table}.tbl-caption{display:table-caption}.itbl-caption{display:inline table-caption}.tbl-cell{display:table-cell}.itbl-cell{display:inline table-cell}.tbl-column{display:table-column}.itbl-column{display:inline table-column}.tbl-column-group{display:table-column-group}.itbl-column-group{display:inline table-column-group}.tbl-footer-group{display:table-footer-group}.itbl-footer-group{display:inline table-footer-group}.tbl-header-group{display:table-header-group}.itbl-header-group{display:inline table-header-group}.tbl-row{display:table-row}.itbl-row{display:inline table-row}.tbl-row-group{display:table-row-group}.itbl-row-group{display:inline table-row-group}.rby{display:ruby}.irby{display:inline ruby}.rby-base{display:ruby-base}.irby-base{display:inline ruby-base}.rby-base-container{display:ruby-base-container}.irby-base-container{display:inline ruby-base-container}.rby-text{display:ruby-text}.irby-text{display:inline ruby-text}.rby-text-container{display:ruby-text-container}.irby-text-container{display:inline ruby-text-container}.fvea-fw{font-variant-east-asian:full-width}.fvea-jis78{font-variant-east-asian:jis78}.fvea-jis83{font-variant-east-asian:jis83}.fvea-jis90{font-variant-east-asian:jis90}.fvea-jis04{font-variant-east-asian:jis04}.fvs-inherit{font-variation-settings:inherit}.fvs-initial{font-variation-settings:initial}.fvs-unset{font-variation-settings:unset}.fvs-revert{font-variation-settings:revert}.pos-rel{position:relative}.pos-abs{position:absolute}.pos-fixed{position:fixed}.pos-static{position:static}.pos-sticky{position:sticky}.pos-unset{position:unset}.z1{z-index:1}.z2{z-index:2}.z3{z-index:3}.z4{z-index:4}.z-top{z-index:9999}.z-neg{z-index:-1}.d-no{display:none}.vis-hide{visibility:hidden}.vis-clp{visibility:collapse}.ivis-clp{visibility:inline collapse}.ov-hidden{overflow:hidden}.ov-scroll{overflow:scroll}.p1{padding:1px}.p2{padding:2px}.p-rem1{padding:1rem}.p-rem2{padding:2rem}.m1{margin:1px}.m2{margin:2px}.m-rem1{margin:1rem}.m-rem2{margin:2rem}.pt1{padding-top:1px}.pt2{padding-top:2px}.pt-rem1{padding-top:1rem}.pt-rem2{padding-top:2rem}.pb1{padding-bottom:1px}.pb2{padding-bottom:2px}.pb-rem1{padding-bottom:1rem}.pb-rem2{padding-bottom:2rem}.blk-sa{display:block;block-size:auto}.manual-blk-sa{block-size:auto}.ta-center{text-align:center}.col-red{color:red}.style-link{color:#add8e6;text-decoration:underline;text-decoration-color:#add8e6}.style-link:hover{color:#00f;text-decoration-color:#00f}.style-link:focus{color:purple;text-decoration-color:purple}.style-attention-grabber{color:#adff2f;stroke:red;stroke-width:2px}.style-attention-grabber-rem{color:#adff2f;stroke:red;stroke-width:2rem}.style-warning{color:#ff0;stroke:#000;stroke-width:1px}.style-caption{font:caption}.style-small-caption{font:small-caption}.filter-dshadow{filter:drop-shadow(2px 4px 6px black)}

package/dist/index.mjs

@@ -0,0 +1 @@
+

package/entry.js

@@ -0,0 +1 @@
+import './dist/index.css';

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "whirlwindcss",
+  "version": "1.0.0",
+  "private": false,
+  "license": "MIT",
+  "author": "beey12345",
+  "devDependencies": {
+    "rollup-plugin-postcss": "^4.0.2",
+    "vite": "^7.3.1"
+  },
+  "peerDependencies": {
+    "postcss": ">=8.0.0"
+  },
+  "optionalDependencies": {
+    "purgecss": ">=6.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "description": "A lightweight CSS framework designed to have the classes have short names",
+  "keywords": [
+    "CSS",
+    "css",
+    "Utilities",
+    "utilities",
+    "framework"
+  ],
+  "main": "dist/classes.css",
+  "style": "dist/classes.css",
+  "types": "dist/Intellisense.d.ts",
+  "dependencies": {
+    "fs": "^0.0.1-security"
+  }
+}

package/vite.config.js

@@ -0,0 +1,26 @@
+import { defineConfig } from 'vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  build: {
+    lib: {
+      // THIS is your only entry. Do NOT add an 'input' in rollupOptions!
+      entry: resolve(__dirname, 'entry.js'),
+      name: 'WhirlwindCSS',
+      fileName: 'index',
+      formats: ['es']
+    },
+    cssCodeSplit: false, // Keeps your 122 classes in one file
+    rollupOptions: {
+      // Do NOT put 'input' here. It conflicts with build.lib.entry.
+      output: {
+        assetFileNames: (assetInfo) => {
+          // Fix for the 'names' vs 'name' Array error
+          const name = assetInfo.name || (assetInfo.names && assetInfo.names[0]);
+          if (name && name.includes('style.css')) return 'classes.css';
+          return 'classes.css'; // Force it to be the King
+        }
+      }
+    }
+  }
+})