Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@chialab/cells
Advanced tools
Changelog
1.5.4
Readme
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';
or using the unpkg CDN:
<link rel="stylesheet" href="https://unpkg.com/@chialab/cells/lib/index.css" />
@import 'https://unpkg.com/@chialab/cells/lib/index.css';
--window-width
variable.Viewport units (vw
, vh
) do not take into account scrollbars width. In Cells, we use the overflow: overlay;
property in order to avoid horizontal scrolling when using 100vw
in mobile viewports, but that property is not a safe cross-browser solution and will be removed in the next major iteration of Cells. From 1.5.0, 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.
The npm package @chialab/cells receives a total of 224 weekly downloads. As such, @chialab/cells popularity was classified as not popular.
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 2 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.