talenra Stylebox

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

Contents

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

Installation

Add the @talenra registry and the default registry in your .npmrc.

registry=https://registry.npmjs.com

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
denim	100
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

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;
  // font-style: italic;
  // 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, italic
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*	italic*	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.
	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.md file for details.

Contact