BoldGrid / boldgrid-theme-framework

The BoldGrid Theme Framework used in BoldGrid themes.
https://www.boldgrid.com/theme-framework/
GNU General Public License v3.0
17 stars 7 forks source link

Add responsive font controls #84

Closed boldgrid-support closed 2 years ago

boldgrid-support commented 5 years ago

Is your feature request related to a problem? Please describe. Some Headings are too large when viewed on a mobile screen and there is no option to set specific font sizes for various devices.

Describe the solution you'd like Add controls in the Customizer to allow for site wide defaults to control fonts across the range of devices.

Describe alternatives you've considered Currently you need to use custom CSS code to address these display problems.

timelsass commented 5 years ago

This is dependent on quite a few other changes that have to happen, but typography is something that needs to be changed. I don't think we will add controls for different viewport sizes in the theme though, but it is a possibility.

Just as an initial idea, I originally thought of doing something along the lines of this pen: https://codepen.io/times/pen/qGWXer

That's using the typography scale defined for heading sizes(bootstrap), but I'd like to introduce some "scale" controls which would change the typography rhythm used. As an example of this, look at the site modularscale.com.

Overall, I'd like to see a solution taking the typography scales mentioned above, and then setting some minimum and maximum thresholds for the viewpoints. We can then use the linear interpolation technique shown in the pen above to allow for sizing the relationships between viewports automatically, all based on the user scaling the content size fluidly. Once this is implemented it will be trivial to add controls in for a custom scale, so everything can be controlled in a more visual way.

There's more to it all, but ideally I want to remove the bootstrap dependency we currently have first. There's been a large amount of work to getting to that point put forth so far, but typography is one of the bigger barriers left.

jessecowens commented 3 years ago

@jamesros161 this feature has been requested by another user in the BoldGrid Support Forums.

nicolepaschen commented 2 years ago

wpbex3 server / Chrome / W3TC not active / Crio Pro is not active either

I changed the heading and body fonts. The heading font pulls thru to the PPB as expected but the body font stays Roboto (default config). On the Add Block screen, the right side shows the correct font but as soon as I add it to the page it reverts. The body font size is incorrect as well.

fonts

jamesros161 commented 2 years ago

wpbex3 server / Chrome / W3TC not active / Crio Pro is not active either

I changed the heading and body fonts. The heading font pulls thru to the PPB as expected but the body font stays Roboto (default config). On the Add Block screen, the right side shows the correct font but as soon as I add it to the page it reverts. The body font size is incorrect as well.

fonts

This SHOULD be as simple as enqueueing the custom CSS for this in PPB. The control I created was entirely custom, not a Kirki control, so I have to add enqueue the styles from it separately

nicolepaschen commented 2 years ago

Buttons should not respond to the main text responsive values - since they are getting a new control in the Customizer responsive controls should be there.

Also we need to consider how the padding should change on the button as font size does. image image

nicolepaschen commented 2 years ago

[needs discussion]

Could extend to:

nicolepaschen commented 2 years ago

Font weights do not change in the live preview:

variant-live-preview