This our first release in nearly a month due to some issues with an internal technical tool.
Work on roadmap goals
- A design kit is being actively developed by a new team member, so we've added a new "design kit" section.
- The Visual Framework's design principles have been added.
- Unique to the web are certain types of content that support user interaction, we've begun documenting how to use "read more", icons, white space and more. We're grouping this common advice in a web content guide.
- We continue to work on page-level examples and boilerplates in the patterns section.
High level changes
- Updated colour function name: the Sass colour function no longer requires the
set-prefix and can be used as
background-color: color(color-grey-darkest);Git diff
- Major improvements to vf-hero and vf-card (scroll down for more)
This releases 2.4.7 to the CDN
As a reminder, the rollup CSS and JS are compilations of many independently versioned components and is likely to contain changes that may disrupt the look of your site. We advise testing. Even better is to build your own CSS rollup from the npm sources, you can find a guide here.
vf-card is one of the more popular components. It is now more flexible (both for image sizes and text content) and better indicates linked content.
- fixes issue with HTML Entities and the README when running fractal.
- fixes issue with
vf-card__imageheight in Safari.
grid-template-rowsas it's difficult to define now cards do not have to have images.
- adds a
--vf-card__image--aspect-ratioCSS custom property to help with the initial image height.
- fixes issue with
vf-card__imageheight in Safari
- updates documentation to replace 'title' with 'heading' so it matches CSS classname.
- creates option to for a subheading
- creates option for a card with no image
- adds a svg icon similar to
vf-section-headerwhen the heading has a link
- adds documentation
- adds more examples for the variants available depending on the content
- hides all variants that should not be used.
vf-card-container 3.1.1 npm git diff
- adds ability to define the
- moves the
defaultcontext data in the
.ymlfile to a
variantto allow easier use of
- fixes issue in README that made fractal fail to load the container example.
Also popular is
vf-hero which has been refined and documentation simplified to provide clearer choices.
- adds link styles to the
- updated the documentation to include the
- removes all design variants.
- makes the call to action link a separate entity as there would be a conflict with
- adds a little more documentation.
Small refinements, fixes and documentation
- Makes logo larger only when using extreme variant.
vf-sass-config 2.4.1 npm git diff
- Fixes issue now that link color disabled no longer exists.
vf-content 1.4.1 npm git diff
- Removes the 'dark mode' CSS for links - as it's not implemented.
vf-design-tokens 3.3.0 npm git diff
- removes unused link colours
- removes secondary link colours, as this is more often defined by the parent component.
- removes the 'dark mode' styles as these are not being used.
vf-summary 1.4.1 npm git diff
- Removes the import for
vf-links.variables.scssas it is not needed.
vf-form__fieldset 1.1.1 npm git diff
- style fieldset label as a heading 5
vf-form__item 2.0.1 npm git diff
- Add support for vf-form__select as inline element.
vf-form__radio 2.0.1 npm git diff
- improve horizontal layout of radio with flexbox
vf-pagination 1.0.0-rc.2 npm git diff
- right align pagination options
- Add support for anchor
- Move the example content into a default variant to stop it printing out when using
vf-blockquote 1.1.0 npm git diff
--pullquotevariant as it was never properly finalised and implemented.
vf-content 1.4.0 npm git diff
- adds top margin override for first item inside of
vf-section-header 1.4.0 npm git diff
- changes value of SVG to use
ems so it scales with the typeface size.
- makes the hover effect consistent with new
- makes the positioning match the baseline of the text
- Removes variants that are not to be used from the examples available.
- Adds usage documentation.
vf-breadcrumbs 2.0.2 npm git diff
- Adds a little more documentation.
ebi-vf1-integration 1.0.5 npm git diff
- Handle text color on vf-button--outline.