diff --git a/docs/containers/FluidSizing/FluidSizing.tsx b/docs/containers/FluidSizing/FluidSizing.tsx
index 5d74ced..34d9832 100644
--- a/docs/containers/FluidSizing/FluidSizing.tsx
+++ b/docs/containers/FluidSizing/FluidSizing.tsx
@@ -19,7 +19,6 @@ export function FluidSizingContent() {
A fluid sizing utility function that creates a calc value based off of
the min and max values provided.{' '}
- Values are evaluated in "px".
@@ -30,9 +29,11 @@ export function FluidSizingContent() {
minElementSize: 'number',
maxElementSize: 'number',
minViewportWidth: 'number',
- maxViewportWidth: 'number'
+ maxViewportWidth: 'number',
+ unit: 'string'
}}
/>
+
This function writes a CSS rule that allows for fluid sizing.
Essentially, this eliminates the need for media queries as the element
@@ -41,6 +42,7 @@ export function FluidSizingContent() {
and also the minimum and maximum size of the viewport width that you
intend to use as constraints. Below is an example of how you may use it.
+
{fluidSizingExampleUsage}
diff --git a/docs/containers/FluidSizing/examples/fluidSizing.ts b/docs/containers/FluidSizing/examples/fluidSizing.ts
index 809695b..7d7df4e 100644
--- a/docs/containers/FluidSizing/examples/fluidSizing.ts
+++ b/docs/containers/FluidSizing/examples/fluidSizing.ts
@@ -4,7 +4,7 @@ export const fluidSizingExampleUsage = `
export const LargeLeadText = styled.p\`
color: hotpink;
- font-size: \${fluidSizing(20, 48, 300, 1200)};
- padding-bottom: \${fluidSizing(10, 15, 300, 1200)}
+ font-size: \${fluidSizing(1.3, 1.5, 300, 1200, 'rem')};
+ padding-bottom: \${fluidSizing(10, 15, 300, 1200, 'px')}
\`;
`;
diff --git a/packages/fluidsizing/README.md b/packages/fluidsizing/README.md
index 2018f75..ba051e6 100644
--- a/packages/fluidsizing/README.md
+++ b/packages/fluidsizing/README.md
@@ -20,20 +20,21 @@ npm install @artifak/fluidsizing
Below are the parameters and the following an example of usage.
-| Arguments | Type |
-| ---------------- | ------ |
-| minElementSize | number |
-| maxElementSize | number |
-| minViewportWidth | number |
-| maxViewportWidth | number |
+| Arguments | Type |
+| ---------------- | --------------------- |
+| minElementSize | number |
+| maxElementSize | number |
+| minViewportWidth | number |
+| maxViewportWidth | number |
+| unit | 'em' \| 'px' \| 'rem' |
```ts
import { fluidSizing } from '@artifak/fluidsizing';
import styled from 'styled-components';
const Paragraph = styled.p`
- font-size: ${fluidSizing(16, 96, 300, 1200)};
- line-height: ${fluidSizing(1.4, 1.6, 300, 1200)};
- padding-bottom: ${fluidSizing(10, 15, 300, 1200)};
+ font-size: ${fluidSizing(16, 96, 300, 1200, 'px')};
+ line-height: ${fluidSizing(1.4, 1.6, 300, 1200, 'rem')};
+ padding-bottom: ${fluidSizing(10, 15, 300, 1200, 'px')};
`;
```
diff --git a/packages/fluidsizing/__tests__/fluidsizing.test.ts b/packages/fluidsizing/__tests__/fluidsizing.test.ts
index a0abc29..08972ac 100644
--- a/packages/fluidsizing/__tests__/fluidsizing.test.ts
+++ b/packages/fluidsizing/__tests__/fluidsizing.test.ts
@@ -4,17 +4,23 @@ describe('fluidSizing - writes sizing CSS rule that dynamically adapts to screen
it('should return FALSE by default', () => {
const expected = '';
expect(
- fluidSizing(void 0 as any, void 0 as any, void 0 as any, void 0 as any)
+ fluidSizing(
+ void 0 as any,
+ void 0 as any,
+ void 0 as any,
+ void 0 as any,
+ void 0 as any
+ )
).toEqual(expected);
});
it('should return FALSE by when provided falsy arguments', () => {
const expected = '';
- expect(fluidSizing(void 0 as any, 96, 300, 1200)).toEqual(expected);
+ expect(fluidSizing(void 0 as any, 96, 300, 1200, 'px')).toEqual(expected);
});
it('should return a CSS string rule', () => {
const expected = `calc(48px + (96 - 48) * ((100vw - 300px) / (1200 - 300)))`;
- expect(fluidSizing(48, 96, 300, 1200)).toEqual(expected);
+ expect(fluidSizing(48, 96, 300, 1200, 'px')).toEqual(expected);
});
});
diff --git a/packages/fluidsizing/src/fluidSizing.ts b/packages/fluidsizing/src/fluidSizing.ts
index 34615b1..c604e34 100644
--- a/packages/fluidsizing/src/fluidSizing.ts
+++ b/packages/fluidsizing/src/fluidSizing.ts
@@ -2,12 +2,14 @@ export function fluidSizing(
minElementSize: number,
maxElementSize: number,
minViewportWidth: number,
- maxViewportWidth: number
+ maxViewportWidth: number,
+ unit: 'em' | 'px' | 'rem'
): string {
return !!minElementSize &&
!!maxElementSize &&
!!minViewportWidth &&
- !!maxViewportWidth
- ? `calc(${minElementSize}px + (${maxElementSize} - ${minElementSize}) * ((100vw - ${minViewportWidth}px) / (${maxViewportWidth} - ${minViewportWidth})))`
+ !!maxViewportWidth &&
+ !!unit
+ ? `calc(${minElementSize}${unit} + (${maxElementSize} - ${minElementSize}) * ((100vw - ${minViewportWidth}${unit}) / (${maxViewportWidth} - ${minViewportWidth})))`
: '';
}