Remove rem/px function, update px/em/rem values #1040

Merged
merged 53 commits into from Dec 21, 2016

Conversation

Projects
None yet
2 participants
@skoolbus39
Member

skoolbus39 commented Dec 13, 2016

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

skoolbus39 added some commits Nov 17, 2016

Remove rem-to-px-fallback function
Rem units are [supported in all modern browsers](http://caniuse.com/#search=rem) and no longer require pixel fallbacks.
Change base font-size from px- to %-based value
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.
Update breadcrumbs mobile layout
* 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
Update breadcrumbs desktop layout
* 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 IdM logged-in label padding value to ems
Update logged-in toggle label (username) padding-right value from pixels to ems.  This then obviates the need for the additional media queries.
Add margin-right to institution title
The right margin will provide necesssary space to avoid collisions with potentially long usernames in the adjacent identity management area.
Adjust breadcrumb layout values
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.
Flex logged-in toggle label (IdM username)
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.
Flex IdM elements
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.

skoolbus39 added some commits Dec 3, 2016

Share layout updates
* 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.
Adjust resources flex values
Adjusted flex values to let resources section grow and shrink as necessary and let lengthy child content shrink and truncate if necessary.
Consolidate nav icon button styles
* 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
Navigation layout updates
* 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
Search layout updates
* 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.
Pixel-fit Big Ten logo
Snap (most) edges to pixel grid
Update breakpoints from pixels to ems
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.
Navigation font-size rounding
Round up font-size values to account for IE & Edge truncating values to only two decimal places
Logo lockup adjustments
* 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.
Footer sizing adjustments
* 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.
Breadcrumb refinements
* 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.

@skoolbus39 skoolbus39 added the CSS label Dec 13, 2016

@skoolbus39 skoolbus39 requested a review from kabel Dec 13, 2016

@kabel

This comment has been minimized.

Show comment
Hide comment
@kabel

kabel Dec 19, 2016

Contributor

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.

Contributor

kabel commented Dec 19, 2016

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.

@kabel kabel merged commit 70e499b into unl:develop Dec 21, 2016

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment