Responsive scale
scottkellum opened this issue · comments
In responsive, the contrast between items on the scale may be too high or low. For example on small screens a smaller ratio can be used while on larger screens, larger ratios can be used to accommodate large type when possible while also allowing text to fit on screen.
Related: @gakimball responsive modular scale
As far as implementation goes, I see this working a little more like Singularitys use of breakpoint context in that I want it to auto-query the context or allow for manual context definitions instead of being mixin-based. This way, existing functions will work as expected and reliably adapt to different contexts in predictable ways. This implementation would use @context and locally scoped variables to get the job done, however configuration via maps would be preferable resulting in Sass compatibility issues.
Welp, changes in variable scoping is making this really hard to deal with across Sass versions.
See progress here: https://github.com/Team-Sass/modular-scale/tree/responsive-scales
Integrated the Breakpoint API for context querying and context changing mixins.
I love the responsive scales, I have a question though.
I set three ranges of
1 20em,
1 40em,
1.333 64em;
How exactly can I use
@include ms-respond(font-size, 2); ?
I am seeing my font-sizes responsive across various viewport sizes but I am not sure where these sizes are coming from? The font-size in @include ms-respond(font-size, 2); is coming from where? The second value which is the point in the scale that I want to use, how do I determine what number to use and where are these font-sizes coming from? The larger the number, the larger the font-size but how is this related to the three ranges I created above?
Thanks
@christiantype What are you trying to achieve here? Why did you choose these values for your range? I would like to gain a little more understanding as to your goal with this code so I can better help you in implementing it.
@christiantype Also, feel free to open new issues for help as threads for implementing new features have different trajectories and goals than threads for help.