feat: add additional utilities, refactor and update docs ref

Author: aghontpi

.prettierignore

@@ -0,0 +1,10 @@
+# Build output
+dist/
+node_modules/
+
+# VitePress cache and build output
+docs/.vitepress/dist/
+docs/.vitepress/cache/
+
+# Lockfile
+pnpm-lock.yaml

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80
+}

README.md

@@ -12,25 +12,27 @@ A lightweight CSS utility library to ease development.
 
 </div>
 
-
 ## Documentation
-You can view the documentation at [minimal-css-utility](https://bluepie.in/minimal-css-utility/). The full documentation for the utility classes can also be found in the `docs/` directory of this repository.
 
+You can view the documentation at [minimal-css-utility](https://bluepie.in/minimal-css-utility/). The full documentation for the utility classes can also be found in the `docs/` directory of this repository.
 
-## Motivation 
+## Motivation
 
 I wanted a minimal CSS utility that provides just basic features to get started quickly without the bloat of larger frameworks.
 
-
 For my projects, I use reset.css and a set of utility classes without external libraries, I move them from project to project. This eliminates it and makes it easier to maintain and view the docs.
 
 ## Features
 
 - Reset CSS
 - Grid Layout
 - Utility classes for:
+  - Borders & Shadows
   - Display
   - Flexbox
+  - Interactivity (cursor, opacity)
+  - Overflow
+  - Positioning
   - Sizing
   - Spacing
   - Typography
@@ -57,7 +59,10 @@ pnpm add minimal-css-utility
 You can also use the compiled CSS file from a CDN:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css"
+/>
 ```
 
 Link: https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css
@@ -71,15 +76,15 @@ You can either import the compiled CSS file into your project or import the SCSS
 Import the `min.css` file in your main CSS file:
 
 ```css
-@import "minimal-css-utility/dist/min.css";
+@import 'minimal-css-utility/dist/min.css';
 ```
 
 ### SCSS
 
 Import the `style.scss` file in your main SCSS file:
 
 ```scss
-@import "minimal-css-utility/scss/style.scss";
+@import 'minimal-css-utility/scss/style.scss';
 ```
 
 ## Building from source
@@ -109,4 +114,3 @@ This will generate the `dist/min.css` file.
 ## License
 
 This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
-

docs/.vitepress/config.js

@@ -1,41 +1,47 @@
 export default {
   title: 'Minimal CSS',
   description: 'A SCSS theme documentation site.',
-  base: "/minimal-css-utility/",
+  base: '/minimal-css-utility/',
   themeConfig: {
     nav: [
       { text: 'Home', link: '/' },
       { text: 'Guide', link: '/getting-started/introduction' },
-      { text: 'Github', link: 'https://github.com/aghontpi/minimal-css-utility/' }
+      {
+        text: 'Github',
+        link: 'https://github.com/aghontpi/minimal-css-utility/',
+      },
     ],
     sidebar: [
       {
         text: 'Getting Started',
         items: [
           { text: 'Introduction', link: '/getting-started/introduction' },
           { text: 'Breakpoints', link: '/getting-started/breakpoints' },
-          { text: 'CSS Reset', link: '/getting-started/reset' }
-        ]
+          { text: 'CSS Reset', link: '/getting-started/reset' },
+        ],
       },
       {
         text: 'Layout',
-        items: [
-          { text: 'Grid', link: '/layout/grid' },
-        ]
+        items: [{ text: 'Grid', link: '/layout/grid' }],
       },
       {
         text: 'Utilities',
         items: [
-          { text: 'Spacing', link: '/utilities/spacing' },
+          { text: 'Borders', link: '/utilities/borders' },
           { text: 'Display', link: '/utilities/display' },
           { text: 'Flexbox', link: '/utilities/flexbox' },
+          { text: 'Interactivity', link: '/utilities/interactivity' },
+          { text: 'Overflow', link: '/utilities/overflow' },
+          { text: 'Positioning', link: '/utilities/positioning' },
+          { text: 'Shadows', link: '/utilities/shadows' },
           { text: 'Sizing', link: '/utilities/sizing' },
+          { text: 'Spacing', link: '/utilities/spacing' },
           { text: 'Typography', link: '/utilities/typography' },
-        ]
-      }
+        ],
+      },
     ],
     search: {
-      provider: 'local'
-    }
-  }
-}
+      provider: 'local',
+    },
+  },
+};

docs/.vitepress/theme/custom.css

@@ -5,10 +5,12 @@
   --vp-font-family-mono: 'Inter', sans-serif !important;
 }
 
-html, body {
-    font-family: 'Inter', sans-serif !important;
+html,
+body {
+  font-family: 'Inter', sans-serif !important;
 }
 
-ul li, ol li {
+ul li,
+ol li {
   line-height: 1.5;
 }

docs/.vitepress/theme/index.js

@@ -1,7 +1,7 @@
-import DefaultTheme from 'vitepress/theme'
-import '../../../dist/min.css'
-import './custom.css'
+import DefaultTheme from 'vitepress/theme';
+import '../../../dist/min.css';
+import './custom.css';
 
 export default {
   ...DefaultTheme,
-}
+};

docs/getting-started/breakpoints.md

@@ -10,17 +10,18 @@ This theme's utility classes are applied from the specified breakpoint and up, m
 
 Here are the breakpoints I use throughout my system:
 
--   **`xs`** (extra-small): 0px (default, no media query needed)
--   **`sm`** (small): 576px
--   **`md`** (medium): 768px
--   **`lg`** (large): 992px
--   **`xl`** (extra-large): 1200px
+- **`xs`** (extra-small): 0px (default, no media query needed)
+- **`sm`** (small): 576px
+- **`md`** (medium): 768px
+- **`lg`** (large): 992px
+- **`xl`** (extra-large): 1200px
+- **`xxl`** (extra-extra-large): 1440px
 
 ## Example Usage
 
 You can use these breakpoints as suffixes to utility classes to create responsive designs.
 
-<div class="d-block d-md-flex d-lg-none" style="background-color: #f8f9fa; padding: 1rem; border: 1px solid #dee2e6;">
+<div class="d-block d-md-flex d-lg-none d-xxl-block" style="background-color: #f8f9fa; padding: 1rem; border: 1px solid #dee2e6;">
   <div style="background-color: #e9ecef; padding: 1rem; margin: 0.5rem;">Item 1</div>
   <div style="background-color: #e9ecef; padding: 1rem; margin: 0.5rem;">Item 2</div>
 </div>
@@ -29,7 +30,8 @@ You can use these breakpoints as suffixes to utility classes to create responsiv
 <ul>
   <li><strong>On extra-small and small screens (<code>&lt;768px</code>):</strong> The container is a block element, and the items are stacked vertically.</li>
   <li><strong>On medium screens (<code>&ge;768px</code> and <code>&lt;992px</code>):</strong> The container becomes a flex container, and the items are displayed side-by-side.</li>
-  <li><strong>On large and extra-large screens (<code>&ge;992px</code>):</strong> The entire container is hidden.</li>
+  <li><strong>On large and extra-large screens (<code>&ge;992px</code> and <code>&lt;1440px</code>):</strong> The entire container is hidden.</li>
+  <li><strong>On extra-extra-large screens (<code>&ge;1440px</code>):</strong> The container will reappear as a block element.</li>
 </ul>
 
 ```html

docs/getting-started/introduction.md

@@ -11,26 +11,33 @@ For my projects, I use reset.css and a set of utility classes without external l
 ## Installation
 
 ::: code-group
+
 ```bash [npm]
 npm install minimal-css-utility
 ```
+
 ```bash [yarn]
 yarn add minimal-css-utility
 ```
+
 ```bash [pnpm]
 pnpm add minimal-css-utility
 ```
+
 :::
 
 To use this utility in your project, you can either link to the compiled CSS file from the `dist` directory or import the SCSS files into your own stylesheet.
 
 ### Linking with CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/minimal-css-utility/dist/min.css"
+/>
 ```
 
-### Importing in your CSS or SCSS 
+### Importing in your CSS or SCSS
 
 ```css
 @import 'minimal-css-utility/dist/min.css';