Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chialab/cells
🪡 A strongly opinionated modular utility-first CSS library.
https://github.com/chialab/cells
css css-framework functional-css layout utility-classes
Last synced: 1 day ago
JSON representation
🪡 A strongly opinionated modular utility-first CSS library.
- Host: GitHub
- URL: https://github.com/chialab/cells
- Owner: chialab
- License: mit
- Created: 2022-02-06T16:30:29.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T13:53:44.000Z (17 days ago)
- Last Synced: 2024-10-28T16:58:19.387Z (17 days ago)
- Topics: css, css-framework, functional-css, layout, utility-classes
- Language: HTML
- Homepage: https://chialab.github.io/cells/
- Size: 327 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Cells
A **strongly** opinionated modular utility-first CSS library.
## Why
**Cells** looks like just any another utility-first CSS library like bootstrap, tailwind and unocss, but it has a slightly different scope. The library is designed to work as a configurable primer for themable components library and frontend skeletons.
Since it does not try to cover the entire styling experience of a project, it does not require build-time optimizations. You can import base custom properties and classes using plain CSS imports and load opinionated rules from the provided presets.
> Please note that **Cells** does not aim to compete in the CSS frameworks market. It will evolve in the only interest of our development teams, but we are happy to share and discuss design choices with other developers.
**Cells** is distribuited as plain CSS files. You can import the whole library using the `index.css` file or single modules from the `lib` folder. Each module is configurable using CSS custom properties.
Implemented modules:
- **Spacing** defines base spacing variables
- **Colors** defines base theming variables such as `primary`, `secondary` and `accent` colors and base text and background colors classes
- **Typography** defines base variables for families, weights and size scale, as well as declinated classes for composition
- **Layout** contains classes for general grid layout, as well as utility classes for flexbox specs
- **Paddings** contains classes to set incremental paddings, from `p-0` to `p-10` and with `px`, `py`, `pt`, `pr`, `pb`, `pl` variants
- **Margins** contains classes to set incremental margins, from `m-0` to `m-10` and with `mx`, `my`, `mt`, `mr`, `mb`, `ml` variants
- **Borders** contains `radius-N` classes for rounded borders
- **Shadows** contains both classes for inset shadows, from `deep-1` to `deep-4`, and drop shadows from `elevation-0` to `elevation-10` plus `elevation-12`, `elevation-186` and `elevation-24`
- **Outline** customizes the global page outline for keyboard navigation
- **Scollbar** contains classes to customize scrollbars
Presets:
- **Website** configures the grid layout for each viewport (mobile 4 columns, tablet portrait 6 columns, tablet landscape 8 columns, desktop 12 columns)
## Usage
[](https://www.npmjs.com/package/@chialab/cells)
You can install and consume **Cells** with [`npm`](https://www.npmjs.com/):
```
npm i @chialab/cells
```
```
yarn add @chialab/cells
```
and import it in your stylesheet:
```css
@import '@chialab/cells';
```
---
## Correctly set `--window-width` variable.
Viewport units (`vw`, `vh`) do not take into account scrollbars width. To solve this problem we have introduced the `--window-width` variable that can be set using the following JavaScript snippet:
```js
function updateViewportSize() {
document.documentElement.style.setProperty('--window-width', `${document.body.clientWidth}px`);
}
updateViewportSize();
window.addEventListener('resize', updateViewportSize);
```
---
## License
Cells is released under the [MIT](https://github.com/chialab/cells/blob/main/LICENSE) license.