Skip to content

@deadlight deadlight released this Jul 9, 2019

Getting Vanilla Framework

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

New

Features

  • Added a new variable, $table-layout-fixed which allows global toggling of fixed-width table layout rules

Documentation

Content

  • Renamed "tables" documentation page and re-added it to the sidebar nav
  • Updated icon examples
  • Reformatted typographic scale docs
  • Fixed the width of example elements in u-float examples to better demonstrate functionality
  • Correct encoding for backticked code in html in navigation docs
  • Remove item from navigation example to better fit it in the docs viewport
  • Reformatted typographic scale docs

Website

  • Restructured the docs sidebar navigation
  • Update the documentation's Vanilla Framework dependency to 2.0.1
  • Made some markdown and markup changes to documentation to take advantage of 2.0.1 features

Bug fixes

  • Refactored lists sass so that placeholders are in global scope, avoiding errors when not using all components

Code maintenance

  • Removed all remaining unused Gulp scripts
Assets 2

@deadlight deadlight released this Jun 11, 2019 · 34 commits to master since this release

Getting Vanilla Framework

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

New

Features

  • Renamed the "code snippet" component "code copyable"
  • Added a .has-icon class for buttons
  • Converted tabs to use flex for consistent cross-browser rendering
  • Added a fading background to tabs when they extend out of a container
  • Added new greys to the default colour palette
  • Optimised embedded SVG images in the Sass
  • Increaded the size of the thumb image size
  • Updated the sizes of social media icons
  • Added a script for developers to analyse individual patterns with Parker
  • Removed the min-width of tooltips
  • Updated the max-width of typographic elements
  • Added a "stacked" variant of headings with icons
  • Restyled radio buttons and checkboxes, ensuring consistency
  • Renamed the old pagination component to "article pagination" to hint at its use
  • Added a prettier dependency with a pre-commit hook to enforce code quality
  • Made extensive code quality updates following running prettier for the first time
  • Added new size variants for pull-quotes, changed the quote mark colour to mid-dark, removed italic styling and made several changes to positioning and line height sizes in the component
  • Reduced the font-weight of h2 and p-heading--two
  • Updated button margin and padding to be scalible and in-line with the baseline grid
  • Stepped lists change to the smaller layout when the navigation threshhold is met
  • The vf-focus mixin no longer has an offset and increased the outline size
  • Updated max-widths of headings so that they are no longer narrower than paragraphs in some use cases
  • Changed the abbr cursor style to "help"
  • Removed Blink mac system font from the font stack
  • Removed box-shadow from form elements
  • Darkened the border color of checkboxes and radio buttons for increases accessibility
  • Upped the grid max width base valie from 990 to 1200
  • Complete overhaul of vertical spacing. Most element combinations correctly fit to the basline veritcal grid wihout the need to write custom styles
  • Added rules for typographic edge-cases which require special spacing
  • Broke up the large _typography.scss file into smaller files
  • Changed the prefix "intra" to "inner" on all spacing variables that use it to make the convention clearer
  • Changed the prefix "inter" to "outer" on all spacing variables that use it to make the convention clearer
  • Standardised the naming of spacing variables to use S/M/L naming where possible
  • Updated u-vertically-center to also work on small viewports
  • Added a max-width to label elements
  • Increased the allowed number of media queries in the project to 50 in the parker configuration
  • Add optional font-size increase on the 1680 breakpoint
  • Added an optional image element to the pull quote pattern
  • Adjusted the base font size so that it respects browser accessibility settings
  • Refactored all *.scss files to remove sass nesting which was just being used to build classnames - files are now flatter and have full classnames in more places, making searching code more intuitive
  • p-aside renamed p-table-of-contents to reflect its more specific use
  • Updated several icon assets for improved quality and reduced filesize
  • Updated p-accordion so that icons appear on the left rather than the right
  • Added support for users who set prefer-reduced-motion removing all animations when the setting is detected
  • Inline code elements now have a grey highlight to help them stand out from other text
  • Added renovate to the project to help keeping dependencies up-to-date
  • Removed shelves grid and reimplemented the functionality with CSS grid
  • Replaced the chevron icon used in various patterns with a more visually appealing version
  • Introduced new variable to change the font-weight for bold fonts
  • Positioned tooltips now only require a single class
  • Stacked forms now follow the grid
  • Explicitly set columns to display: block

Components and utilities

  • Added new p-subnav pattern for drop-down menus in navigation
  • Added new u-no-print to exclude web-only elements from printed pages
  • Added a new pagination component
  • Added fixed-width utility and expose it as class
  • Added bordered row

Removed deprecated components

  • Button swtich - button.p-switch: applying this pattern to a checkbox is more semantic
  • Visibility utilities - u-hidden, u-visible: use u-hide and its variants in their place
  • Code snippet - p-code-snippet: use p-code-copyable which uses near-identical styling
  • Warning notification - p-notification--warning: use p-notification--caution which is identical but renamed
  • --no-underline link varients: these were based on the old, border-based underline style and are obsolete. If needed, they may be re-introduced after a re-write
  • p-inline-images__img and p-inline-images img: p-inline-images__item and p-inline-images__logo now encapsulate all requirements
  • u-float--right and u-float--left are now u-float-right and u-float-left
  • p-link--strong removed with no need for replacement
  • p-footer: this component can be replicated using other, more generic components
  • p-navigation--sidebar: this can be replicated with other components if required but, for general navigation, the standard p-navigation is preferred
  • $color-warning variable removed: replaced with $color-caution

Documentation

Content

  • Added a sub-heading example
  • Updated the colour palette page
  • Added an example of a stacked heading with icons
  • Documented pull-quote varients
  • Updated stepped-list documentation
  • Merged all "code" component documentation to allow easier comparison
  • Changed the layout of the icons page
  • Added new documentation for the updated typographic spacing
  • Updated the tooltip example markup
  • Expanded documentation: colour, strip, breadcrumb, accordion, contextual menu, typography, pagination, navigation, code, tabs, typography, tables, quote, heading icon, embedded media, assets settings, animations, heading icon, icons, images, table of contents, buttons, media object, forms, list tree, links, modal, notifications, cards, tooltips, search, switch, slider, divider, lists, muted heading, matrix, spacing
  • Updated the breakpoint documentation and added more examples

Website

  • Removed flask for page generation
  • Added nginx configuration
  • Updated the navigation to match the rest of the website
  • Added Usabilla user feedback widget
  • Updated the "report a bug" link
  • Updated mobile nav to use dropdown two menus grouped by "About" and "Patterns" rather than having two nav menus stacked
  • Restyled the sidebar and the background to light grey
  • Updated included Vanilla Framework version to 1.8.1
  • Moved code examples into /docs
  • Converted the site generator to Jekyll (at v3.8.4)
  • Upgraded Husky config (previous version was deprecated)

Bug fixes

  • Widened the styling of input type="number" elements to allow for 4 digits
  • Updated the accordion toggle to open/close the accordion
  • fieldset styling updated to match the design spec and made their bottom margin scalable
  • Removed unnecessary roles from example markup
  • Active buttons now have a discerable hover state
  • Update the colours for button hover states
  • Removed redundant [scope="row"] and [scope="col"] in examples
  • Fixed the positioning of the "copy to clipboard" button on code snippets
  • Corrected the positioning of the close button in notifications
  • Updated the slider pattern to use rems rather than ems in spacing
  • Fixed strip border issues by positioning them reletively implementing a pseudo-border
  • Fixed visibility of hover state on navigation items when the background colour is dark
  • Fixed icon positioning for browser consistency
  • Stopped reset buttons in forms being hidden by default
  • Fixed the specificity of p-card selectors
  • Made sure that the base typographic rules appear early in the CSS
  • Refactored the navigation pattern to fix bugs with different background colours
  • Fixed drift to basline grid on longer pages due to rounding errors
  • Changed pre and code whitespace to scroll sideways rather than wrapping
  • Added a background colour to the root html element to avoid reliance on browser defaults
  • Added form validation feedback to select inputs
  • Aligned tickboxes and radio buttons with the baseline grid
  • Stepped-detailed list: fix alignment to rows
  • u-min-margin--bottom: ensure it keeps text on baseline grid
  • Fixed tick position in lists
  • Convert p-card margin to padding so it pushes border down
  • Fixed p-strip selector so class order doesn't matter
  • Fixed typo in the base buttons disabled class (was .is--disabled, corrected to .is-disabled)
  • Removed conflicting map names

Code maintenance

  • Pinned dependencies for dev requirements
  • Restructured how margin-collapse mixins are included to reduce duplicating CSS and decouple components
  • Refactor's placeholder structure, removing mixins
  • Moved %u-fixed-width-container into its own file

Development tooling

Assets 2

@deadlight deadlight released this Jun 10, 2019 · 37 commits to master since this release

Getting Vanilla Framework

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

New

Features

  • Renamed the "code snippet" component "code copyable"
  • Added a .has-icon class for buttons
  • Converted tabs to use flex for consistent cross-browser rendering
  • Added a fading background to tabs when they extend out of a container
  • Added new greys to the default colour palette
  • Optimised embedded SVG images in the Sass
  • Increaded the size of the thumb image size
  • Updated the sizes of social media icons
  • Added a script for developers to analyse individual patterns with Parker
  • Removed the min-width of tooltips
  • Updated the max-width of typographic elements
  • Added a "stacked" variant of headings with icons
  • Restyled radio buttons and checkboxes, ensuring consistency
  • Renamed the old pagination component to "article pagination" to hint at its use
  • Added a prettier dependency with a pre-commit hook to enforce code quality
  • Made extensive code quality updates following running prettier for the first time
  • Added new size variants for pull-quotes, changed the quote mark colour to mid-dark, removed italic styling and made several changes to positioning and line height sizes in the component
  • Reduced the font-weight of h2 and p-heading--two
  • Updated button margin and padding to be scalible and in-line with the baseline grid
  • Stepped lists change to the smaller layout when the navigation threshhold is met
  • The vf-focus mixin no longer has an offset and increased the outline size
  • Updated max-widths of headings so that they are no longer narrower than paragraphs in some use cases
  • Changed the abbr cursor style to "help"
  • Removed Blink mac system font from the font stack
  • Removed box-shadow from form elements
  • Darkened the border color of checkboxes and radio buttons for increases accessibility
  • Upped the grid max width base valie from 990 to 1200
  • Complete overhaul of vertical spacing. Most element combinations correctly fit to the basline veritcal grid wihout the need to write custom styles
  • Added rules for typographic edge-cases which require special spacing
  • Broke up the large _typography.scss file into smaller files
  • Changed the prefix "intra" to "inner" on all spacing variables that use it to make the convention clearer
  • Changed the prefix "inter" to "outer" on all spacing variables that use it to make the convention clearer
  • Standardised the naming of spacing variables to use S/M/L naming where possible
  • Updated u-vertically-center to also work on small viewports
  • Added a max-width to label elements
  • Increased the allowed number of media queries in the project to 50 in the parker configuration
  • Add optional font-size increase on the 1680 breakpoint
  • Added an optional image element to the pull quote pattern
  • Adjusted the base font size so that it respects browser accessibility settings
  • Refactored all *.scss files to remove sass nesting which was just being used to build classnames - files are now flatter and have full classnames in more places, making searching code more intuitive
  • p-aside renamed p-table-of-contents to reflect its more specific use
  • Updated several icon assets for improved quality and reduced filesize
  • Updated p-accordion so that icons appear on the left rather than the right
  • Added support for users who set prefer-reduced-motion removing all animations when the setting is detected
  • Inline code elements now have a grey highlight to help them stand out from other text
  • Added renovate to the project to help keeping dependencies up-to-date
  • Removed shelves grid and reimplemented the functionality with CSS grid
  • Replaced the chevron icon used in various patterns with a more visually appealing version
  • Introduced new variable to change the font-weight for bold fonts
  • Positioned tooltips now only require a single class
  • Stacked forms now follow the grid
  • Explicitly set columns to display: block

Components and utilities

  • Added new p-subnav pattern for drop-down menus in navigation
  • Added new u-no-print to exclude web-only elements from printed pages
  • Added a new pagination component
  • Added fixed-width utility and expose it as class
  • Added bordered row

Removed deprecated components

  • Button swtich - button.p-switch: applying this pattern to a checkbox is more semantic
  • Visibility utilities - u-hidden, u-visible: use u-hide and its variants in their place
  • Code snippet - p-code-snippet: use p-code-copyable which uses near-identical styling
  • Warning notification - p-notification--warning: use p-notification--caution which is identical but renamed
  • --no-underline link varients: these were based on the old, border-based underline style and are obsolete. If needed, they may be re-introduced after a re-write
  • p-inline-images__img and p-inline-images img: p-inline-images__item and p-inline-images__logo now encapsulate all requirements
  • u-float--right and u-float--left are now u-float-right and u-float-left
  • p-link--strong removed with no need for replacement
  • p-footer: this component can be replicated using other, more generic components
  • p-navigation--sidebar: this can be replicated with other components if required but, for general navigation, the standard p-navigation is preferred
  • $color-warning variable removed: replaced with $color-caution

Documentation

Content

  • Added a sub-heading example
  • Updated the colour palette page
  • Added an example of a stacked heading with icons
  • Documented pull-quote varients
  • Updated stepped-list documentation
  • Merged all "code" component documentation to allow easier comparison
  • Changed the layout of the icons page
  • Added new documentation for the updated typographic spacing
  • Updated the tooltip example markup
  • Expanded documentation: colour, strip, breadcrumb, accordion, contextual menu, typography, pagination, navigation, code, tabs, typography, tables, quote, heading icon, embedded media, assets settings, animations, heading icon, icons, images, table of contents, buttons, media object, forms, list tree, links, modal, notifications, cards, tooltips, search, switch, slider, divider, lists, muted heading, matrix, spacing
  • Updated the breakpoint documentation and added more examples

Website

  • Removed flask for page generation
  • Added nginx configuration
  • Updated the navigation to match the rest of the website
  • Added Usabilla user feedback widget
  • Updated the "report a bug" link
  • Updated mobile nav to use dropdown two menus grouped by "About" and "Patterns" rather than having two nav menus stacked
  • Restyled the sidebar and the background to light grey
  • Updated included Vanilla Framework version to 1.8.1
  • Moved code examples into /docs
  • Converted the site generator to Jekyll (at v3.8.4)
  • Upgraded Husky config (previous version was deprecated)

Bug fixes

  • Widened the styling of input type="number" elements to allow for 4 digits
  • Updated the accordion toggle to open/close the accordion
  • fieldset styling updated to match the design spec and made their bottom margin scalable
  • Removed unnecessary roles from example markup
  • Active buttons now have a discerable hover state
  • Update the colours for button hover states
  • Removed redundant [scope="row"] and [scope="col"] in examples
  • Fixed the positioning of the "copy to clipboard" button on code snippets
  • Corrected the positioning of the close button in notifications
  • Updated the slider pattern to use rems rather than ems in spacing
  • Fixed strip border issues by positioning them reletively implementing a pseudo-border
  • Fixed visibility of hover state on navigation items when the background colour is dark
  • Fixed icon positioning for browser consistency
  • Stopped reset buttons in forms being hidden by default
  • Fixed the specificity of p-card selectors
  • Made sure that the base typographic rules appear early in the CSS
  • Refactored the navigation pattern to fix bugs with different background colours
  • Fixed drift to basline grid on longer pages due to rounding errors
  • Changed pre and code whitespace to scroll sideways rather than wrapping
  • Added a background colour to the root html element to avoid reliance on browser defaults
  • Added form validation feedback to select inputs
  • Aligned tickboxes and radio buttons with the baseline grid
  • Stepped-detailed list: fix alignment to rows
  • u-min-margin--bottom: ensure it keeps text on baseline grid
  • Fixed tick position in lists
  • Convert p-card margin to padding so it pushes border down
  • Fixed p-strip selector so class order doesn't matter
  • Fixed typo in the base buttons disabled class (was .is--disabled, corrected to .is-disabled)
  • Removed conflicting map names

Code maintenance

  • Pinned dependencies for dev requirements
  • Restructured how margin-collapse mixins are included to reduce duplicating CSS and decouple components
  • Refactor's placeholder structure, removing mixins
  • Moved %u-fixed-width-container into its own file

Development tooling

Assets 2
Pre-release
Pre-release

@deadlight deadlight released this May 30, 2019 · 62 commits to master since this release

Getting Vanilla Framework

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

New

All the updates included in the previous 2.0.0 pre-releases plus the following:

Code maintenance

  • Refactor's placeholder structure, removing mixins
  • Moved %u-fixed-width-container into its own file
Assets 2
Pre-release
Pre-release

@deadlight deadlight released this May 30, 2019 · 66 commits to master since this release

Getting Vanilla Framework

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

New

All the updates included in the previous 2.0.0-alpha* releases plus the following:

Documentation

  • Fixed the heading-icon examples which were previously not included correctly
  • Fixed the title of the grid bordered example
  • Updated the breakpoint documentation and added more examples

Code maintenance

  • Pinned dependencies for dev requirements
  • Restructured how margin-collapse mixins are included to reduce duplicating CSS and decouple components
Assets 2
Pre-release

@nottrobin nottrobin released this May 29, 2019 · 78 commits to master since this release

Getting Vanilla Framework

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

This release includes the changes included in 2.0.0-alpha.1 with the following additional changes:

New

Components and utilities

  • Positioned tooltips now only require a single class
  • Stacked forms now follow the grid
  • Explicitly set columns to display: block

Documentation

Development tooling

Assets 2
Pre-release
Pre-release

@deadlight deadlight released this May 21, 2019 · 104 commits to master since this release

Getting Vanilla Framework

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

This release includes the changes included in 2.0.0-alpha with the following additional changes:

New

Features

  • Introduced new variable to change the font-weight for bold fonts

Components and utilities

  • Added fixed-width utility and expose it as class
  • Added bordered row

Documentation

Website

  • Upgraded Husky config (previous version was deprecated)

Bug fixes

  • Stepped-detailed list: fix alignment to rows
  • u-min-margin--bottom: ensure it keeps text on baseline grid
  • Fixed tick position in lists
  • Convert p-card margin to padding so it pushes border down
  • Fixed p-strip selector so class order doesn't matter
  • Fixed typo in the base buttons disabled class (was .is--disabled, corrected to .is-disabled)
Assets 2
Pre-release
Pre-release

@deadlight deadlight released this May 10, 2019 · 124 commits to master since this release

Getting Vanilla Framework

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

New

Features

  • Renamed the "code snippet" component "code copyable"
  • Added a .has-icon class for buttons
  • Converted tabs to use flex for consistent cross-browser rendering
  • Added a fading background to tabs when they extend out of a container
  • Added new greys to the default colour palette
  • Optimised embedded SVG images in the Sass
  • Increaded the size of the thumb image size
  • Updated the sizes of social media icons
  • Added a script for developers to analyse individual patterns with Parker
  • Removed the min-width of tooltips
  • Updated the max-width of typographic elements
  • Added a "stacked" variant of headings with icons
  • Restyled radio buttons and checkboxes, ensuring consistency
  • Renamed the old pagination component to "article pagination" to hint at its use
  • Added a prettier dependency with a pre-commit hook to enforce code quality
  • Made extensive code quality updates following running prettier for the first time
  • Added new size variants for pull-quotes, changed the quote mark colour to mid-dark, removed italic styling and made several changes to positioning and line height sizes in the component
  • Reduced the font-weight of h2 and p-heading--two
  • Updated button margin and padding to be scalible and in-line with the baseline grid
  • Stepped lists change to the smaller layout when the navigation threshhold is met
  • The vf-focus mixin no longer has an offset and increased the outline size
  • Updated max-widths of headings so that they are no longer narrower than paragraphs in some use cases
  • Changed the abbr cursor style to "help"
  • Removed Blink mac system font from the font stack
  • Removed box-shadow from form elements
  • Darkened the border color of checkboxes and radio buttons for increases accessibility
  • Upped the grid max width base valie from 990 to 1200
  • Complete overhaul of vertical spacing. Most element combinations correctly fit to the basline veritcal grid wihout the need to write custom styles
  • Added rules for typographic edge-cases which require special spacing
  • Broke up the large _typography.scss file into smaller files
  • Changed the prefix "intra" to "inner" on all spacing variables that use it to make the convention clearer
  • Changed the prefix "inter" to "outer" on all spacing variables that use it to make the convention clearer
  • Standardised the naming of spacing variables to use S/M/L naming where possible
  • Updated u-vertically-center to also work on small viewports
  • Added a max-width to label elements
  • Increased the allowed number of media queries in the project to 50 in the parker configuration
  • Add optional font-size increase on the 1680 breakpoint
  • Added an optional image element to the pull quote pattern
  • Adjusted the base font size so that it respects browser accessibility settings
  • Refactored all *.scss files to remove sass nesting which was just being used to build classnames - files are now flatter and have full classnames in more places, making searching code more intuitive
  • p-aside renamed p-table-of-contents to reflect its more specific use
  • Updated several icon assets for improved quality and reduced filesize
  • Updated p-accordion so that icons appear on the left rather than the right
  • Added support for users who set prefer-reduced-motion removing all animations when the setting is detected
  • Inline code elements now have a grey highlight to help them stand out from other text
  • Added renovate to the project to help keeping dependencies up-to-date
  • Removed shelves grid and reimplemented the functionality with CSS grid
  • Replaced the chevron icon used in various patterns with a more visually appealing version

Components and utilities

  • Added new p-subnav pattern for drop-down menus in navigation
  • Added new u-no-print to exclude web-only elements from printed pages
  • Added a new pagination component

Removed deprecated components

  • Button swtich - button.p-switch: applying this pattern to a checkbox is more semantic
  • Visibility utilities - u-hidden, u-visible: use u-hide and its variants in their place
  • Code snippet - p-code-snippet: use p-code-copyable which uses near-identical styling
  • Warning notification - p-notification--warning: use p-notification--caution which is identical but renamed
  • --no-underline link varients: these were based on the old, border-based underline style and are obsolete. If needed, they may be re-introduced after a re-write
  • p-inline-images__img and p-inline-images img: p-inline-images__item and p-inline-images__logo now encapsulate all requirements
  • u-float--right and u-float--left are now u-float-right and u-float-left
  • p-link--strong removed with no need for replacement
  • p-footer: this component can be replicated using other, more generic components
  • p-navigation--sidebar: this can be replicated with other components if required but, for general navigation, the standard p-navigation is preferred
  • $color-warning variable removed: replaced with $color-caution

Documentation

Content

  • Added a sub-heading example
  • Updated the colour palette page
  • Added an example of a stacked heading with icons
  • Documented pull-quote varients
  • Updated stepped-list documentation
  • Merged all "code" component documentation to allow easier comparison
  • Changed the layout of the icons page
  • Added new documentation for the updated typographic spacing
  • Updated the tooltip example markup
  • Expanded documentation: colour, strip, breadcrumb, accordion, contextual menu, typography, pagination, navigation, code, tabs, typography, tables, quote, heading icon, embedded media, assets settings, animations, heading icon, icons, images, table of contents, buttons, media object, forms, list tree, links, modal, notifications, cards, tooltips, search, switch, slider, divider, lists, muted heading, matrix, spacing

Website

  • Removed flask for page generation
  • Added nginx configuration
  • Updated the navigation to match the rest of the website
  • Added Usabilla user feedback widget
  • Updated the "report a bug" link
  • Updated mobile nav to use dropdown two menus grouped by "About" and "Patterns" rather than having two nav menus stacked
  • Restyled the sidebar and the background to light grey
  • Updated included Vanilla Framework version to 1.8.1
  • Moved code examples into /docs
  • Converted the site generator to Jekyll (at v3.8.4)

Bug fixes

  • Widened the styling of input type="number" elements to allow for 4 digits
  • Updated the accordion toggle to open/close the accordion
  • fieldset styling updated to match the design spec and made their bottom margin scalable
  • Removed unnecessary roles from example markup
  • Active buttons now have a discerable hover state
  • Update the colours for button hover states
  • Removed redundant [scope="row"] and [scope="col"] in examples
  • Fixed the positioning of the "copy to clipboard" button on code snippets
  • Corrected the positioning of the close button in notifications
  • Updated the slider pattern to use rems rather than ems in spacing
  • Fixed strip border issues by positioning them reletively implementing a pseudo-border
  • Fixed visibility of hover state on navigation items when the background colour is dark
  • Fixed icon positioning for browser consistency
  • Stopped reset buttons in forms being hidden by default
  • Fixed the specificity of p-card selectors
  • Made sure that the base typographic rules appear early in the CSS
  • Refactored the navigation pattern to fix bugs with different background colours
  • Fixed drift to basline grid on longer pages due to rounding errors
  • Changed pre and code whitespace to scroll sideways rather than wrapping
  • Added a background colour to the root html element to avoid reliance on browser defaults
  • Added form validation feedback to select inputs
  • Aligned tickboxes and radio buttons with the baseline grid
Assets 2

@Caleb-Ellis Caleb-Ellis released this Jan 16, 2019 · 483 commits to master since this release

Getting Vanilla Framework

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

Bug fixes

  • Fixed a bug where scss variables in .p-slider were not interpolated correctly, making them improperly rendered in MS browsers

Documentation

  • Added .u-baseline-grid utility page to the docs
Assets 2

@Caleb-Ellis Caleb-Ellis released this Jul 16, 2018

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.
Assets 2
You can’t perform that action at this time.