@talenra/stylebox v7.0.0

talenra – Stylebox library for Sass

SCSS-flavoured ready-to-use design basics and style presets for talenra

Contents

• Installation
• Usage
  • Breakpoints
    • bp-get($name)
  • Colors
    • color-get($name, $tint)
  • Effects
    • Border radius
    • effect-use-drop-shadow()
  • Typography
    • type-get-font()
    • type-use-font()
    • type-use($preset, $weight, $style, $flowtext, $suppress)
  • Sassbox
• Contributing
• Versioning
• License
• Contact

Installation

Install the package.

npm i @talenra/stylebox

If you plan to use the typographic features of this library, you have to implement the required fonts in your app.

<!-- Place these lines in the header section of the index.html at the root of your app to load the required fonts. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet" />

Usage

Import the complete toolbox in your project.

// Import stylebox
@use '@talenra/stylebox';

Breakpoints

bp-get($name)

// Import stylebox
@use '@talenra/stylebox';

@media screen
and (max-width: #{stylebox.bp-get($name: "use-overlay-until") - 0.1px}) {
  // Styles for "overlay layout"
}

For media queries like above you might want to use the included and pre-configured media query manager (sass-mq). This is how the media query from the example above is written using sass-mq:

// Import stylebox
@use '@talenra/stylebox';

@include stylebox.mq($until: 'use-overlay-until') {
  // Styles for "overlay layout"
}

Parameters

The table below shows all supported breakpoint names.

Note that the suffix -until excludes the given boundary while -from includes it (e.g. overlay-style is used for viewports smaller 1200px while medium-sized panels are used for viewports of 1588px width).

Colors

color-get($name, $tint)

// Import stylebox
@use '@talenra/stylebox';

.title {
  // Use stylebox-color in your stylesheet
  color: stylebox.color-get('black', 80); // #333333
}

Parameters

The table below shows all supported color names and tints.

Color Name	Tint	Swatch
black	100
	80
	70
	60
	50
	40
	30
	20
	10
	5
	2
white
petrol-dark	100
	5
petrol	100
	20
	10
denim-dark	100
	5
denim	100
	20
	10
status-green	100
status-red	100
status-orange	100
status-violet	100

Return Value

Returns the HEX value of the given color/tint. The function will warn you about invalid color names and tints and return a fancy replacement color (deeppink).

Effects

Border radius

Presets for border-radiuses used for rounded corners.

*) Default value used if parameter $preset is omitted.

effect-get-border-radius()

// Import stylebox
@use '@talenra/stylebox';

.pane {
  // Use default border-radius default value in your stylesheet
  border-radius: stylebox.effect-get-border-radius();
}

.rounded {
  // Use with a non-default preset
  border-radius: stylebox.effect-get-border-radius('m');
}

Parameters

none

Return Value

Returns the border-radius default value. Get the value if you need it for further calculations. If you only need to apply the border-radius you should use effect-use-border-radius.

effect-use-border-radius()

// Import stylebox
@use '@talenra/stylebox';

.pane {
  // Apply border-radius in your stylesheet
  @include stylebox.effect-use-border-radius();
}

.rounded {
  // Use with a non-default preset
  @include stylebox.effect-use-border-radius('m');
}

Parameters

none

Return Value

Applies the default border-radius definition.

effect-use-drop-shadow()

// Import stylebox
@use '@talenra/stylebox';

.pane {
  // Apply drop-shadow in your stylesheet
  @include stylebox.effect-use-drop-shadow();
}

Parameters

none

Return Value

Applies the default box-shadow definition.

Typography

type-get-font()

// Import stylebox
@use '@talenra/stylebox';
@use '~other-lib' with (
  $font: stylebox.type-get-font()
);

Parameters

none

Return Value

Returns the default font-family.

type-use-font()

// Import stylebox
@use '@talenra/stylebox';

body {
  // Set default font and basic global typographic settings
  @include stylebox.type-use-font();
  // font-family: cfg.$font-family;
  // font-feature-settings: 'liga' 1, 'kern' 1;
  // -webkit-font-smoothing: antialiased;
}

Parameters

none

Return Value

Applies the default font-family and basic global typographic settings.

type-use($preset, $weight, $style, $flowtext, $suppress)

// Import stylebox
@use '@talenra/stylebox';

.shortcut {
  // Use typographic preset in your stylesheet
  @include stylebox.type-use('xxs');
  // font-size: 0.625rem;
  // line-height: 0.75rem;
  // font-weight: 300;
  // letter-spacing: 0.02em;
}

Parameters

All parameters are optional

The table below shows all supported typographic presets.

*) Default: Fallback value if param omitted (type-use() equals type-use($preset: 'm', $weight: 'regular', $style: 'normal', $flowtext: false))

Notes:

• Preset h-xl is currently not available.
• Presets with prefix h- are mainly used for headings.

Return Value

Applies declarations for font-size, line-height, font-weight, font-style and letter-spacing.

If you need to suppress a property, add it to the map passed in parameter $suppress.

.button {
  // Suppress `line-height`(e.g. for buttons and one-liners)
  @include stylebox.type-use('h-l', $suppress: ('line-height'));
  // font-size: 1.6875rem;
  // font-weight: 400;
  // font-style: normal;
  // letter-spacing: 0;
}

If you omit a parameter, the mixin will fallback to the default value. Same with invalid parameter values. The mixin will warn you about invalid parameter values.

Sassbox

@talenra/stylebox exposes the complete sassbox API.

@use '@talenra/stylebox';

.foo {
  margin-top: stylebox.px-to-rem(24);
}

Contributing

Contributions welcome. Please submit a pull request.

Versioning

We use SemVer for versioning.

License

This project is licensed under the ISC License - see the LICENSE file for details.

Contact

Lead talenra