Security News
38% of CISOs Fear They’re Not Moving Fast Enough on AI
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
@signal-noise/stylelint-scales
Advanced tools
A Stylelint plugin pack of rules for enforcing scales.
npm install @signal-noise/stylelint-scales --save-dev
Add stylelint-scales
to your Stylelint config plugins array, then add the rules you need to the rules list. All rules from stylelint-scales
need to be namespaced with scales
.
Like so:
{
"plugins": ["@signal-noise/stylelint-scales"],
"rules": {
"scales/alpha-values": [80, 90],
"scales/border-widths": [{ "scale": [1, 2], "units": ["px"] }],
"scales/font-families": ["system-ui"],
"scales/font-sizes": [
{ "scale": [1, 1.5, 2], "units": ["em", "rem"] },
{ "scale": [12, 14, 16], "units": ["px"] }
],
"scales/font-weights": [400, 600],
"scales/line-heights": [1, 1.5],
"scales/radii": [{ "scale": [2, 4], "units": ["px"] }],
"scales/space": [{ "scale": [0.5, 1, 2, 4], "units": ["rem"] }]
}
}
To enforce this:
p {
border: 1px solid hsl(var(--accent) / 90%));
border-radius: 2px;
font: 400 1rem/1.5 system-ui;
margin-block: 2rem;
}
This plugin can automatically fix all the numeric scales.
alpha-values
: Specify a scale for alpha values (Autofixable).border-widths
: Specify a scale for border widths (Autofixable).font-families
: Specify a scale for font families.font-sizes
: Specify a scale for font sizes (Autofixable).font-weights
: Specify a scale for font weights (Autofixable).letter-spacings
: Specify a scale for letter spacings (Autofixable).line-heights
: Specify a scale for line heights (Autofixable).radii
: Specify a scale for radii (Autofixable).sizes
: Specify a scale for sizes (Autofixable).space
: Specify a scale for space (Autofixable).word-spacings
: Specify a scale for word spacings (Autofixable).z-indices
: Specify a scale for z-indices (Autofixable).Ref: Styled System Keys Reference
You and the designers should define the scales together. You'll want to strike a balance between code consistency and design flexibility.
This plugin can help you create:
When designers review websites in the browser, they generally use relative terms. For example, "The space between that heading and that paragraph feels too tight, can we make it bigger?"
You can then pick the next value on the scale and be confident that it'll be consistent with the overall design.
While you can achieve something similar with variables, with this plugin you:
unit-allowed-list
to enforce consistent units. By using this plugin, you avoid adding a second mechanism (variables) to ensure design consistency. Additionally, you'll need to enforce the use of variables with linting anyway to avoid relying on developer discipline.Thanks goes to these wonderful people (emoji key):
Richard Hallows 💻 |
This project follows the all-contributors specification. Contributions of any kind welcome!
FAQs
A plugin pack to enforce scales within Stylelint
We found that @signal-noise/stylelint-scales demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.
Research
Security News
Socket researchers uncovered a backdoored typosquat of BoltDB in the Go ecosystem, exploiting Go Module Proxy caching to persist undetected for years.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.