Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert absolute units to relative units #89

Open
alexgetty opened this issue Jan 26, 2021 · 1 comment
Open

Convert absolute units to relative units #89

alexgetty opened this issue Jan 26, 2021 · 1 comment
Labels
pregroom Item still requires definition

Comments

@alexgetty
Copy link
Contributor

By defining font-sizes, margins, padding, etc as REMs and EMs instead of pixels, we can create a much more responsive system by default and makes it easier to proportionately size items relative to their context.

For example, sizing an icon in a button to 1em height and width means it automatically scales up and down based on the size of the button's text and doesn't need to be explicitly defined for each variation. Also, by strategically using REM vs EMs, we can make it really easy to proportionally scale up or down all pieces of a children component, making them much more flexible automatically.

This proposal would include defining a base unit size at the body level (eg 16px), then replacing every instance of px units throughout the rest of the stylesheets to use REMs or EMs according to that base size.

@alexgetty
Copy link
Contributor Author

@phess101 and I discussed this and thought that this issue would benefit from some more concrete examples of how relative sizing works on a larger scale project. We are planning to use relative units for our upcoming client project and will share examples of that in action once we've completed the work. That can hopefully initiate some discussion around this.

@brandongregoryscott brandongregoryscott added the pregroom Item still requires definition label Feb 17, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pregroom Item still requires definition
Projects
None yet
Development

No branches or pull requests

2 participants