talenra – Stylebox library for Sass

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

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

|  Param | Default Value |  Description | | ------------ | ------------- | ------------------------------------------ | |  str $name |  null |  Breakpoint name, e.g. use-overlay-until |

The table below shows all supported breakpoint names.

|  Breakpoint Name |  Value |  Description | | ------------------------- | -------: | -------------------------------------------------------------------------------------------- | | use-overlay-until | 1200px | Use overlay-style layout for side-navigation and panels for viewports < use-overlay-until. | | use-panel-medium-from | 1588px | Use medium-sized panels for viewports >= use-panel-medium-from. | | use-panel-max-from | 1834px | Use max-sized panels for viewports >= use-panel-max-from. | | use-sidenav-medium-from | 1217px | Use medium-sized side-navigation for viewports >= use-sidenav-medium-from. | | use-sidenav-max-from | 1687.5px | Use max-sized side-navigation for viewports >= use-sidenav-max-from. |

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

|  Param | Default Value | Description | | ------------ | ------------: | -------------------------- | |  str $name | null | Color name, e.g. 'black' | |  int $tint | 100 | Tint, e.g. 80 |

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.

| name | value | | ---- | ----- | | s* | 3px | | m | 6px |

*) 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

|  Param |  Default Value | Description | | ---------------- | -------------- | -------------------------------------------------------------------------- | | enum $preset | m | Supported values: xxs, xs, s, m, l, h-s, h-m, h-l, h-xxl | | enum $weight | null | Supported values: light, regular, medium | | enum $style | null | Supported values: normal | | bool $flowtext | false | Optimize preset for flowtext (multi-line text) | | list $suppress | null | Suppress a given CSS property. Currently only supports line-height |

The table below shows all supported typographic presets.

|  preset | weight |  style | size | Notes | | ------- | ------------------------------ | ---------- | ------ | ---------------------------------------------------------------- | | xxs | light* | normal* | 10px | Used for shortcuts only (e.g. "alt-Y") | | xs | regular*, light | normal* | 12px | | s | regular*, light | normal* | 14px | | m* | medium, regular*, light | normal* | 16px | | l | medium, regular*, light | normal* | 18px | | h-s | regular* | normal* | 20px | | h-m | regular* | normal* | 24px | | h-l | regular* | normal* | 27px | Used for app header only. | | h-l | medium | normal* | 28px | Used for app header only. Weight medium uses bigger font-size. | | h-xxl | regular* | normal* | 40px | Used on login screen only. |

*) 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