@talenra/stylebox v1.0.1
talenra Stylebox
SCSS-flavoured ready-to-use design basics and style presets for talenra apps.
Contents
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.