7.0.0 • Published 2 months ago

@talenra/stylebox v7.0.0

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
2 months ago

talenra – Stylebox library for Sass

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

Contents

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
 ParamDefault 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-until1200pxUse overlay-style layout for side-navigation and panels for viewports < use-overlay-until.
use-panel-medium-from1588pxUse medium-sized panels for viewports >= use-panel-medium-from.
use-panel-max-from1834pxUse max-sized panels for viewports >= use-panel-max-from.
use-sidenav-medium-from1217pxUse medium-sized side-navigation for viewports >= use-sidenav-medium-from.
use-sidenav-max-from1687.5pxUse 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
 ParamDefault ValueDescription
 str $namenullColor name, e.g. 'black'
 int $tint100Tint, e.g. 80

The table below shows all supported color names and tints.

Color Name TintSwatch
black100 #000000
80 #333333
70 #4D4D4D
60 #666666
50 #808080
40 #999999
30 #B3B3B3
20 #CCCCCC
10 #E6E6E6
5 #F2F2F2
2 #F8FBFF
white#FFFFFF
petrol-dark100 #005F71
5 #F4F6F7
petrol100 #0099A8
20 #D8EBEE
10 #EAF4F6
denim-dark100 #04466A
5 #F4F6F7
denim100 #0069A3
20 #CCE1ED
10 #E5F0F6
status-green100 #00d000
status-red100 #E20057
status-orange100 #E26000
status-violet100 #B103C7
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.

namevalue
s*3px
m6px

*) 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 ValueDescription
enum $presetmSupported values: xxs, xs, s, m, l, h-s, h-m, h-l, h-xxl
enum $weightnullSupported values: light, regular, medium
enum $stylenullSupported values: normal
bool $flowtextfalseOptimize preset for flowtext (multi-line text)
list $suppressnullSuppress a given CSS property. Currently only supports line-height

The table below shows all supported typographic presets.

 presetweight stylesizeNotes
xxslight*normal*10pxUsed for shortcuts only (e.g. "alt-Y")
xsregular*, lightnormal*12px
sregular*, lightnormal*14px
m*medium, regular*, lightnormal*16px
lmedium, regular*, lightnormal*18px
h-sregular*normal*20px
h-mregular*normal*24px
h-lregular*normal*27pxUsed for app header only.
h-lmediumnormal*28pxUsed for app header only. Weight medium uses bigger font-size.
h-xxlregular*normal*40pxUsed 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

Lead talenra

6.1.0

3 months ago

6.3.0

2 months ago

6.2.0

3 months ago

6.3.2

2 months ago

6.3.1

2 months ago

7.0.0

2 months ago

6.0.0

4 months ago

4.7.0

5 months ago

5.0.0

5 months ago

4.6.0

8 months ago

4.5.0

9 months ago

4.1.0

9 months ago

4.1.2

9 months ago

4.0.0

9 months ago

1.0.1

3 years ago

1.0.0

3 years ago

1.4.0

3 years ago