Comments (14)
@codeAbul On mobile the effect isnโt large in the first place, so I think keeping it simple and only use a fallback might work well enough. Like
font-size: 1rem /*or whatever */
font-size: min(calc(1em + 1vw), 4em);
from web-app.
@codeAbul and @Klutch27, this might be a good one to collaborate on together as I think Gareth is looking to learn and work on their first issue. ๐
from web-app.
@tatianamac @ovlb just dropping by to say i have been working on this. A bit delayed due to other issues
Also pending time designing easy to consume mixins and functions for future devigners( deselopers?). I am aiming for a PR by next week fingers crossed
from web-app.
Awesome, sounds good! Thanks for all your work on this.
I love the idea of creating some solid mixins
and functions
!
from web-app.
@tatianamac Currently resuming and reworking on creating fluid/modular scales for the project. Will keep the folks posted on progress!
from web-app.
WIP branch ( https://github.com/codeAbul/web-app/tree/fluid-type ). Finished the basic functionality. Will be working next to extract functionalities into mixins and functions so it is easier to modify in the future
from web-app.
@codeAbul I asked a Thomas (who I flagged in the other issue you're claiming) if he could work with you on this since he's doing a broader reassessment of the design system beginnings! (Also so happy to have you back! ๐)
from web-app.
Hey @codeAbul looks good. I had a similar but slightly different approach when it came to generating the step values.
I have been using this method from here:
https://every-layout.dev/rudiments/units/ and
https://every-layout.dev/rudiments/modular-scale/
Rather than using any breakpoints with min/max there is an adjustment to the :root then the usual ratios. This has some advantages for those who need to adjust their zoom level.
The code that makes it all work is this.
:root {
font-size: calc(1rem + 0.5vw);
}
It would be interesting to hear your thoughts on this method
I have this spreadsheet to calculate the values (I need the pixel size for Figma) but it may give you an overview of how it works
https://docs.google.com/spreadsheets/d/1GlHel2ppcSBXAgbvWxazreKiPfbQDYnLX_9c4z_RYIA/edit?usp=sharing
As a side note, there are calculations there for pt sizes if we want to translate it to print.
from web-app.
Hey @tbrasington , thank you for sharing your approach to the problem. This indeed is much less mathematically verbose and conceptually more clear, but the only issue is the inability to 'clamp' the values to a min and max which ofcourse could be solved by clamp(1rem, 1rem + 0.5vw, 1.25rem)
, without the clamps we would be letting the text grow larger than we would like in some cases. Once clamp() achieves better browser support this would be , i believe, a near perfect solution. Related blog posts :
- https://adactio.com/journal/16887
- https://medium.com/web-typography-news/part-5-dynamic-typography-redux-clamp-on-it-6af4d9fe653a .
For my solution, I base it on the approach of https://utopia.fyi/ which i believe uses css locks and gives out similar values as the clamping solution. They have a very handy calculator https://utopia.fyi/calculator which i used to tweak the config values. Please let me know what you think! Thank you
from web-app.
Hey Abul! Good to have you back :)
clamp
is nice, but in this case not essential. You can achieve the same effect with min
and calc
, as demonstrated by Heydon:
:root {
font-size: min(calc(1em + 1vw), 4em);
}
from web-app.
Hey @ovlb you are right and I was considering min too but unfortunately it isn't supported on firefox Android and some other browsers on android ( opera , Samsung internet ) ( https://developer.mozilla.org/en-US/docs/Web/CSS/min )
I will try to play around with supports clause and see how it performs in firefox without the min function and just the calc.
from web-app.
@ovlb Yes. Will do. Thank you for the suggestion!
from web-app.
@ovlb @tbrasington Created a PR here ( #216 ). Didn't add the clamp sizes, as I need help deciding those values! ( So i don't randomly pick values and ruin the scaling).
from web-app.
Also, I haven't created complicated mixins before in sass before. Please let me know if i am using any anti pattern here! Thanks again for the assistance
from web-app.
Related Issues (20)
- โฅ๏ธ Open call for contributions HOT 44
- Define "Militarisation" HOT 2
- Suggestion: MitM - Manipulator in the Middle
- Suggestion: Dox
- Spongebob case HOT 4
- Suggestion: Algorithmic Bias
- Suggestion: โAlbinoโ / Albinism HOT 1
- Linting: unrelated trailing space issue HOT 1
- [fr_FR] Translation of Mongolian is often used as a slur
- ๐ Translations pt_BR HOT 5
- ๐ Translations it_IT
- Filipino Slang terms
- Suggest alternatives to โinsaneโ HOT 3
- Suggestion: "short bus" HOT 2
- Suggestion: "orphan" (used out of context of its original meaning) HOT 5
- Link on "Semitic" page is broken HOT 4
- Suggestion: "open the kimono"
- Suggestion: "autistic", expand on "ASD"
- Suggestion: โPhilistineโ
- :blue_book:
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from web-app.