twbs / rfs Goto Github PK
View Code? Open in Web Editor NEW✩ Automates responsive resizing ✩
License: MIT License
✩ Automates responsive resizing ✩
License: MIT License
What are your thoughts on changing the algorithm to be mobile-first (i.e. take font size on mobile as the argument and use min-width in the output)?
Ultimately the effect could be the same, but readability could be better for those accustomed to writing for mobile-first (of which there are many).
Or another option might be to just add a mixin for mobile-first sizing.
Stylus variables can not be overridden. Use ?=
when variables are declared.
v8
will ship with the following changes:
Usage
font-size
mixin as default. This will be the clearest for those who are not familiar with RFS. rfs
and responsive-font-size
mixins are kept as aliases.Configuration changes
$rfs-minimum-font-size
to $rfs-base-font-size
because technically it's not a minimum font size.$rfs-base-font-size
from 1rem
to 1.25rem
which will prevent unneeded rescaling for smaller font sizes$rfs-factor
from 5
to 10
to make sure bigger font size won't cause troubles on smaller viewports.Build
Meta
Bootstrap
Ship checklist
Thank you for RFS library
We started to adopt the library in one of our key product modules.
But we do face an issue of standard coding standard practice on
Expected 0 spaces before semicolon in style definition; 1 found
The following
// Set the calculated font-size
$rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
Could be
// Set the calculated font-size
$rfs-fluid: calc(#{$min-width} + #{$variable-width})#{$rfs-suffix};
for Example: in a SCSS file
.horizontal-media-teaser-view-mode.large {
.field--name-node-title {
h3 {
@include font-size(1.8rem);
}
}
}
Will result of that in CSS file
.horizontal-media-teaser-view-mode.large .field--name-node-title h3 {
font-size: 1.8rem;
}
@media (max-width: 1200px) {
.horizontal-media-teaser-view-mode.large .field--name-node-title h3 {
font-size: calc(1.305rem + 0.66vw) ;
}
}
Expected 0 spaces before semicolon in style definition; 1 found
It should be
.horizontal-media-teaser-view-mode.large .field--name-node-title h3 {
font-size: 1.8rem;
}
@media (max-width: 1200px) {
.horizontal-media-teaser-view-mode.large .field--name-node-title h3 {
font-size: calc(1.305rem + 0.66vw);
}
}
Thank you :)
My code was not working and then I realized it was a a problem at line 103:
@media (max-width: #{$mq-max-width}) {
font-size: calc(#{$min-width} + #{$variable-width})#{$rfs-suffix};
}
If you add a space before the $rfs-suffix it will work just fine!
@media (max-width: #{$mq-max-width}) {
font-size: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
}
Husky ran all tests when we commit, even when we only change documentation which is a bit annoying.
Today I came across https://github.com/Arkweid/lefthook, where you can define git hooks per filetype, which looks interesting.
$rfs-minimum-font-size-unit
is now set to px
by defaultrem
-units can now be used for spacing while it doesn't influence the font-size.
$rfs-minimum-font-size
is set to 14px
by default12px
was a bit to low to be readable on mobile devices.
$rfs-minimum-font-size
can now be configured in px
and rem
$rfs-breakpoint
can now be configured in px
, em
and rem
rem
-unitsResponsive font sizing will apply if font-sizes in rem
are used:
@include rfs(1.25rem);
Quickly disable responsive font sizes by setting$enable-responsive-font-sizes
to false
Edit: nevermind, shiplist ain't that big
For v10
, I'm planning to use a function instead of a mixin. The main reason is the min()
technique described in #110 doesn't need to generate a media query any more. I'm thinking about a function called rfs()
or responsive()
(which might be a bit clearer). Or maybe work with an alias like we do now.
Other positive side effects are:
height
, padding
or margin
.mixin
because you know it's going to a value and not "some lines of code"Only downside is that the disabled/enabled classes won't work anymore, but I don't think that's really an issue.
.title {
padding: rfs(2rem);
font-size: rfs(4rem);
}
would generate:
.title {
padding: min(2rem, calc(1.325rem + 0.9vw));
font-size: min(4rem, calc(1.525rem + 3.3vw));
}
Browser support is still an issue. Browser support so far:
Create a github.io page with demo's and stuff
Yesterday I discovered you can just @import .sass
in .scss
files and vice versa. I used to use this gist to convert the scss version to the sass version:
https://gist.github.com/bds/2207826#file-gistfile1-sh-L1
But yeah, maybe it's just better to remove one of these files in v8, because there is no reason to both keep them and their examples.
This doesn't seem to behave the same on Safari (tested on 11.0.2). On the CodePen example, changing the window size in Chrome results in the font resizing from 16px down to around 14.5px, but on Safari it does not decrease below around 15.7 px.
The font sizes do not rescale in iframes in safari when the iframe is rescaled. It's possible to avoid this by adding min-width: 0vw;
in the media queries of RFS.
This is not the most ideal solution, and should be disabled by default.
Demo: https://codepen.io/MartijnCuppens/pen/djYBGW
In this demo another codepen is secretly loaded which adds some dirty code to fix this: https://codepen.io/MartijnCuppens/pen/ZBjdMy?editors=1100
The tests do the job, but the code looks a bit like it's written by a CSS developer. Not sure what the best practices are here. xo
also throws a warning about the nesting.
Minimum is not really correct, font sizes can still be smaller. base would be more fitting.
This is something that needs to be written in the changelogs
I was wondering if it's possible to have responsive text that fits to the size of the container instead of the width/height of the viewport.
My users are allowed to add/delete text to a div via a form input. I'd like the text to resize to fit the available space as they type (so basically, as they type more, the font size gets smaller).
I'm using PostCSS with Parcel bundler but am having trouble using :root CSS variables
:root {
--font-xl: 24px;
}
p {
responsive-font-size: var(--font-xl); /* doesn't work */
responsive-font-size: --font-xl; /* doesn't work */
}
It's simple to do with SASS but im not sure it's possible with CSS variables, any ideas?
I try to use rfs with nuxtjs which seems to work fine
but my custom options doesn't show any effect.
I also tried it with the current v9 branch.
I tried to change the breakpoint from 1200 to 1920.
relevant nuxt.js part
build: {
postcss: {
plugins: {
"postcss-import": {},
tailwindcss: path.resolve(__dirname, "./tailwind.config.js"),
"postcss-rfs": {
twoDimensional: false,
baseValue: 20,
unit: "rem",
breakpoint: 1920,
breakpointUnit: "px",
factor: 10,
class: false,
unitPrecision: 6,
safariIframeResizeBugFix: false,
remValue: 16
},
"postcss-advanced-variables": {},
"postcss-nested": {},
"postcss-hexrgba": {},
"postcss-percentage": {}
},
// Change the postcss-preset-env settings
preset: {
stage: 0,
autoprefixer: {
cascade: false,
grid: true
}
}
},
}
The title seems silly, but let me explain:
Let say I want a 50px font-size at 1200px breakpoint. Actual behaviour will set this at the maximum font-size. Would it be legit to have an extra breakpoint setting as a "helper" ? The font-size is at 50px when it reach 1200px viewport, but continue to scale as the viewport do.
Would like to set the rfs size in a variable but not able. Is there a good way to do this?
Have a look at linting the CSS and JS and add appropriate scripts.
xo
for js lintingstylelint
for CSS lintingThe Bootsrap PR (twbs/bootstrap#23816) is slightly out of sync with this repo.
v7.1.9
to the PRHi,
can you please add an explanation how do all lines actually work in Visualization graph? X and Y axis are kinda self-explanatory, however what about different colors used there? It is hard to get it without any context or a legend. Is it about the factor variable?
In previous versions of BS before this RFS was added, I often liked to set the html{ font size:62.5% }
which made the base font size 10px and all the rem calculations were much easier to calculate as everything was base 10 vs base 16.
Now when trying this same trick with the responsive typography turned on, the fonts using RFS all get bigger initially when it hits the 1200 breakpoint before scaling down. They end up scaling down proportionally from that larger size rather than the size I have set. I figure it has something to do with the html element font size adjustment but cant quite figure out why.
Is this trick not supported anymore with this technique or will it require some different configuration with the variables? Ive been trying all sorts of different things with the $rfs-base-font-size
& $rsf-factor
variables to no avial.
seems that rfs doesn't work with em units in sass .
is that intentional action?
Thank you for sharing this! It's a fantastic technique that seems to solve a lot of problems.
One suggestion/request is to add to Bower.io for maintainability and integration into projects.
Hi, first of all, thank you for your work. 👍
I have a question, i set the $rfs-two-dimensional true to enable the two dimensional media queries in height, but i need an $rfs-breakpoint for screen height aswell, to block the maximum font size, like i can do with $rfs-breakpoint for screen width.
EDITED: I need different sizes for width and height (example 1440 por width and 1024 for height).
Is there a way to do that?
Thank you in advance.
Wondering if it's possible to set up a set of breakpoints and set a specific size to scale down to?
For example:
> 1024, H1 = 96
< 1024 but > 768, H1 = 76px
> 768 but > 480, H1 = 48px
< 480, H1 = 36px
Also, can the rounding be controlled to be whole numbers, or at least to 1 or 2 decimals?
thank you!
Currently package.json
contains the gulp-examples
and node-examples
scripts which can be ran to check if the changes had an impact on the examples.
Would be better if this was done with the npm test
command.
Todo:
I've recently updated our project's Bootstrap version to the latest (4.3.1). I'm importing all of Bootstrap via node_modules. I haven't modified the RFS mixin in any way. I'm using the version that ships with Bootstrap 4.3.1 as configured by default. Bootstrap is compiling just fine with the exception of this particular RFS issue.
The media query is not being generated in my current environment. It is a large project with many dependencies and I'm pretty much shooting the dark trying to come up with a reduced test case. I realize that that makes helping me with this issue very difficult if not impossible. But I'm desperate at this point.
Also, I'm reasonably sure (say, 99%) this is a me problem, not an RFS problem, but I haven't been able to sort the issue.
I'm invoking the mixin as follows:
.my-test {
@include rfs(3rem);
}
Note that this font size is greater than the minimum font size of 1.25rem at or below which no scaling will take place. So, that's not the issue.
I've also tried invoking the aliased versions of the mixin:
.my-test {
@include responsive-font-size(3rem);
}
and
.my-test {
@include font-size(3rem);
}
I've tried it with rem
, px
, and unitless values.
The mixin is definitely being recognized and is halfway working. I.e., it compiles out to regular CSS without a hitch.
So, the code above does indeed generate the following CSS:
.my-test {
font-size: 3rem;
}
But, again, no media query (at 1200px
) is being generated by the mixin in my current environment and, thus, no downward scaling is taking place below the 1200px threshold.
At screen widths below 1200px
, I would expect to see something similar to the following:
@media (max-width: 1200px) {
.my-test {
font-size: calc(1.525rem + 3.3vw);
}
}
But, no dice.
Again, I haven't modified the default configuration of the RFS mixin in any way, and it does appear to be halfway working, as it's compiling out to CSS.
Tried in my coworker's environment and he gets the same results. But, that's expected, as we have pretty similar local environments, I suppose.
I hate to clutter up your issues with something that's in all likelihood not an issue with RFS (which is awesome -- using it on other projects), but SO hasn't turned up any leads so far.
Any suggestions for how to debug?
Thanks.
I didn't bump the latest versions with npm version
so there are some git tags missing.
Todo:
For example like it's done here: http://getbootstrap.com/docs/4.1/getting-started/theming/#sass
Just tested on my project but maybe i left something here because it does not generate @media query
style.scss
@import '../../rfs';
p {
@include rfs(17);
}
the output
p {
font-size: 1.0625rem;
}
so how to generate the media query? by the way i'm using Bulma
thanks
Hi,
I just discovered your mixin, it seems to be awesome !
Correct me if I'm wrong, but I found a bug in the stylus version : rfs(64)
produce font-size: 64
in CSS.
I think the problem is line 60 of the stylus version, you forgot the unitless test like in the SASS version.
Replacing
(unit($fs) != "px" and unit($fs) != "rem")
by this seems to do the job
(unit($fs) != "" and unit($fs) != "px" and unit($fs) != "rem")
P.S : I also think would be better to put unit($fs) in a variable to avoid repeating it in the if block
Hello, I'm trying to import rfs.scss from node_modules into my project but keep getting the following error when Webpack tries to compile my Sass files:
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
'~rfs/scss',
Can't find stylesheet to import.
'~rfs/scss',
I am able to import other CSS/SCSS files using:
@import
'~normalize.css/normalize',
'~sass-mq',
'~rfs/scss',
'~flickity/css/flickity';
It could be my setup, but RFS seems to be the only one throwing an error.
Any insight is appreciated and thanks for the great mixin.
You can currently use the responsive-font-size
property to make RFS work in PostCSS, but it feels a bit weird. I'm thinking about changing the implementation from
responsive-font-size: 4rem;
to
font-size: rfs(4rem);
I'm not sure yet though, if anyone has got an opinion on this, let me know here
I've installed RFS with yarn and imported it from the node_modules
into my main.scss
file. I then created a rfs-settings.scss
file in my scss directory and copy paste the RFS configuration from the source in node_modules
.
When changing $rfs-minimum-font-size
from 1rem
to 2rem
in my newly created rfs-settings.scss
nothing changes. This is probably due to the !default
parameter. I then removed !default
and run into the following bug.
Original Config with !default
// Config
$rfs-minimum-font-size: 1rem !default;
// CSS Output
font-size: calc(1.025rem + 0.13333333vw);
Changed Config without !default
// Config
$rfs-minimum-font-size: 1rem;
// CSS Output
font-size: calc(0.275remrem + 1.13333333remvw);
The CSS Output is wrong. It shouldn't write rem
.
The codepen files where once used to generate to impress people with this sublime codepen: https://codepen.io/MartijnCuppens/pen/qpNpoY, but there's no need to keep this code in the repo.
Hopefully one day the min()
function will be implemented by all major browsers and that could simplify RFS a lot. Instead of the mixin, we can make use of a function to generate the value.
For example:
.title {
padding: rfs(2rem);
font-size: rfs(4rem);
}
would generate:
.title {
padding: min(2rem, calc(1.325rem + 0.9vw));
font-size: min(4rem, calc(1.525rem + 3.3vw));
}
Other positive side effects are:
mixin
because you know it's going to a value and not "some lines of code"Only downside is that the disabled/enabled classes won't work anymore, but I have no clue if this feature is even used.
Currently Safari kind of supports min()
, but it's still not perfect when resizing without the safari iframe hack (#14): https://codepen.io/MartijnCuppens/pen/ywaJpW
Browser support is still an issue. Browser support so far:
This is more of a general question, but my usual approach to scaling websites is setting a font size in pixels on the html element, setting font-size to 1rem on body and then scaling the html elements font size on larger screens. eg.:
html {
font-size: 14px;
}
@media (min-width: 980px) {
html {
font-size: 16px;
}
}
body {
font-size: 1rem;
}
Then, with this configuration in place, i define my margins, paddings etc. with rem units so everything scales nicely with the global font size. See this example for instance: https://codepen.io/Ahrengot/pen/KExwVv
I like the fluid font sizing this tool provides, rather than the sudden jumps I get from my current solution, but I can't use this tool for anything outside of the font-size
css property, can I?
I'd really rather not go back to a place where I need to manually update all of the paddings, margins etc when my font sizes change, but I might have overlooked something in the documentation.
Any input or suggestions are highly appreciated!
Right now, I'm the only maintainer of this project. I might need some reinforcements in the future to ensure decisions that are made are supported by visions of multiple people. That's why I'm going to move this project to a company independent organisation.
!important
rules: @include rfs(1rem !important)
instead of @include rfs(1rem, true)
max-width
media queries if neededpx
-values should always have a unit now. In v8
, RFS assumed every unitless value was set in px
(eg. @include rfs(32)
), but since we can now pass numbers too (eg. @include rfs(1 1 30rem, flex)
, this behaviour is changed.responsive-font-size
property changed to rfs()
function (see #116)responsive-font-size
mixins/test/expected/main.css
postcss-value-parser
dependency added to parse values in PostCSS plugin.// $enable-rfs: false;
to see the difference)I'm sure there's a good reason to why the base font size is set as a global variable, but could it be an idea to let it be overridden by adding it as a parameter to the function call?
@mixin rfs($fs, $fs-min: $rfs-base-font-size, $important: false)
The typography is sometimes, in my opinion, scaled down too much when working with a mix of large and small font sizes.
I have tried this project with PostCSS and cannot get it to work, could you please provide an example of how to use correctly?
I've been using the rfs v 7.1.4 since the last 2 months without a problem. I recently started a new Project and did a npm install
followed by the project execution.
I noticed the below error:
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss) Module build failed: @error "
#{$rfs-breakpoint-unit}is not a valid unit for $rfs-breakpoint-unit. Use
px,
emor
rem."; ^ `` is not a valid unit for $rfs-breakpoint-unit. Use
px,
emor
rem.
I reviewed the documentation to check for any breaking changes or whether I had to explicitly specify the rfs-breakpoint-unit (and I tried doing that) but it didn't work.
On a bit of investigation, I could see that there has been a new version upgrade to v7.1.8.
I then reverted to the previous version with npm install [email protected] --save
and things worked as expected -- no error. (I do see a difference in the packages between 7.1.4 and 7.1.8)
Am I missing something in the new release ? Please advise.
At this moment, the font size only rescales based on the screen width, not the screen height. A side-effect of this is that font-sizes of portrait and landscape can differ a lot. To prevent this, I'll add an option to change the rendering like this:
SCSS:
.title {
@include rfs(62);
}
CSS:
.title {
font-size: 62px;
}
@media (max-width: 1200px), (max-height: 1200px) {
.title {
font-size: calc(23.6px + 3.2vmin);
}
}
And with $rfs-mobile-first
set to true
:
.title {
font-size: calc(23.6px + 3.2vmin);
}
@media (min-width: 1200px) and (min-height: 1200px) {
.title {
font-size: 62px;
}
}
This option ($rfs-two-dimensional
) will not be enabled by default (yet).
Currently we have one file in the scss
, stylus
,.. folders. This just increases the file path length. These paths could be changed so that it would be easier to include the mixins:
For example for less:
@import "~rfs/less"
Latest version of less (3.0.0) throws an error:
Potentially unhandled rejection [2] TypeError: Cannot read property 'eval' of null
at Array.<anonymous> (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/variable.js:33:27)
at Node.Variable.find (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/variable.js:48:17)
at Node.Variable.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/variable.js:26:21)
at Node.Expression.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/expression.js:31:37)
at Node.MixinCall.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/mixin-call.js:60:30)
at Node.Ruleset.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/ruleset.js:126:26)
at Node.Ruleset.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/ruleset.js:156:50)
at Node.Definition.evalCall (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/mixin-definition.js:150:23)
at Node.MixinCall.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/mixin-call.js:135:46)
at Node.Ruleset.eval (/Users/martijn.cuppens/workspace/rfs/node_modules/less/lib/less/tree/ruleset.js:126:26)
Probably an error in less, but no idea what causes this.
Less 2 is safe to use.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.