Nary a Package Missing

    @fylgja/base

    1.1.1 • Public • Published

    Fylgja - Base

    NPM version license

    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 import
    @import "@fylgja/base";

    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.

    View SCSS variables
    // Typography
    $family-main: (
        system-ui,
        -apple-system,
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji"
    ) !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.875em !default;
    
    $quotes: "" "" "" "" !default;
    $blockquote-margin: 2em 0 !default;
    $blockquote-padding-start: 1em !default;
    $blockquote-border-color: var(
        --quote-border-color,
        var(--color-theme, currentcolor)
    ) !default;
    $blockquote-border-start: 0.25em solid $blockquote-border-color !default;
    $blockquote-font-style: italic !default;
    
    $accent-color: var(--color-theme) !default;
    
    $link-color: var(--color-theme) !default;
    $link-color-focus: var(--color-theme) !default;
    $link-style: none !default;
    $link-style-focus: underline !default;
    
    $selection-bg: $color-theme-fade !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) !default;
    $mark-color: var(--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: var(--family-header) !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.2em !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: 1.6em !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.35em !default;
    $h3-line-height: null !default;
    $h3-font-weight: null !default;
    
    $h4-margin: null !default;
    $h4-family: null !default;
    $h4-font-size: 1.25em !default;
    $h4-line-height: null !default;
    $h4-font-weight: null !default;
    
    $h5-margin: null !default;
    $h5-family: null !default;
    $h5-font-size: 1.125em !default;
    $h5-line-height: null !default;
    $h5-font-weight: 500 !default;
    
    $h6-margin: null !default;
    $h6-family: null !default;
    $h6-font-size: 1em !default;
    $h6-line-height: null !default;
    $h6-font-weight: bolder !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";

    Install

    npm i @fylgja/base

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    10

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    23.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • grimlink