v1.1.4

Remove collapsing margins on last-child elements
We had previously included rules which attempted to be a catch-all to prevent double spacing inconsistencies. As with all attempted catch-alls, it proved to have unintended consequences. We’ve now removed it and will focus on removing any spacing irregularities at the component level.

Add inherent bottom margin to .p-footer
Footers will nearly always be the last element in a page, so we’ve added a bottom margin to stop this pattern from bumping into the bottom of the viewport.

Ensure list tick icon stays grounded to top left of item
This list icon had a habit of floating downward to track the lower portion of an expanding list item. It is now anchored.

Renaming .u-text-align to .u-align
A wider use-case emerged where we needed to not only align text but also images. This util is now named more generically, and additional rules added so that it will align whatever a user places within it.

Restrict .p-inline-images items width
Images within this pattern will no longer be allowed to break the pattern even if their width exceeds the space allocated to each image within the pattern.

Fix up breaking pattern - .p-matrix
This pattern was updated to allow for multi-line content.

Add .heading-* classes to mirror base heading styling
Classes are now available so you could visually mirror heading styles 1-6 even if your element is semantically different.

Fix equal height bugs
This util was amended so that it did not alter the width of direct children, just the height.

Update CONTRIBUTING.md
The CONTRIBUTING.md has been reviewed and simplified.

Updated link styles
The default and pattern links have been updated to add colour and states.

Added ignore rules to sass-listing
The latest version sass-lint allows for block ignoring where violations are unavoidable. These rules are now present for a warning-free test report.

Added spell check to the docs
The test command now includes a spellcheck which will run over the docs to ensure all spellings are correct.

Added bottom margin to grid columns
Bottom margin equal to global gutter spacing is now part of the grid columns. This change will also be proposed upstream to Shelves grid.

v1.1.3

• Add consistent spacing around .p-strip pattern

Hotfix: Fixing broken grid import

An issue slipped through our testing issue which meant that our local grid settings were not being applied which broke the grid. This hotfix resolves this issue.

Hotfix: v1.1.1

Hotfix: Add bottom margin to navigation pattern

v1.1.0

This release fixes up several bugs in the framework and inconsistencies in the docs.

• Update default overflow on tables to “auto” to prevent horizontal scrollbar bug
• Update navigation pattern docs to correct typo
• Update lists pattern docs to correct typo
• Correct inconsistency with color variable settings in docs
• Add .p-link--no-underline class for image links
• Add base HR styling
• Remove explicit font sizes from docs as they change through breakpoints
• Correct default .p-strip so background is transparent
• Encapsulate grid in a mixin for consistency
• Correct error in ‘Getting started’ instructions in the README
• Updated npm packages to latest stable versions

v1.0.1

• Simplified and fixed styling bug with .p-link--external

Version 1.0.0

This is a major milestone for Vanilla Framework as it represents an almost total rewrite of the framework from the ground up.

The overarching themes for this release are maturity and stability — ensuring the framework is a cohesive set of building blocks and also making sure those building blocks are stress tested and robust.

This release is a major breaking change so you will need to update your site markup to utilise the changes listed.

Some highlights of this refactor - Vanilla framework is now;

• written using the BEM convention in the ITCSS structure
• fully documented with code and inline examples
• linted using sass-lint removing the previously Ruby dependancy for scss-lint
• sizing is set in rem rather than pixels
• using a consistent typographic scale
• using Docker to manage npm dependancies
• optimised for theme extension by significantly reducing specificity
• using only 16 unique colours, down from 25
• relying on zero ID selectors for styling.
• The minified version of the whole framework only increased in file size by 1kb (now 12.1Kb gzipped), despite using the more verbose BEM coding convention and increasing number of patterns and utils.

Removed variables

• $mobile-nav
• $nav-active-bg
• $bullet-color
• $primary-button-color
• $box-border
• $table-th
• $code-bg
• $box-shadow
• $box-solid-grey
• $row-background
• $header-link-color
• $text-color
• $alto-grey
• $brand-color-light
• $link-color

Changed variables

Colors

• $transparent is now $color-transparent
• $brand-color is now $color-brand
• $white is now $color-x-light
• $light-grey is now $color-light
• $warm-grey is now $color-mid-light
• $cool-grey is now $color-mid-dark
• $mid-grey is now $color-dark
• $black is now $color-x-dark
• $error is now $color-negative
• $warning is now $color-warning
• $success is now $color-positive
• $information is now $color-information

Layout

• $gutter-width is now $grid-gutter-width
• $columns is now $grid-columns
• $site-max-width is now $grid-max-width
• $navigation-threshold is now $breakpoint-small

Typography

• $base-font-family is now $font-base-family
• $base-font-size is now $font-base-size
• $font-heading-family is now font-heading-family

Misc

• $asset-server is now $assets-path

Removed classnames

• .touch-border
• .pull-left
• .pull-right
• .pull-bottom-right
• .pull-bottom-left
• .priority-0
• .not-for-small
• .for-tablet
• .for-medium
• .for-mobile
• .for-small
• .off-left
• .no-border
• .row-quote
• .smaller
• .header-search
• .search-form
• .med-six-col
• .caps
• .row--light
• .row--dark
• .row-grey
• .row--grey
• .row-hero
• .strip-inner-wrapper

Changed classnames

These classnames have been renamed so they adhere to the new naming conventions or to improve their naming for clarity and transparency.

You will need to amend your site markup in order to use this release of Vanilla framework.

Patterns & Utils

• .grid-list is now .p-matrix
• .external is now .p-link--external
• .link-top is now .p-link--top
• .left is now .u-float--left
• .right is now .u-link--right
• .accessibility-aid is now .u-off-screen
• .no-margin-bottom is now .u-no-margin--bottom
• .no-padding-bottom is now .u-no-padding--bottom
• .align-center is now .u-text-center
• .video-container is now .media-container
• .box is now .p-card
• .inline-logos is now .p-inline-images.
• p-header is now p-navigation

Release candidate 3

1.0.0-rc3

Bump version to 1.0.0-rc3

Release candidate 2

Merge pull request #686 from barrymcgee/642-ie-svgs

Fix up SVG icons in IE