npm i @transfermarkt/global-styles
To import the styles you have 2 options:
- Import all SCSS files at once (not recommended)
@use '@transfermarkt/global-styles
- 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 *;
-
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.
.class { font-size: rem-calc(12); }
Returns a list of converted values.
-
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.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.
Ideal for responsive designs and calculations where units (like px, em, rem) need to be removed from measurements to perform arithmetic or logical operations.
-
Returns the HEX value of a specific color.
.class { color: tm-color(gun-powder); }
-
Returns a font set of the given name -> see font variables for available sets.
.class { font-family: tm-font(primary); }
-
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.
breakpoint
Generates a media query for the given breakpoint.
.class {
@include breakpoint(desktop) {
width: 200px;
}
-
Color palette of the colors currently used in the Transfermarkt projects.
Here you can find the available colors.
Should only be used via the
tm-color
function. -
Collection of font sets currently in use in the Transfermarkt projects.
Here are the available font sets.
Should only be used via the
tm-font
function.