Skip to content

@deadlight deadlight released this Jun 10, 2019 · 230 commits to master since this release

Getting Vanilla Framework

Install with NPM:
Visit the documentation at



  • 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
  • Introduced new variable to change the font-weight for bold fonts
  • Positioned tooltips now only require a single class
  • Stacked forms now follow the grid
  • Explicitly set columns to display: block

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
  • Added fixed-width utility and expose it as class
  • Added bordered row

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



  • 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
  • Updated the breakpoint documentation and added more examples


  • 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)
  • Upgraded Husky config (previous version was deprecated)

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
  • Stepped-detailed list: fix alignment to rows
  • u-min-margin--bottom: ensure it keeps text on baseline grid
  • Fixed tick position in lists
  • Convert p-card margin to padding so it pushes border down
  • Fixed p-strip selector so class order doesn't matter
  • Fixed typo in the base buttons disabled class (was .is--disabled, corrected to .is-disabled)
  • Removed conflicting map names

Code maintenance

  • Pinned dependencies for dev requirements
  • Restructured how margin-collapse mixins are included to reduce duplicating CSS and decouple components
  • Refactor's placeholder structure, removing mixins
  • Moved %u-fixed-width-container into its own file

Development tooling

Assets 2
You can’t perform that action at this time.