@fylgja/section

    1.0.0 • Public • Published

    Fylgja - Section

    NPM version license

    The Section component is a wrapper component to show content in a sectioned area.

    Like a Hero, Banner or just simple section with a different color in the page.

    Installation

    npm install @fylgja/section

    Then include the component in to your code via;

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

    How to use

    To use the section component create element with the class .section, or use the native html element <section>

    <div class="section"></div>

    This will create a element with CSS variables, easily customizable, the min-height, background and colors.

    So the real power lies in its strength to be customized via CSS variables.

    So if you want to build something like a hero, you only need something like this;

    <style>
        #page-hero {
            --height: 500px;
            --img: url(https://placeimg.com/1024/500/nature);
            --bg: var(--color-theme);
            --color: var(--color-on-theme);
            padding: 2em 1em;
        }
    </style>
    <section id="page-hero">
        <h1>Heading</h1>
        <p>Slogan text</p>
    </section>

    Or make it more fancy via some extra fylgja components. Like the @fylgja/base, @fylgja/container and @fylgja/utilpack.

    Example: make a hero component that is realy easily build.

    <style>
        #page-hero {
            --height: 500px;
            --img: url(https://placeimg.com/1024/500/nature);
            --bg: var(--color-theme);
            --color: var(--color-on-theme);
        }
    </style>
    <section id="page-hero" class="flex iteme-center justify-center py-8">
        <div class="container">
            <h1 class="mb-0">Heading</h1>
            <p class="h5 mt-0">Slogan text</p>
        </div>
    </section>

    Config

    Unlike other components, this component fully runs on the power of CSS. And has no mayor config options, except for the theme default version.

    $enable-section-theme: true !default;

    When enabled it allows you to use the section with the theme color variable class.

    <div class="section -theme"></div>

    It sets the background color to the $color-theme value, and sets the color to the $color-on-theme value.

    Install

    npm i @fylgja/section

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    8

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    3.96 kB

    Total Files

    5

    Last publish

    Collaborators

    • grimlink