unocss-preset-fluid - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

dist/index.d.ts

@@ -34,4 +34,18 @@ import type { Preset } from 'unocss';
     useRemByDefault?: boolean;
+    /**
+     * A preset with predefined ranges of fluid spacing
+     * @default undefined;
+     */
+    ranges?: Ranges | null;
+    /**
+     * Whether to add comment helpers to the generated CSS.
+     * @default false
+     */
+    commentHelpers?: boolean;
 }
 
+export declare interface Ranges {
+    [key: string]: [number, number];
+}
+
 export { }

package.json

 {
   "name": "unocss-preset-fluid",
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "A fluid preset for unocss",
@@ -6,0 +6,0 @@ "author": "Renato Moor <[e-mail]>",

README.MD

 # Unocss Preset Fluid
-Elegantly scale type and space without breakpoints.  
-A fluid fonts and spaces utilites for unocss inspired by [Utopia](https://utopia.fyi/).
+UnoCSS Preset Fluid offers an elegant solution to scale typography and spacing fluidly across different screen sizes without the need for breakpoints. Inspired by [Utopia](https://utopia.fyi/), this preset simplifies the creation of responsive designs in UnoCSS.
 
 
 ## Installation
+Install the preset alongside UnoCSS using your preferred package manager:
 ```bash
@@ -14,3 +14,3 @@ npm i unocss-preset-fluid unocss --save-dev # with npm
 ## Usage
-
+To use the preset in your UnoCSS configuration:
 ```js
@@ -34,4 +34,3 @@ import { defineConfig } from 'unocss'
 ### Options
-
-Example:
+Define your fluid design parameters with these options:
 ```js
@@ -45,23 +44,18 @@ {
     useRemByDefault: false,
+    ranges: null,
+    commentHelpers: false,
 }
 ```
+### Options Explained
 
-#### MaxWidth `1440`
-This is the width in pixel where the fluid will stop growing.
+ - **MaxWidth**: The maximum width in pixels where the fluid scaling stops growing.
+ - **MinWidth**: The minimum width in pixels where the fluid scaling stops shrinking.
+ - **ExtendMaxWidth**: Allows fluid scaling beyond MaxWidth while maintaining the proportion set by MaxWidth and MinWidth.
+ - **ExtendMinWidth**: Allows fluid scaling below MinWidth while maintaining the proportion set by MaxWidth and MinWidth.
+ - **RemBase**: The base value for REM unit calculations.
+ - **UseRemByDefault**: When set to true, enables REM units as the default unit of measurement.
+ - **Ranges**: Define named ranges for recurring spacings, creating handy aliases.
+ - **CommentHelpers**: Enable to add helpful comments in the generated CSS, visible in the browser's inspector tool.
 
-#### MinWidth `375`
-This is the width in pixel where the fluid will stop shrinking.
-
-#### ExtendMaxWidth `null`
-This is the width in pixel where the fluid will stop growing but keeping the proportions set by `maxWidth` and `minWidth`.  
-This is useful if you want the fluid to grow further than the `maxWidth` but keeping the same size at `maxWidth`.
-
-#### ExtendMinWidth `null`
-This is the width in pixel where the fluid will stop shrinking but keeping the proportions set by `maxWidth` and `minWidth`.  
-This is useful if you want the fluid to shrink further than the `minWidth` but keeping the same size at `minWidth`.
-
-#### RemBase `16`
-This is the base value for the rem unit.
-
-#### UseRemByDefault `false`
+#### UseRemByDefault
 If you are working with rem units, you can set this to true.
@@ -75,45 +69,27 @@ This will make the fluid use rem by default.
 
-## Utilities
+#### Ranges
+This option allows you to define recurring spacings using predefined names.
+For example. With this fluid ranges:
+```js
+{
+  xs: [12, 16],
+  sm: [14, 18],
+  md: [18, 24],
+  lg: [22, 30],
+}
+```
+You will be able to use it as aliases. Therefore, `f-w-xs` will become `f-w-12-16`.
 
-| Prefix        | Example             | Definition                                   |
-|---------------|---------------------|----------------------------------------------|
-| `f-text`      | `f-text-32-64`      | font size                                    |
-| `f-m`         | `f-m-32-64`         | margin                                       |
-| `f-mt`        | `f-mt-32-64`        | margin top                                   |
-| `f-mr`        | `f-mr-32-64`        | margin right                                 |
-| `f-mb`        | `f-mb-32-64`        | margin bottom                                |
-| `f-ml`        | `f-ml-32-64`        | margin left                                  |
-| `f-mx`        | `f-mx-32-64`        | margin left and margin right                 |
-| `f-my`        | `f-my-32-64`        | margin top and margin bottom                 |
-| `f-p`         | `f-p-32-64`         | padding                                      |
-| `f-pt`        | `f-pt-32-64`        | padding top                                  |
-| `f-pr`        | `f-pr-32-64`        | padding right                                |
-| `f-pb`        | `f-pb-32-64`        | padding bottom                               |
-| `f-pl`        | `f-pl-32-64`        | padding left                                 |
-| `f-px`        | `f-px-32-64`        | padding left and padding right               |
-| `f-py`        | `f-py-32-64`        | padding top and padding bottom               |
-| `f-w`         | `f-w-32-64`         | width                                        |
-| `f-min-w`     | `f-min-w-32-64`     | min-width                                    |
-| `f-max-w`     | `f-max-w-32-64`     | max-width                                    |
-| `f-h`         | `f-h-32-64`         | height                                       |
-| `f-min-h`     | `f-min-h-32-64`     | min-height                                   |
-| `f-max-h`     | `f-max-h-32-64`     | max-height                                   |
-| `f-gap`       | `f-gap-32-64`       | gap                                          |
-| `f-gap-x`     | `f-gap-x-32-64`     | gap left and gap right                       |
-| `f-gap-y`     | `f-gap-y-32-64`     | gap top and gap bottom                       |
-| `f-intent`    | `f-intent-32-64`    | text intent                                  |
-| `f-leading`   | `f-leading-32-64`   | line height                                  |
-| `f-scroll-m`  | `f-scroll-m-32-64`  | scroll margin                                |
-| `f-scroll-mt` | `f-scroll-mt-32-64` | scroll margin top                            |
-| `f-scroll-mr` | `f-scroll-mr-32-64` | scroll margin right                          |
-| `f-scroll-mb` | `f-scroll-mb-32-64` | scroll margin bottom                         |
-| `f-scroll-ml` | `f-scroll-ml-32-64` | scroll margin left                           |
-| `f-scroll-mx` | `f-scroll-mx-32-64` | scroll margin left and scroll margin right   |
-| `f-scroll-my` | `f-scroll-my-32-64` | scroll margin top and scroll margin bottom   |
-| `f-scroll-p`  | `f-scroll-p-32-64`  | scroll padding                               |
-| `f-scroll-pt` | `f-scroll-pt-32-64` | scroll padding top                           |
-| `f-scroll-pr` | `f-scroll-pr-32-64` | scroll padding right                         |
-| `f-scroll-pb` | `f-scroll-pb-32-64` | scroll padding bottom                        |
-| `f-scroll-pl` | `f-scroll-pl-32-64` | scroll padding left                          |
-| `f-scroll-px` | `f-scroll-px-32-64` | scroll padding left and scroll padding right |
-| `f-scroll-py` | `f-scroll-py-32-64` | scroll padding top and scroll padding bottom |
+#### CommentHelpers
+This option allows you to add comments to the generated css.
+After setting this to true, you will be able to see the generated css in the browser inspector.
+```css{1,5}
+/* 20px -> 50px */ <-- This is the comment
+.f-p-lg {
+  padding: clamp(1.25rem, 0.5898rem + 2.8169vw, 3.125rem);
+}
+/* 32px -> 64px */ <-- This is the comment
+.f-p-32-64 {
+  padding: clamp(2rem, 1.2958rem + 3.0047vw, 4rem);
+}
+```

No alert changes

Improved metrics

Total package byte prevSize

18545

increased by1.15%

Lines of code

422

increased by25.97%

Worsened metrics

Number of lines in readme file

92

decreased by-20.69%

No dependency changes