2.0.0-alpha

Getting Vanilla Framework

Install with NPM: https://www.npmjs.com/package/vanilla-framework
Visit the documentation at https://docs.vanillaframework.io

New

Features

• Renamed the "code snippet" component "code copyable"
• Added a .has-icon class for buttons
• Converted tabs to use flex for consistent cross-browser rendering
• Added a fading background to tabs when they extend out of a container
• Added new greys to the default colour palette
• Optimised embedded SVG images in the Sass
• Increaded the size of the thumb image size
• Updated the sizes of social media icons
• Added a script for developers to analyse individual patterns with Parker
• Removed the min-width of tooltips
• Updated the max-width of typographic elements
• Added a "stacked" variant of headings with icons
• Restyled radio buttons and checkboxes, ensuring consistency
• Renamed the old pagination component to "article pagination" to hint at its use
• Added a prettier dependency with a pre-commit hook to enforce code quality
• Made extensive code quality updates following running prettier for the first time
• Added new size variants for pull-quotes, changed the quote mark colour to mid-dark, removed italic styling and made several changes to positioning and line height sizes in the component
• Reduced the font-weight of h2 and p-heading--two
• Updated button margin and padding to be scalible and in-line with the baseline grid
• Stepped lists change to the smaller layout when the navigation threshhold is met
• The vf-focus mixin no longer has an offset and increased the outline size
• Updated max-widths of headings so that they are no longer narrower than paragraphs in some use cases
• Changed the abbr cursor style to "help"
• Removed Blink mac system font from the font stack
• Removed box-shadow from form elements
• Darkened the border color of checkboxes and radio buttons for increases accessibility
• Upped the grid max width base valie from 990 to 1200
• Complete overhaul of vertical spacing. Most element combinations correctly fit to the basline veritcal grid wihout the need to write custom styles
• Added rules for typographic edge-cases which require special spacing
• Broke up the large _typography.scss file into smaller files
• Changed the prefix "intra" to "inner" on all spacing variables that use it to make the convention clearer
• Changed the prefix "inter" to "outer" on all spacing variables that use it to make the convention clearer
• Standardised the naming of spacing variables to use S/M/L naming where possible
• Updated u-vertically-center to also work on small viewports
• Added a max-width to label elements
• Increased the allowed number of media queries in the project to 50 in the parker configuration
• Add optional font-size increase on the 1680 breakpoint
• Added an optional image element to the pull quote pattern
• Adjusted the base font size so that it respects browser accessibility settings
• Refactored all *.scss files to remove sass nesting which was just being used to build classnames - files are now flatter and have full classnames in more places, making searching code more intuitive
• p-aside renamed p-table-of-contents to reflect its more specific use
• Updated several icon assets for improved quality and reduced filesize
• Updated p-accordion so that icons appear on the left rather than the right
• Added support for users who set prefer-reduced-motion removing all animations when the setting is detected
• Inline code elements now have a grey highlight to help them stand out from other text
• Added renovate to the project to help keeping dependencies up-to-date
• Removed shelves grid and reimplemented the functionality with CSS grid
• Replaced the chevron icon used in various patterns with a more visually appealing version

Components and utilities

• Added new p-subnav pattern for drop-down menus in navigation
• Added new u-no-print to exclude web-only elements from printed pages
• Added a new pagination component

Removed deprecated components

• Button swtich - button.p-switch: applying this pattern to a checkbox is more semantic
• Visibility utilities - u-hidden, u-visible: use u-hide and its variants in their place
• Code snippet - p-code-snippet: use p-code-copyable which uses near-identical styling
• Warning notification - p-notification--warning: use p-notification--caution which is identical but renamed
• --no-underline link varients: these were based on the old, border-based underline style and are obsolete. If needed, they may be re-introduced after a re-write
• p-inline-images__img and p-inline-images img: p-inline-images__item and p-inline-images__logo now encapsulate all requirements
• u-float--right and u-float--left are now u-float-right and u-float-left
• p-link--strong removed with no need for replacement
• p-footer: this component can be replicated using other, more generic components
• p-navigation--sidebar: this can be replicated with other components if required but, for general navigation, the standard p-navigation is preferred
• $color-warning variable removed: replaced with $color-caution

Documentation

Content

• Added a sub-heading example
• Updated the colour palette page
• Added an example of a stacked heading with icons
• Documented pull-quote varients
• Updated stepped-list documentation
• Merged all "code" component documentation to allow easier comparison
• Changed the layout of the icons page
• Added new documentation for the updated typographic spacing
• Updated the tooltip example markup
• Expanded documentation: colour, strip, breadcrumb, accordion, contextual menu, typography, pagination, navigation, code, tabs, typography, tables, quote, heading icon, embedded media, assets settings, animations, heading icon, icons, images, table of contents, buttons, media object, forms, list tree, links, modal, notifications, cards, tooltips, search, switch, slider, divider, lists, muted heading, matrix, spacing

Website

• Removed flask for page generation
• Added nginx configuration
• Updated the navigation to match the rest of the website
• Added Usabilla user feedback widget
• Updated the "report a bug" link
• Updated mobile nav to use dropdown two menus grouped by "About" and "Patterns" rather than having two nav menus stacked
• Restyled the sidebar and the background to light grey
• Updated included Vanilla Framework version to 1.8.1
• Moved code examples into /docs
• Converted the site generator to Jekyll (at v3.8.4)

Bug fixes

• Widened the styling of input type="number" elements to allow for 4 digits
• Updated the accordion toggle to open/close the accordion
• fieldset styling updated to match the design spec and made their bottom margin scalable
• Removed unnecessary roles from example markup
• Active buttons now have a discerable hover state
• Update the colours for button hover states
• Removed redundant [scope="row"] and [scope="col"] in examples
• Fixed the positioning of the "copy to clipboard" button on code snippets
• Corrected the positioning of the close button in notifications
• Updated the slider pattern to use rems rather than ems in spacing
• Fixed strip border issues by positioning them reletively implementing a pseudo-border
• Fixed visibility of hover state on navigation items when the background colour is dark
• Fixed icon positioning for browser consistency
• Stopped reset buttons in forms being hidden by default
• Fixed the specificity of p-card selectors
• Made sure that the base typographic rules appear early in the CSS
• Refactored the navigation pattern to fix bugs with different background colours
• Fixed drift to basline grid on longer pages due to rounding errors
• Changed pre and code whitespace to scroll sideways rather than wrapping
• Added a background colour to the root html element to avoid reliance on browser defaults
• Added form validation feedback to select inputs
• Aligned tickboxes and radio buttons with the baseline grid