Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
@chialab/cells
Advanced tools
A strongly opinionated modular utility-first CSS library.
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:
primary
, secondary
and accent
colors and base text and background colors classesp-0
to p-10
and with px
, py
, pt
, pr
, pb
, pl
variantsm-0
to m-10
and with mx
, my
, mt
, mr
, mb
, ml
variantsradius-N
classes for rounded bordersdeep-1
to deep-4
, and drop shadows from elevation-0
to elevation-10
plus elevation-12
, elevation-186
and elevation-24
Presets:
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';
--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);
Cells is released under the MIT license.
FAQs
A strongly opinionated modular utility-first CSS library.
We found that @chialab/cells demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.