Remove rem/px function, update px/em/rem values #1040
Merged
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
Rem units are [supported in all modern browsers](http://caniuse.com/#search=rem) and no longer require pixel fallbacks.
Our current practice of declaring an explicit pixel value for our base font-size is user hostile. While browsers have gotten better about zooming over the years, we are still overriding user preferences in favor of our own. The new corresponding percentage-based values align with our pixel-based values should a user visit our site using default browser settings. There may be some minute differences, but I will be making adjustments in subsequent commits.
* Change px values to ems * Adjust margins and padding to left-align breadcrumbs with navigation * Remove unnecessary line-height declaration * Reduce margin-bottom in between breadcrumbs
* Change px values to ems * Move breadcrumb psuedo content, display, overflow, and white-space styling not needed for mobile to nav-full media query * Adjust line-height
Update logged-in toggle label (username) padding-right value from pixels to ems. This then obviates the need for the additional media queries.
The right margin will provide necesssary space to avoid collisions with potentially long usernames in the adjacent identity management area.
Further adjustments to font-size, line-height, and padding to improve breadcrumbs layout. Transform works better than absolute positioning to avoid subtle gaps in between the breadcrumb arrows and background colors visible at some, but not all, browser widths.
Added flex value and text-overflow to toggle label (username) to allow for long usernames to be truncated when space doesn’t allow for the display of the full name.
Added flex values to IdM elements to allow the IdM section to grow and shrink as needed. Removed unnecessary rules and moved rules to more appropriate specificity.
* Adjusted the left margin at nav-hidden width to update icon positioning. * Updated top value from pixels to ems, and added media query for @bp768. * Specified a width for the share icon (as well as other nav icons in forthcoming commits) to account for difference in icon sizes, to better optically normalize the nav icons. * Vertically-aligned share icon to middle for more precise vertical centering.
Adjusted flex values to let resources section grow and shrink as necessary and let lengthy child content shrink and truncate if necessary.
* Move shared icon button styles to a parametric mixin * Remove unneccessary padding rule from nav-icon pseudo content * Move shared dropdown-widget-button to parametric-mixin * Specify consistent dropdown-widget-button height for nav-hidden
* Remove margin-right from nav-toggle (the share icon position has been updated accordingly and doesn’t need the margin from the toggle) * Remove relative positioning from icon-menu * Remove nav-toggle rules that were moved to the .wdn-nav-button() parametric mixin * Specify height and width for nav-toggle at nav-hidden widths * Update positioning value from pixels to ems. * Add @bp768 media query for nav-toggle positioning
* Added flex value to search section * Added left margin to search section to provide adequate spacing for adjacent IdM section * Removed rules that were moved to .wdn-nav-button() parametric mixin * Added specific width to search toggle for nav-hidden widths * Removed nav-hidden toggle label color, moved to .wdn-nav-icon() parametric mixin * Replaced transform with vertical-align: text-top for nav-hidden search icon for better vertical alignment. * Removed padding and margin rules from the search label, as they effectively equaled the @bp480 margin rule. * Adjusted search field width to 100% and min-width: 0 so that the field takes up the full width as defined by its flex parents.
Snap (most) edges to pixel grid
By updating the base font-size from an explicit pixel value to a percentage-based value, we respect a user’s font-size preferences as set in the user’s browser. Likewise, we need to update the breakpoint values to ems so that they change at a rate consistent with the base font-size.
Round up font-size values to account for IE & Edge truncating values to only two decimal places
* Subpixel rendering of SVGs as background images is less than optimal (to say the least) in IE & Edge, resulting in clipped and/or blurry images for elements with computed width and height values that aren’t integers (pixels). To compound matters, IE & Edge also fail to round values to more than two decimal places, meaning a 54px element cannot be calculated in ems since these browsers cannot perform rudimentary calculations like eighths or sixteenths. As such, sizing values for the Nebraska ’N’ have been rounded up ever so slightly. * The line-height for the Site Title was reduced as it was pushing the breadcrumbs and navigation down when it was preceded by a Site Affiliation. * Because of the adjustments to the Nebraska ’N’ and the Site Title, the min-height and padding values for the Site Affiliation were adjusted to vertically center these elements in the logo lockup.
* Subpixel rendering of SVGs as background images is less than optimal (to say the least) in IE & Edge, resulting in clipped and/or blurry images for elements with computed width and height values that aren’t integers (pixels). To compound matters, IE & Edge also fail to round values to more than two decimal places, meaning a 54px element cannot be calculated in ems since these browsers cannot perform rudimentary calculations like eighths or sixteenths. As such, sizing values for several footer elements have been adjusted accordingly. * Rather than apply font-size to the entirety of the footer, it’s now applied to the footer modules and (in the global footer) the QA and copyright/phone text elements. The font-size has been rounded up to two decimal places to account for IE & Edge. * By no longer setting a font-size for the entire footer, some values needed to be adjusted: padding, background-position, and background-size in the local and global footer. * Just as the list items in the footers match the font-size of the list items in the drop down navigation, the footer headings were reduced slightly (the equivalent of less than 1.5px) in size to match the primary labels in the navigation. * The sizes of the footer logos can now be calculated based on the site’s base font-sizes (instead of the footer text font-size of 11px), resulting in values that are (in most cases) be truncated to two decimal places while also rounding to integer (pixel) equivalents. This reduces the aforementioned background-image clipping and blurriness, which is more apparent in images with sharp lines, like the Nebraska ’N’ or Big Ten logo, and more forgiving in images with more curves, like the Nebraska system and TIPS logos.
* Because we’ve renamed the initial breadcrumb from ‘UNL’ to the longer ‘Nebraska,’ I’ve reduced the breadcrumb padding and size of arrows to make up some of the difference in added length. * The negative margin-left of the first breadcrumb was adjusted to reflect the updated padding-left value so that it still aligns with the left edge of the inner wrapper. * Padding had been applied to breadcrumb links to help set the overall height of the breadcrumbs. However, subpixel rendering differences could occasionally be seen in the vertical alignment of breadcrumb text baselines between links vs. non-links (the final breadcrumb)—depending on zoom, browser width, etc. Instead of applying padding to breadcrumb links, the breadcrumb list item line-height has been increased to set a consistent height for all breadcrumbs. Padding-top nudges the breadcrumb text down 1px, optically centering the text vertically, while a negative margin-bottom equal in value to the padding-top (-1px) prevents the navigation icons from being moved down the page. In this case, the pixel values provide a more reliable and consistent unit of measure across browsers and zoom size than ems or rems. * Border-bottom values (not just border-bottom-color) have been specified for ‘selected’ breadcrumb link arrows to prevent the bottom border from visibly spanning the width of the link (effectively, an underline of the link) in IE & Edge.
|
An obvious change that occurred is the search box on desktop got considerably wider. Is that intended? Will it impact placement of IdM and affiliate institution text. |
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 removes the function that generated rem and pixel fallback values for font-size when one integer (the same value for both 'mobile' and 'desktop') or two integers (one for 'mobile,' one for 'desktop') were inputted into the function. This function's primary purpose was to provide pixel fallback values for browsers that didn't yet support rem units. All of the browsers supported by the framework now support rem units. This function is no longer needed.
Closes #1030