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.
bendable
Advanced tools
Readme
Fluid & responsive type scales with composable CSS utilities. See the blog post for a more in-depth exploration of the type scaling mechanism.
Download bendable.css
, or run:
npm install bendable
To create a header that scales between the minimum and max values of the type scale, between the smallest and largest supported viewport, add the font-1
and 5xl:font-14
classes:
<h1 class="font-1 5xl:font-14">Scale all the things</h1>
This example introduces two concepts: minimum values (font-x
) and font size targets (viewport:font-x
). A target font size is a font size that will cause the size to scale smoothly from the smaller viewport towards its target at the larger viewport. In bendable, however, both breakpoints and targets exist as distinct mechanisms, where breakpoints doesn't affect the calculated font size until it sets the intended value at a certain viewport width.
Mixing breakpoints and targets could, for example, look like this:
<h1 class="font-1 font-3@md font-3@xl 5xl:font-14">Scale all the things</h1>
This set of utilities will keep the font static until the viewport reaches a medium size, where it jumps to the third step on the typescale. It keeps that size until the viewport hits its xl
size, where it starts scalling smoothly towards 14
at 5xl
.
Importantly, you don't have to scale up as the viewport size increases: you can equally scale down, for example:
<h1 class="font-1 font-2@sm sm:font-4 font-6@md font-3@xl">Whereas recognition of the inherent dignity</h1>
See playground.html
for a more comprehensive list of examples and techniques.
This is an early release to showcase and explore the technique's potential and limitations—feedback and contributions are highly appreciated.
FAQs
Fluid & responsive type scales with composable CSS utilities
The npm package bendable receives a total of 0 weekly downloads. As such, bendable popularity was classified as not popular.
We found that bendable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.