@lobergdesign/dot-grid 1.0.8 → 1.0.12

package/README.md

@@ -46,6 +46,24 @@ Or in your HTML:
 />
 ```
 
+## 💡 IDE IntelliSense
+
+Get class name completions in `class=""` and `className=""` attributes with the [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) VS Code extension.
+
+Add this to your project's `.vscode/settings.json`:
+
+```json
+{
+  "css.styleSheets": [
+    "./node_modules/@lobergdesign/dot-grid/dist/grid.css"
+  ]
+}
+```
+
+Once configured, typing `grid-c-` or `place-` in any `class` attribute will show completions for all dot-grid classes.
+
+> **Plain HTML projects** — if you link the CSS via `<link>`, VS Code picks up class names automatically with no extra config.
+
 ## 🚀 Quick Start
 
 ### Basic Grid
@@ -263,76 +281,6 @@ Available: `.justify-start`, `.justify-end`, `.justify-center`, `.justify-betwee
 <div class="grid-c-auto">Auto-sized</div>
 ```
 
-## 🌲 Tree Shaking / PurgeCSS
-
-Like Tailwind CSS, you can significantly reduce the CSS bundle size by removing unused classes using PurgeCSS or similar tools.
-
-### Setup with PurgeCSS
-
-1. **Install PurgeCSS:**
-
-```bash
-npm install --save-dev @fullhuman/postcss-purgecss
-```
-
-2. **Copy the configuration:**
-
-Copy `purgecss.config.js` from the dot-grid package to your project root, or create your own:
-
-```js
-// purgecss.config.js
-module.exports = {
-  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
-  css: ['./node_modules/@lobergdesign/dot-grid/dist/grid.css'],
-  safelist: {
-    greedy: [
-      /^grid-c-\d{1,2}$/,
-      /^grid-c-(sm|md|lg|xl|xxl)-\d{1,2}$/,
-      // ... see purgecss.config.js for full list
-    ],
-  },
-}
-```
-
-3. **Add to your build process:**
-
-```json
-// package.json
-{
-  "scripts": {
-    "purge": "purgecss --config ./purgecss.config.js --output ./dist/grid.purged.css"
-  }
-}
-```
-
-### With PostCSS
-
-```js
-// postcss.config.js
-module.exports = {
-  plugins: [
-    require('@fullhuman/postcss-purgecss')({
-      content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
-      safelist: {
-        greedy: [
-          /^grid-c-/,
-          /^grid-r-/,
-          /^place-/,
-          // Add more patterns as needed
-        ],
-      },
-    }),
-  ],
-}
-```
-
-### Expected Results
-
-- **Full build:** ~28KB / 19KB minified
-- **With PurgeCSS:** Typically 2-5KB depending on usage
-
-See `purgecss.config.js` in the package for complete safelist patterns.
-
 ## 🎨 Customization
 
 Override CSS custom properties in your own stylesheet:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobergdesign/dot-grid",
-  "version": "1.0.8",
+  "version": "1.0.12",
   "description": "A modern, flexible 12-column CSS Grid system with container queries, fluid layouts, and subgrid support",
   "main": "dist/grid.css",
   "style": "dist/grid.css",
@@ -19,9 +19,7 @@
     "dist",
     "src",
     "README.md",
-    "LICENSE",
-    "purgecss.config.js",
-    ".purgecssrc.json"
+    "LICENSE"
   ],
   "scripts": {
     "build": "npm run build:css && npm run build:min",

package/.purgecssrc.json

@@ -1,26 +0,0 @@
-{
-  "content": [
-    "./src/**/*.{html,js,jsx,ts,tsx,vue,svelte}",
-    "./public/**/*.html"
-  ],
-  "css": ["./node_modules/@lobergdesign/dot-grid/dist/grid.css"],
-  "safelist": {
-    "standard": ["grid-w", "grid-r", "no-gap", "hidden"],
-    "greedy": [
-      "/^grid-c-\\d{1,2}$/",
-      "/^grid-c-start-\\d{1,2}$/",
-      "/^grid-c-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
-      "/^grid-c-start-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
-      "/^grid-c-vp-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
-      "/^grid-c-start-vp-(sm|md|lg|xl|xxl)-\\d{1,2}$/",
-      "/^grid-[rc]-subgrid$/",
-      "/^grid-r-(fluid-[234]|ram|intrinsic|even|dense|flexible)$/",
-      "/^grid-auto-(fit|fill)$/",
-      "/^place-[tcb]-[lcr]$/",
-      "/^justify-.*$/",
-      "/^grid-c-(min|max|fit|auto|fluid)$/",
-      "/^(hidden|block|grid|flex)-(sm|md|lg|xl|xxl)$/",
-      "/^(hidden|block|grid|flex)-vp-(sm|md|lg|xl|xxl)$/"
-    ]
-  }
-}

package/purgecss.config.js

@@ -1,77 +0,0 @@
-// PurgeCSS Configuration for dot-grid
-// This is an example configuration for end-users
-// Copy this to your project root and customize as needed
-
-module.exports = {
-  content: [
-    // Scan your source files for class names
-    './src/**/*.{html,js,jsx,ts,tsx,vue,svelte}',
-    './public/**/*.html',
-    // Add more paths as needed
-  ],
-
-  css: [
-    // Path to your compiled dot-grid CSS
-    './node_modules/@lobergdesign/dot-grid/dist/grid.css',
-    // Or if you import the source:
-    // './path/to/compiled/css/with/dot-grid.css'
-  ],
-
-  // Safelist: patterns that should never be purged
-  safelist: {
-    // Safelist all dot-grid core classes
-    standard: [
-      'grid-w',
-      'grid-r',
-      'no-gap',
-      'hidden',
-    ],
-
-    // Safelist patterns using regex
-    greedy: [
-      // Grid column classes: grid-c-1 through grid-c-12
-      /^grid-c-\d{1,2}$/,
-
-      // Grid column start: grid-c-start-1 through grid-c-start-12
-      /^grid-c-start-\d{1,2}$/,
-
-      // Responsive column classes: grid-c-sm-6, grid-c-md-4, etc.
-      /^grid-c-(sm|md|lg|xl|xxl)-\d{1,2}$/,
-
-      // Responsive start: grid-c-start-sm-1, etc.
-      /^grid-c-start-(sm|md|lg|xl|xxl)-\d{1,2}$/,
-
-      // Viewport-based: grid-c-vp-md-6, etc.
-      /^grid-c-vp-(sm|md|lg|xl|xxl)-\d{1,2}$/,
-      /^grid-c-start-vp-(sm|md|lg|xl|xxl)-\d{1,2}$/,
-
-      // Subgrid classes
-      /^grid-[rc]-subgrid$/,
-
-      // Fluid row classes
-      /^grid-r-(fluid-[234]|ram|intrinsic|even|dense|flexible)$/,
-
-      // Grid auto classes
-      /^grid-auto-(fit|fill)$/,
-
-      // Placement utilities: place-t-l, place-c-c, etc.
-      /^place-[tcb]-[lcr]$/,
-
-      // Justify utilities
-      /^justify-(start|end|center|between|around|evenly|space-).*$/,
-
-      // Sizing utilities
-      /^grid-c-(min|max|fit|auto|fluid)$/,
-
-      // Display utilities (responsive)
-      /^(hidden|block|grid|flex)-(sm|md|lg|xl|xxl)$/,
-      /^(hidden|block|grid|flex)-vp-(sm|md|lg|xl|xxl)$/,
-    ],
-  },
-
-  // Extract dynamic class names from JavaScript strings
-  defaultExtractor: (content) => {
-    // Match class names in strings, including dynamically generated ones
-    return content.match(/[A-Za-z0-9-_:/]+/g) || [];
-  },
-};