@fylgja/base

Fylgja - Base

Common defaults to make your body and typography look good and easy to change to your needs.

Installation

npm install @fylgja/base

Then include the component in to your code via;

@use "@fylgja/base";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/base/base.css";

How to use

The base component can be considered as more than one component, everything makes more sense together, since these are small CSS setters to the body, typography and media.

Here is a list of each component and the main things each component does.

Component Parts	Description
Action	Acts as CSS reset for any clickable element behavior
Body	Sets the base font, box-sizing and root vars
Figure	Set default spacing
List	Set default spacing
Media	Makes images responsive by default
Typography	Sets defaults for all common text elements

There are also helper classes, but mostly all styles are set directly on the html elements.

Class	Description
.h1 to .h6	Same as the html element of the same name
.hr	Same as the <hr> element
.text-small	Same as the <small> element

Config

As with almost all of our components, you can configure CSS variables to add your own look/style.

Direct control on the base styles, you can you modify the following SCSS variables.

// Typography
$family-main: (system-ui, -apple-system, Helvetica, Arial, sans-serif) !default;
$family-header: $family-main !default;
$font-size: 1rem !default;
$font-weight: normal !default;
$line-height: 1.5 !default;
$letter-spacing: normal !default;
$caption-size: 0.9em !default;

$quotes: "“" "”" "‘" "’" !default;

$link-color: var(--color-theme, #{$color-theme}) !default;
$link-color-state: var(--color-theme, #{$color-theme}) !default;
$link-style: underline !default;
$link-style-state: none !default;

$selection-bg: $color-theme-soft !default;
$selection-color: inherit !default;

$hr-size: 1px !default;
$hr-style: solid !default;
$hr-color: currentColor !default;
$hr-margin: 1em 0 !default;

$mark-padding: 0 0.15em !default;
$mark-bg: var(--selection-bg, #{$selection-bg}) !default;
$mark-color: var(--selection-color, #{$selection-color}) !default;

// List
$list-margin: $item-spacer;
$dl-margin: $item-spacer;
$dd-margin: 0 0 0.5rem;

// Headings
$h-margin: 1.33em 0 0.67em !default;
$h-family: inherit !default;
$h-font-size: 1em !default;
$h-line-height: inherit !default;
$h-font-weight: normal !default;

$h1-margin: 0 0 0.45em !default;
$h1-family: null !default;
$h1-font-size: 2.5em !default;
$h1-line-height: null !default;
$h1-font-weight: null !default;

$h2-margin: 1.33em 0 0.55em !default;
$h2-family: null !default;
$h2-font-size: 2em !default;
$h2-line-height: null !default;
$h2-font-weight: null !default;

$h3-margin: 1.33em 0 0.6em !default;
$h3-family: null !default;
$h3-font-size: 1.75em !default;
$h3-line-height: null !default;
$h3-font-weight: null !default;

$h4-margin: null !default;
$h4-family: null !default;
$h4-font-size: 1.5em !default;
$h4-line-height: null !default;
$h4-font-weight: null !default;

$h5-margin: null !default;
$h5-family: null !default;
$h5-font-size: 1.25em !default;
$h5-line-height: null !default;
$h5-font-weight: 500 !default;

$h6-margin: null !default;
$h6-family: null !default;
$h6-font-size: null !default;
$h6-line-height: null !default;
$h6-font-weight: bold !default;

FAQ

Is this a Reset CSS or Normalizer CSS component?

No, the base component is a setter for common styles but not a reset file.

Each reset for a specific html element is handled by the component that needs it,

not first set by one reset file and then restyled by the component.

Doing that would be considered bad practice and creates double CSS.

Do I need everything in this CSS component?

No. If you only need parts of the base component, just import each part.

@use "@fylgja/base/body";
@use "@fylgja/base/media";

Changelog

[1.0.0] - 2021-06-22

Initial Release 🎉