Visual Framework
Visual Framework
Mixins, functions and variables to power all vf-core components. If you're using a Visual Framework component it's a near-certainty that you'll need this component.
Note: these utilise vf-design-tokens
set-color($color-name)
map-deep-get($map, $keys)
set-layer($layer)
str-replace($name, $number)
Slice off the first amount($number) of characters from the $name value passed. Primarily used to replace the start of variables for the utility class generation.
Rollup of all functions.
Reusable styling for html blockquote elements.
@include blockquote;
Reusable styling for button elements
@include vf-button;
Reusable styling for divider elements and styling
@include vf-divider;
Reusable styling for figures with optional caption styling
@include figure($has-caption: true);
Nothing, yet.
Styling for links.
@include inline-link( $vf-link--color: $vf-link--color, $vf-link--hover-color: $vf-link--hover-color, $vf-link--visited-color: $vf-link--visited-color, $vf-include-normalisations: $vf-include-normalisations);
@include button-link( $vf-link--color: $vf-link--color, $vf-link--hover-color: $vf-link--hover-color, $vf-link--visited-color: $vf-link--visited-color);
button-link--ghost( $vf-link--color: $vf-link--color, $vf-link--hover-color: $vf-link--hover-color, $vf-link--visited-color: $vf-link--visited-color);
Styling for list types
@include($classname: optional-classname-to-usm, $type: null, unordered, ordered or inline);
Margin, recommended to use with sizing maps
@include margin--block(bottom, map-get($vf-spacing-map, vf-spacing--500));
margin-block: specify one value for bottom and top, top or bottommargin-all: specify one value for left or right, left or rightmargin: specify all or a value for eachPadding, recommended to use with sizing maps
@include padding--block(bottom, map-get($vf-spacing-map, vf-spacing--500));
padding-block: specify one value for bottom and top, top or bottompadding-all: specify one value for left or right, left or rightpadding: specify all or a value for eachCurrently not used. Intelligently pick if white or black should be used as a contrasting colour
Generate correct font information when included into an element. Recommended to use with typography and sizing maps
@include set-type(text-body--3, $global-font-family, $custom-margin-bottom: vf-spacing--500, $color: secondary)
Color setting can be turned off by passing $color: ignore.
Generate lists of values in design token maps. Intended for use by the vf-utility-classes component
A non-jitter causing way to slide elements up/down on hover.
@include vf-slide-on-hover($shift-distance, $direction:up);
Generate lists of values in design token maps. Intended for use by the vf-utility-classes component
Generate lists of values in design token maps. Intended for use by the vf-utility-classes component
Rollup of all mixins.
Rollup of all utility mixins.
For disable link elements, actions @include vf-disabled($vf-link--disabled-color);
Native CSS properties, currently limited to document spacing.
Global Sass variable defaults for the high-level page look of typography, page width, deprecated component text, if normalisations should be included.
Rollup of global Sass variables.
<!-- no template -->
This repository is distributed with npm. After installing npm, you can install vf-sass-config and its dependencies with this command.
$ yarn add --dev @visual-framework/vf-sass-config @visual-framework/vf-design-tokens
You might also find the the vf-sass-starter a useful starting point for setting up a customised Sass build.
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import 'vf-global-variables';
@import 'vf-variables';
@import 'vf-functions';
@import 'vf-mixins';
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
@mixin set-type margin-top now inherits any applicable vf-stack margin.interactive-color sass maplink-color and brand-color when using the default color.inline-link now uses link-color mixin.set-type now sets a colour depending on font sizes (opt-out by passing $color: ignore).set-type to use the primary colour (off black) by defaultvf-color__text.custom-properties.scssvf-color__buttons.custom-properties.scssvf-color__brand.custom-properties.scssvf-themes.custom-properties.scssmixins/vf-utility-mixins.scss to index.scssvf-color--neutral lookup.neutral(Nn)set- style functions to cleaner version$global-page-max-width variable so that it's consistent with the page width across components - set to 80remspace Sass function to save the keystrokes.map-get($vf-spacing-map, vf-spacing--400) you can write spacing(400) for the same result.set-color and set-ui-color to be something like color(green) instead of set-color(vf-color--green). The old way still works.vf-global-custom-properties.scss--page-grid-gap wasn't getting it's correct spacing unit because the Sass map-get was not interpolated.--page-grid-gap for larger viewports to 2rem instead of 1.5rem.embl-grid small column size from 238px to 16rem.$margin--block-endwidth: 100%; as it was defaulting to width: auto;webkit-appearance: none; as needed for Safari browsers as autoprefixer is not doing this$global-page-max-width variable so that it's consistent with the page width across components - set to 81.25remvf-body component@mixin inline-link--dark-mode
File system location: components/vf-sass-config
Find an issue on this page? Propose a change or discuss it.