beta This component version is ready to be used but is still in active development.

Sass Starter utility

This Package is to get your project up and running with the minimum Sass files and dependencies you may require.

github location npm version

Usage

This component's index.scss file will import the Design Tokens, the Sass variables, mixins, functions to get you started as well as importing the CSS Utility Classes, the Utilities, and the Font CSS for IBM Plex Mono and IBM Plex Sans.

If you do not require this you can create your own @imports removing what you want from this list:

// Import Sass Variables, Mixins, and Functions from @visual-framework/vf-sass-config
@import 'vf-sass-config/index.scss';

// Include all Utility Classes from @visual-framework/vf-utility-classes
@import 'vf-sass-config/mixins/vf-utility-mixins.scss';
@import 'vf-utility-classes/vf-utility-classes.scss';

// Include all SCSS Utilities from @visual-framework/vf-sass-utilities
@import 'vf-sass-utilities/vf-sass-utilities.scss';

// Include the relevant IBM Plex typefaces
@import 'vf-font-plex-mono/vf-font-plex-mono.scss';
@import 'vf-font-plex-sans/vf-font-plex-sans.scss';

Variants

HTML
<!-- no template -->
              

Examples

Installation info

This repository is distributed with npm. After installing npm and yarn, you can install vf-sass-starter and its dependencies with this command.

$ yarn add --dev @visual-framework/vf-sass-starter @visual-framework/vf-design-tokens @visual-framework/vf-font-plex-mono @visual-framework/vf-font-plex-sans @visual-framework/vf-sass-config @visual-framework/vf-sass-utilities @visual-framework/vf-utility-classes

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-sass-starter/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

0.1.24

  • Dependency bump.

0.1.23

  • Dependency bump.

0.1.19

  • dependency bump

0.1.13

  • dependency bump

0.1.12

  • dependency bump

0.1.7

  • dependency bump

0.1.4

  • dependency bump

0.1.2

  • dependency bump

0.1.1

  • dependency bump

0.1.0

  • updates package.json to dependencies rather than devDependencies
  • updates relative paths of index.scss to target installed packages in node_modules

0.0.3

  • Initial version

Assets



File system location: components/vf-sass-starter

Find an issue on this page? Propose a change or discuss it.