Skip to content

Releases: canonical/vanilla-framework

Hotfix: Fixing broken grid import

11 Jan 18:59
Compare
Choose a tag to compare

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

11 Jan 18:58
Compare
Choose a tag to compare
Hotfix: v1.1.1 Pre-release
Pre-release

Hotfix: Add bottom margin to navigation pattern

v1.1.0

11 Jan 16:03
Compare
Choose a tag to compare

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

12 Oct 15:26
Compare
Choose a tag to compare
  • Simplified and fixed styling bug with .p-link--external

Version 1.0.0

22 Sep 15:29
Compare
Choose a tag to compare

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

22 Sep 09:09
Compare
Choose a tag to compare
Release candidate 3 Pre-release
Pre-release
1.0.0-rc3

Bump version to 1.0.0-rc3

Release candidate 2

22 Sep 09:10
Compare
Choose a tag to compare
Release candidate 2 Pre-release
Pre-release
Merge pull request #686 from barrymcgee/642-ie-svgs

Fix up SVG icons in IE