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.
poly-fluid-sizing
Advanced tools
Readme
Poly Fluid Sizing is a SASS mixin to linear interpolation size values using calc() across multiple breakpoints. It uses some basic math behind the scenes. You don't need to know the math or understand it to use this mixin.
// Import Poly Fluid Sizing mixin
@import 'poly-fluid-sizing';
h1 {
@include poly-fluid-sizing('font-size', (320px:18px, 768px:26px, 1024px:38px, 1440px:46px));
}
This outputs the following CSS (The comments are not generated and are only here for clarity)
h1 {
/* The minimum font-size */
font-size: 18px;
}
@media (min-width: 320px) {
h1 {
/* Interpolate the font-size between 18px @ 320px and 26px @ 768px viewport */
font-size: calc(1.78571429vw + 12.28571429px);
}
}
@media (min-width: 768px) {
h1 {
/* Interpolate the font-size between 26px @ 768px and 38px @ 1024px viewport */
font-size: calc(4.6875vw - 10px);
}
}
@media (min-width: 1024px) {
h1 {
/* Interpolate the font-size between 38px @ 1024px and 46px @ 1440px viewport */
font-size: calc(1.92307692vw + 18.30769231px);
}
}
@media (min-width: 1440px) {
h1 {
/* The maximum font-size */
font-size: 46px;
}
}
font-size
Using Poly Fluid Sizing on font-size
is an obvious use case. But it can be used for any CSS property that uses a numeric size value. For example, padding
, margin
, border-width
, margin-left
, etc...
section {
@include poly-fluid-sizing('margin-right', (768px:40px, 1024px:60px));
}
blockquote {
@include poly-fluid-sizing('padding', (768px:30px 15px, 1024px:50px 25px));
}
The SASS map that is passed into the mixin can be in any order. It doesn't have to be ordered from smallest viewport to largest viewport. The functions will automatically sort it for you. This is perfectly valid syntax:
article {
@include poly-fluid-sizing('font-size', (1024px:22px, 500px:16px, 1440px:24px, 768px:18px));
}
2em
font-size
@ 786px
viewport width. SASS just really won't know what to do mathematically when 1 value is using em
and the other is using px
.Smashing Magazine: Fluid Responsive Typography With CSS Poly Fluid Sizing
Medium.com/@jakobud CSS Poly Fluid Sizing using calc(), vw, breakpoints and linear equations
FAQs
SASS mixin for linear interpolation between multiple values across multiple breakpoints using CSS calc() and viewport units
The npm package poly-fluid-sizing receives a total of 1,794 weekly downloads. As such, poly-fluid-sizing popularity was classified as popular.
We found that poly-fluid-sizing demonstrated a not healthy version release cadence and project activity because the last version was released 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.