@chialab/cells
v1.6.0
Published
A strongly opinionated modular utility-first CSS library.
Downloads
859
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
andaccent
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
top-10
and withpx
,py
,pt
,pr
,pb
,pl
variants - Margins contains classes to set incremental margins, from
m-0
tom-10
and withmx
,my
,mt
,mr
,mb
,ml
variants - Borders contains
radius-N
classes for rounded borders - Shadows contains both classes for inset shadows, from
deep-1
todeep-4
, and drop shadows fromelevation-0
toelevation-10
pluselevation-12
,elevation-186
andelevation-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
You can install and consume Cells with npm
:
npm i @chialab/cells
yarn add @chialab/cells
and import it in your stylesheet:
@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:
function updateViewportSize() {
document.documentElement.style.setProperty('--window-width', `${document.body.clientWidth}px`);
}
updateViewportSize();
window.addEventListener('resize', updateViewportSize);
License
Cells is released under the MIT license.