@vrembem/section

    1.37.0 • Public • Published

    Section

    A container component for wrapping distinct sections of a page.

    npm version

    Documentation

    Installation

    npm install @vrembem/section

    Styles

    @use "@vrembem/section";

    Markup

    Sections are composed using the base wrapper (section) along with three optional elements. The section__container element's primary purpose is to wrap content with a max-width and centered using margin auto. The other two element's—section__background and section__screen (usually used together)—add a background image and colored screen that fills the full size of the section component.

    • section
      • section__container
      • section__background
      • section__screen
    <section class="section">
      <div class="section__container">
        ...
      </div>
      <img class="section__background" src="..." />
      <div class="section__screen"></div>
    </section>

    Depending on contrast when using background and screen elements, it may be needed to invert the text color of the section content for readability.

    Modifiers

    section_size_[key]

    Sections have a few size modifier options to help adjust the space that is used based on how prominent the section needs to be. These are optimized for all screen sizes to avoid oversized areas on mobile. These values are built using the $padding-scale map.

    • section_size_xs
    • section_size_sm
    • section_size_md
    • section_size_lg
    • section_size_xl
    <section class="section section_size_xl">
      ...
    </section>

    Customization

    Sass Variables

    Variable Default Description
    $prefix-block null String to prefix blocks with.
    $prefix-element "__" String to prefix elements with.
    $prefix-modifier "_" String to prefix modifiers with.
    $prefix-modifier-value "_" String to prefix modifier values with.
    $max-width 70rem Sets the max-width property on the section container element.
    $screen-opacity 0.7 Sets the opacity property on the section screen element.
    $screen-background core.$night Sets the background-color property on the section screen element.
    $padding Sass map ref ↓ Sets the default padding for the section component.
    $padding-scale Sass map ref ↓ Used to build the size modifiers for the section component.

    $padding

    Sets the default padding for the section component. Each key in the map represents a breakpoint to apply the specified padding value. The base key is applied with no media query.

    $padding: (
      'base': 1.5em,
      'md': 2em 1.5em,
      'lg': 3em 1.5em
    ) !default;

    $padding-scale

    Used to build the section_size_[key] modifier where each key represents a map of breakpoint and padding value pairs for the size key modifier. The base key is applied with no media query.

    $padding-scale: (
      'xs': (
        'base': 0,
        'md': 0,
        'lg': 0
      ),
      'sm': (
        'base': 1em,
        'md': 1em,
        'lg': 1em
      ),
      'md': (
        'base': 1.5em,
        'md': 2em 1.5em,
        'lg': 3em 1.5em
      ),
      'lg': (
        'base': 1.5em,
        'md': 4em 1.5em,
        'lg': 6em 1.5em
      ),
      'xl': (
        'base': 3em 1.5em,
        'md': 8em 2em,
        'lg': 12em 2em
      )
    ) !default;

    Install

    npm i @vrembem/section

    DownloadsWeekly Downloads

    314

    Version

    1.37.0

    License

    MIT

    Unpacked Size

    13 kB

    Total Files

    11

    Last publish

    Collaborators

    • sebnitu