Skip to content

Version 1.0.0
Compare
Choose a tag to compare
@barrymcgee barrymcgee released this 22 Sep 15:29
· 5991 commits to main since this release
v1.0.0
ba7e2f4

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
Assets 2
Loading