argyleink / argyleink/open-props

Add container fluid props

Open
#274 2 comments 0 reactions 1 assignee Claimed by @argyleink View on GitHub
enhancement
Dominant language
HTML
Stars
5.5k
Forks
216
PR merge metrics
No merged PRs in 30d

Description

```css
...
--cq-size-fluid-2: clamp(1rem, 10cqw, 2rem);
...

padding: var(--cq-size-fluid-2);
```

just like the [viewport fluid sizes](https://github.com/argyleink/open-props/blob/main/src/props.sizes.css#L19-L28)

also add?

```css
font-size: var(--font-size-cq-fluid-2);
```

1. make a new file `src/props.container-sizes.js`
2. export new props like the viewport sizes
3. add the js file you made [here](https://github.com/argyleink/open-props/blob/main/build/props.js#L62) so it generates a source css file pair
4. add a [build step](https://github.com/argyleink/open-props/blob/main/package.json#L209) to bundle and minify for production the css file from step 3
5. add export for the js ([like this](https://github.com/argyleink/open-props/blob/main/package.json#L42)) and css file

tldr; make the props in a js file, generate a css file from that, bundle the file for production, add some exports for easy npm usage to package.json 😅

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.