Using relative units in CSS #588
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adjusts existing styles to use relative units (
rem,em).The actual behavior
Currently, the utteranc.es iframe does not respect the user's browser settings (font size). It's fixed whatever we set in the browser. That happens because of the
pxunit usage in stylesheets.After merge
The layout adjusts automatically to the font size setting.
Why are relative units preferred?
The
pxis an absolute unit. Using this can potentially lead to accessibility issues as we don't consider users' preferences. Also, it's worth mentioning that nowadays, many frontend frameworks such as Bootstrap prefer relative units over absolute ones.Solution
The utteranc.es uses the Primer CSS which relies on the
pxunit. The idea is to still use the absolute units wrapped with SCSS helper functions that convert these values intoremandem.The
remis a unit relative to the font size on the root element. With default browser settings (font size set to16px) we have1rem=16px. To simplify calculations, we set the "font-size" property of the<html>element to62.5%. With this in place and default browser options:1rem=10pxso1px=0.1remThe
scaling.scssfile contains theremfunction that converts pixels to rem. For instance,rem(20px)becomes1rem.The suggested approach in the case of media queries is to use the
em, notrem. That's because of some differences in how browsers handle this. In case of media queries1em= default browser font size. So by default, it's16px.The
emfunction inscaling.scssconverts breakpoints that come from Primer CSS toemunits. For example,em(32)becomes2em.The PR also adjusts the utteranc.es site itself, so it can be easily tested with
index.htmlas a client. I tried not to change the existing layout, however, some minor differences are possible. In order not to break the existing design for other users I didn't touch themax-width: 760px;setting on the.utterancesclass. If someone wants to use relative units, then they can easily override this property on the client-side. Also, the iframe height calculation works fine.