v1.7.0-beta-1

This is the beta release of Vanilla 1.7.0 which overhauls how spacing is utilised.

Vanilla 1.7.0 Bug fixes round 1

• Fixed navigation hover state colour being hard-set to $color-mid-light, now just becomes 3% darker by default
• Improved spacing for non-class-name unordered list (helpful for markup from a CMS)
• Improved spacing in forms
• Improved spacing in strips
• Improved spacing in media object metadata
• Fixed box shadow size for highlighted elements
• Fixed social icons displaying accessibility text
• Improved navigation logo sizing
• Fixed matrix spacing when no image is present
• Fixed tab selected state not sitting at baseline
• Fixed images not centering vertically when .u-vertically-center applied

v1.7.0-alpha-1

This is the alpha release of a large rewrite of the framework.

v1.6.7

Getting Vanilla Framework

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

New

• Filesize check added to CI with a limit of 175000 bytes. The goal by next release is to have this under 150000.
• MAAS layout added to https://vanilla-framework.github.io/vanilla-framework/ for testing complex UIs

Documentation

• Link to https://vanillaframework.io removed from sidebar
• 'Tables' category created with Table, Table expanding, Table sortable and Table mobile card patterns moved from 'Interactive Elements'
• 'Images and media' category created that combines Image-related patterns and the 'Media' category
• Form pattern consolidated to include Form, Form layout and Form validation
• Fixed search box pattern not showing in docs

Bug fixes

• Many design issues were fixed by bringing the scss files into parity with the designs.
• Optimised social icons pattern, reducing filesize from ~350kb to ~170kb

v1.6.6

Getting Vanilla Framework

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

New

• Header navigation updated to new design spec - includes hover state and selected state
• Notification component can now have an optional close button (using p-icon--close)

Documentation

• Search functionality enabled in sidebar navigation, using new search box pattern
• Header navigation changed to match vf.io

Bug fixes

• Notification component now takes full width of its container
• Code numbered and code snippet border color fixed to be inline with design spec
• Minor sidebar navigation fixes (removed inline styles from docs example, removed position:absolute from content, changed height to auto)
• Strong link hover color fixed

v1.6.5

Getting Vanilla Framework

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

Changes

NEW

• Added Search Box pattern: .p-search-box (link)
• Search Box integrates with the Global Navigation pattern
• Updated Pagination pattern to allow single direction pagination

Documentation

• Updated docs template, which now:
  • uses Vanilla-styled header and sidebar navigation
  • includes "View on GitHub" and "Report a bug" links for each pattern
  • has a link to the design specification for each pattern, if it exists
  • has consistent, semantic heading sizes
• Added Slider and Search Box patterns to docs, as well as the missing Aside pattern

Bug fixes

• Removed color and background from .p-list-step__content so instead it inherits them
• Removed tooltips max-width so instead it can be set by the consistent
• Fixed content alignment utilities (e.g. .u-align--center) working incorrectly when max-width is set
• Added overflow: hidden to icons to allow for accessibility text in <i> tags
• Added vendor prefixes to form elements so they are styled correctly in projects without auto-prefixer
• Fixed navigation breakpoint inconsistencies
• Fixed header line-height inconsistencies
• Aligned Media Object metadata text, even if no icon is present

v1.6.4

Getting Vanilla Framework

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

Changes

NEW

• New slider pattern

Bug fixes

• Update button widths on medium screens
• Fix list-tree expander icon
• Remove border-bottom on last row of table
• Change u-show and u-visible to display: inherit
• Add -webkit prefix to mask check in external link pattern
• Fix large media object aspect ratio sizing

v1.6.3

Getting Vanilla Framework

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

Changes

NEW

• Added p-form-help-text for help text in forms
• Added base icon layout to .p-icon
• Increase gutter width to 1/1.618 of column width
• Set paragraph length dynamically

Documentation

• Added Pagination pattern to the docs
• Fix accordion example not closing on click

Bug fixes

• Replace .p-link--external CSS masks with background-image mixins
• Namespaced all mixins with vf-
• Fix external link icon wrapping
• Fix middot centering in dotted lists

v1.6.2

Getting Vanilla Framework

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

Changes

NEW

• All new Pagination pattern
• Social icons

Navigation

• Set the default header to full width

Forms

• Aligned the select styling to match inputs and buttons
• Reduce checkbox/radio spacing

Lists

• Remove the border-bottom from the last item of a split list

Tabs

• Adds correct colour for visited tab state, by procload
• Increase the font-size of the tabs pattern

Links

• Decouple strips from external links

Documentation

• Documented icon set and social icons
• Re-organised the documentation's menu

v1.6.1

Getting Vanilla Framework

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

Changes

• Fix the search icon to work across supported browsers
• Update README to point to @vanillaframewrk Twitter
• Increase threshold for text color contrast in navigation pattern

v1.6.0

Getting Vanilla Framework

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

Changes

• Add visual :focus state to form elements to improve accessibility.
• Remove navigation dark/light variants and abstract background color to a Sass variable setting
• Refactor and remove layout quirks to vertical spacing across the framework
• Update table pattern to match design spec
• Add fuzzy versioning to package.json to improve stability of npm dependencies
• Fix bug where bottom of text was being cut off on <select> elements