Global Styles and Stylelint global preset for Transfermarkt projects

Install

npm i @transfermarkt/global-styles

Use stylelint config

To use the stylelint config you have to edit your package.json

package.json

"stylelint": {"extends": "./node_modules/@transfermarkt/global-styles/config/stylelint/index.js"}

Configuration of customSyntax

It may be necessary to configure the customSyntax option in your stylelint configuration. This is necessary if you use a syntax that is not supported by stylelint out of the box. For example, if you use the postcss-scss syntax, you need to add the following to your stylelint configuration:

"stylelint": {
  "extends": "@transfermarkt/stylelint-config",
  "customSyntax": "postcss-scss"
}

For example a project with .scss files will need the custom syntax option with postcss-scss.

The default value is postcss-html.

Import styles

To import the styles you have 2 options:

1. Import all SCSS files at once (not recommended)

   @use '@transfermarkt/global-styles

2. Include parts of global-styles

   @use '@transfermarkt/global-styles/scss/functions' as *;

Maybe you have to specify the path with the node_modules folder

@use 'path-to-node_modules-folder/@transfermarkt/global-styles/scss/functions' as *;

Functions

1. rem-calc

   Description

   Converts one or more pixel values into matching rem values. One or more values to convert. Be sure to separate them with spaces and not commas. Based on 16px.

   Usage

   .class {
     font-size: rem-calc(12);
   }

   Functionality

   Returns a list of converted values.

2. strip-unit

   Description

   The strip-unit function in SCSS is designed to remove the unit from a numerical value, returning just the numeric part. This is particularly useful when you need to perform calculations or operations that require unitless numbers.

   Functionality

   Checks if the provided value is a number with a unit. If so, it strips off the unit by dividing the number by 1, effectively retaining only the numeric value. If the input is already a unitless number or not a number, it returns the value as is.

   Use Case

   Ideal for responsive designs and calculations where units (like px, em, rem) need to be removed from measurements to perform arithmetic or logical operations.

3. tm-color

   Description & Functionality

   Returns the HEX value of a specific color.

   Usage

   .class {
     color: tm-color(gun-powder);
   }

4. tm-font

   Description

   Returns a font set of the given name -> see font variables for available sets.

   Usage

   .class {
     font-family: tm-font('septenary');
   }

   Warning: Using tm-font with 'primary' is deprecated!

5. zf-to-rem

   Description

   Converts a pixel value to matching rem value. Any value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the $global-font-size variable.

Mixins

breakpoint

Description

Generates a media query for the given breakpoint.

Usage

.class {
  @include breakpoint(desktop) {
    width: 200px;
  }

Variables

1. Colors

   Description

   Color palette of the colors currently used in the Transfermarkt projects. Here you can find the available colors.

   Usage

   Should only be used via the tm-color function.

2. Fonts

   Description

   Collection of font sets currently in use in the Transfermarkt projects. Here are the available font sets.

   Usage

   Should only be used via the tm-font function.