This repository has been archived by the owner on Jul 10, 2020. It is now read-only.
Releases: 24ways/frontend
Releases · 24ways/frontend
2017
This release was largely focused on improving accessibility and usability.
Accessibility
- Reviewed page source order, moving navigation above the content and replacing the ‘skip navigation’ link with a ‘skip to content’ link (which appears upon focus).
- Updated heading levels. Was previously using
<h1>for all headings but, as we can’t have nice things like the HTML5 document outline, headed back to 2005 and bought back some ranked heading elements. - Menu button is now adjacent to element it controls within page source order.
- Menu can now be closed by clicking outside of it.
- Ensure document content is set to
inertwhen menu is open. Now ATs can’t access links that lie outside opened menu. - Better labelling of controls using
aria-label. - Updated the
.c-summarycomponent so that it contains only two links (one to the article, one to the author), and no longer includes comment count. It previously trapped focus; this has also been fixed, meaning it should be easier to navigate index pages with a keyboard. - Removed unnamed SVG images from a11y tree.
- Added
focuable="false"to SVG images to avoid bug in IE11. - Removed
role="main"from main element. - Removed ALL CAPS styling for author name in summary cards. Screen readers tend to mis-pronounce unknown words such as rare names/surnames if they are styled as uppercase.
- Removed repetitive labelling from labelled navigation landmarks.
- Replaced generated chevron on
.c-continuelink with ‘border art’, to ensure chevron isn’t announced by ATs. - Support for
-ms-high-contrast. Replace/augmentbox-shadowgenerated rules withborderwhen Windows High Contrast Mode is active. Changed implementation of summary card so that the folded corner no longer uses border art (which WHCM would incorrectly highlight). - Support for
prefers-reduced-motionto ensure author images don’t scale upon cursor hover.
Layout
- Replaced
.l-gridwith a new.c-listingcomponent, which uses CSS Grid (falling back to Flexbox). This is now used for author and summary listings. - Ensure layout adapts to the height of the viewport, as well as its width.
- Added a max character width to prose copy, removing the need for padding on the right-hand side of
.c-sectioncontainers.
Performance
- Load Google Fonts stylesheet directly from HTML, not via a CSS
@import. - Updated the
rel="dns-prefetch"to point to the new location for Google Font assets. - Ensure
<meta charset>is first item in<head>.
Sponsorship
- Added sponsorship page template.
- Created sponsored summary example, with
.summary--takenmodifier for taken slots.
Miscellaneous
- Fixed glitchy animation on menu’s ‘humburger’ icon.
- Added
overflow-y: hiddento body to prevent vertical scrolling. - Adjusted default size of SVG icons from 24px to 16px so that they appear better if CSS styles don’t load.
- Removed
downloadJSAtOnloadfunction for deferring loading of JS. Using<script defer>instead. - Linted JavaScript and fixed issues with the help of XO.
- Updated dependancies.
2016
- Use Fractal to organise and document front-end components and patterns
- Replace LessCSS with PostCSS
- Replace PHP includes with Nunjucks templates
- Replace icon fonts with inline SVG images
- Update component naming conventions (stricter compliance with BEM methodology)
- Update menu open/close behaviour, with animation and accessibility improvements
- Update typography, including filly fluid type sizing for prose content
- Add SVG mask icon for Safari
- Add manifest.json for supporting browsers
- Introduce design tokens for common stylistic values
- Add CSS to enable responsive video embeds
- Accessibility audit: ARIA roles and attributes and improved colour contrast
- Remove AJAX loading of comments on the article page
- Use CSS Custom Properties for day/year theming
- Use CSS Flexbox for article grid, and remove JS shim used for previous method
- Review font loading strategy
- Add linting rules and editor config
- Review and update design