@Caleb-Ellis Caleb-Ellis released this Jul 16, 2018 · 161 commits to develop since this release

Assets 2

Getting Vanilla Framework

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

New

  • h1 font weight has been changed from 300 to 100, which uses the Ubuntu Thin font. An example of it in use can be found at the Vanilla homepage.
  • Added the parker stylesheet analysis tool to the project's tests. It measures things like stylesheet size, top specificity, selectors per rule etc. Performance benchmarks and thresholds can be found here.
  • .p-switch pattern is now a checkbox (<input type="checkbox">) so it can be used without JS (see example). The old <button> version is now deprecated, to be removed in v2.0.
  • Each icon pattern is now its own mixin, meaning you can import icons individually instead of being forced to import all 32. They can also now be given an .is-light class to force them to take the light colour.
  • Simplified the u-baseline-grid utility to be a background, and added an example page.
  • The vf-highlight-bar function can now be used to add a 3px strip to the left/right of a container, as well as top/bottom.
  • Added a new Typographic spacing page, to easier track spacing changes with Percy.
  • Icons now encode the # in its colour by default. This means you no longer have to include the vf-url-friendly-color mixin for icons to work properly in Firefox.
  • Added JavaScript to the Code snippet example so it actuall copies to clipboard.
  • GitHub issue templates have been updated, and split into three (Report a bug, Propose a new pattern, Propose an amendment to an existing pattern). See the GitHub blog post about it.

Documentation

  • The docs template has been completely overhauled! Changes include:
  • A new homepage with a stylish hero strip!
  • A new sidebar! It no longer expands/collapses, in favour of having all components exposed.
  • Two new pages! Building with Vanilla, which explains how to get set up with Vanilla for a few different build setups; and Customising Vanilla, which explains how you can alter Vanilla to suit your project's requirements.
  • The Typography page has been rewritten to more clearly explain the purpose of heading classes.

Bug fixes

  • Updated the .npmignore file so that only the contents of the scss folder are published to npm.
  • Removed align-self: flex-start from img tags, which was making it very difficult to make flex layout changes.
  • Overflow in u-image-position container is now hidden.
  • Fixed a styling bug for empty .p-code-numbered code blocks.
  • Fixed inline images being cropped and having incorrect aspect ratio, and added a class name for imgs inside the pattern (p-inline-images__logo). Targetting img directly is now deprecated, to be removed in v2.0.
  • Fixed various broken links in the docs.
  • Fixed right-aligned <th> spacing.
  • Fixed padding in .p-tooltip.
  • Made media object spacing more flexible, so that the order of description/metadata does not break spacing.
  • Fixed a bug where the sticky footer component was making the header navigation break in small screen Firefox windows.
  • Fixed a bug where, in order to get icons to show as light, you HAD to have --dark as the last part of the class name. Now it can appear anywhere.

@Caleb-Ellis Caleb-Ellis released this May 17, 2018 · 236 commits to develop since this release

Assets 2

Getting Vanilla Framework

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

New

  • .p-button--neutral is now 10% darker so it can be used in conjunction with p-strip--light
  • Reduced .p-pull-quote size to be h4 instead of h3
  • Updated the vf-highlight-bar function to be able to choose color, position, and whether it will sit above borders. It is used in Navigation (active state), Tabs (hover + active state) and Notification.
  • Added $color-navigation-active-bar and $color-tabs-active-bar to color settings
  • Namespaced utility placeholders
    • %clearfix is now %vf-clearfix
    • %u-hide-text is now %vf-hide-text

Documentation

  • Fixed Contextual menu examples to close when clicked outside
  • Fixed Table expanding button text to switch from "Show" and "Hide"

Bug fixes

  • Fixed component interdependencies so that each component is encapsulated (except from base, which is required). This means that the following can now be included without relying on any other non-base components:
    • vf-p-switch
    • vf-p-icons
    • vf-p-lists
    • vf-p-inline-images
    • vf-p-card
    • vf-p-modal
    • vf-p-contextual-menu
    • vf-p-navigation
    • vf-p-tabs
    • vf-p-notification
  • <select>s have been given padding right, so the chevron no longer overlaps text
  • Fixed <button> spacing when placed inside <p> tags

@Caleb-Ellis Caleb-Ellis released this May 10, 2018 · 273 commits to develop since this release

Assets 2

Getting Vanilla Framework

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

New

Vanilla spacing has been completely revamped, which should help give pages a more harmonious design and provide a guideline for how components are built and sit together

  • Spacing variables are now separated into vertical spacing ($spv) and horizontal spacing ($sph)
  • They are separated into spacing within components ($spv-intra), and between components ($spv-inter)
  • These are then separated into different sizes: regular ($spv-intra), condensed ($spv-intra--condensed) and expanded ($spv-intra--expanded)
  • The generic spacing units are still available but the intent is to deprecate them eventually
  • Projects using Vanilla will likely have to remove/edit workarounds, for example utilities like u-no-margin and bespoke css
  • Visit the docs page on spacing for more info

Typography has been revamped to follow a modular scale with a base of 16/14 (~1.143).

  • The most obvious change is there are now four main headings, h1-h4, instead of five. Basically h4 and h5 have combined into a new, middle-ground h4.
  • This means that for projects using Vanilla, you will likely need to convert any h5's and .p-heading--fives to their h4 equivalent
  • Visit the docs page on typography for more info

Tables now have muted headings as opposed to a bold ones

There have been a number of changes to how the components are built.

  • Global placeholders have been introduced for common styles between components, for example the box-shadow for Card (highlighted), Modal, and Notification
  • Many borders, as well as the highlight bar in the Navigation, Tabs and Notification components are now pseudo-elements to keep spacing consistent

u-align utilities have been split out into u-align and u-align-text. The latter should be used for elements that have a left or right margin, for example typographic elements that have a max-width

Documentation

Added the following pages:

  • Functions for global Vanilla functions used across multiple components
  • Placeholders for global placeholder settings, for styles that are used across multiple components

Edited pages:

  • Spacing to account for the 1.7.0 changes
  • Breakpoints to include the new $breakpoint-heading-threshold, which determines when headings snap to mobile-size headings
  • Align to include the new u-align-text utility

Changed the name of "Global navigation" to "Navigation"

Bug fixes

The following bugs have been fixed since v1.7.0-beta-2.1:

  • <pre> blocks now have whitespace: pre-wrap so they wrap properly
  • Placeholders have been namespaces
  • Matrix components are more flexible with multiple paragraphs (either in <div class="p-matrix__desc> or multiple <p class="p-matrix__desc">)
  • Removed padding and margin from <code> blocks
  • Added !default to all settings so they can be edited properly before Vanilla is included in a project
Apr 23, 2018
jenkins.ubuntu.qa: New release of Vanilla Framework
Apr 23, 2018
jenkins.ubuntu.qa: New release of Vanilla Framework
Pre-release

@Caleb-Ellis Caleb-Ellis released this Apr 23, 2018 · 305 commits to develop since this release

Assets 2

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

Vanilla 1.7.0 Bug fixes round 2

  • Fixed margins on.p-code-snippet__action so it doesn't overflow
  • Fixed image distortion in .p-inline-images

Changes

  • Improved .p-heading-icon to accommodate different heading sizes
  • Refactored cards to be able to be assembled from more atomic components, essentially turning the .p-card component into a border with padding. The heading can then be assembled from an <h1>/<h2> etc and an <hr>, and the content can be whatever you want it to be.
Apr 13, 2018
jenkins.ubuntu.qa: New release of Vanilla Framework
Pre-release

@Caleb-Ellis Caleb-Ellis released this Apr 13, 2018 · 320 commits to develop since this release

Assets 2

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

@anthonydillon anthonydillon released this Mar 28, 2018 · 380 commits to develop since this release

Assets 2

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

@Caleb-Ellis Caleb-Ellis released this Mar 23, 2018 · 390 commits to develop since this release

Assets 2

Getting Vanilla Framework

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

New

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