Styles - Abstracts

This package gathers all Sass tools and helpers used across the project. Every global variable, function, mixin and placeholder should be put in here.

The rule of thumb for this folder is that it should not output a single line of CSS when compiled on its own. These are nothing but Sass helpers.

Reference: Sass Guidelines > Architecture > Abstracts folder

Styles packages structure

The Styles - Abstracts package is created as part of restructuring Studyportals styling. This structure is based on a combination of SMACCS and the 7-1 pattern.

More information about how we use the patterns, can be found in the Knowledge Vault.

Getting started

Installing the package

Install the package

npm install --save-dev @studyportals/styles-abstracts

Publishing the package on the GitHub Package Registry

1. Ensure you are authenticated to the GitHub Package Registry. This section explains how.
2. Run npm publish

Usage of functionality

How can I use:

1. Spacing

Usage

There are two ways to use this package:

1. Import all files into your project.
2. Select specific files to use in your project.

Using the entire package

To use the entire package, you can import the abstracts.scss file from the package into your project.

// Import the entire abstracts package
@import '~@studyportals/styles-abstracts/abstracts.scss';

// Importing using the full url
@import './node_modules/@studyportals/styles-abstracts/abstracts.scss';

The ~ is an alias for node_modules. You might need to set this up in your project. Otherwise you can use the full url.

Using specific files

It's also possible to import only the files you need in your project. For example, only the (color) variables and/or the typography mixins.

To do this, you only need to import the specific files from the package into your project.

Examples:

// Import only the mixins.
@import '~@studyportals/styles-abstracts/mixins';

// Import only variables.
@import '~@studyportals/styles-abstracts/variables';

// Import only the color variables.
@import '~@studyportals/styles-abstracts/variables/colors';

// Import only the font size mixins.
@import '~@studyportals/styles-abstracts/mixins/typography';

For all available files, you can explore the contents of this package.

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

XOXO,

Shared with style team