@workday/canvas-kit-css-layout

    8.4.9 • Public • Published

    Canvas Kit Layout

    Canvas Kit Layout is based on a 12 column grid. It uses the flexbox layout for positioning of columns.

    Mainenance Mode

    Installation

    yarn add @workday/canvas-kit-css

    or

    yarn add @workday/canvas-kit-css-layout

    Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

    @import '~@workday/canvas-kit-css-layout/index.scss';

    Usage

    Layout Options

    Small Medium Large Extra Large
    Breakpoint > 320px > 768px > 992px > 1200px
    Spacing Width 16px 16px 24px 40px
    Class Prefix wdc-col-sm- wdc-col-md- wdc-col-lg- wdc-col-xl

    Responsive Layout

    Responsive modifiers allow you to specify different column sizes for different breakpoints.

    <div class="wdc-row">
      <div class="wdc-col-sm-2 wdc-col-md-1 wdc-col-lg-3 wdc-col-xl-1">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-sm-4 wdc-col-md-2 wdc-col-lg-3 wdc-col-xl-5">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-sm-4 wdc-col-md-3 wdc-col-lg-3 wdc-col-xl-5">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-sm-2 wdc-col-md-6 wdc-col-lg-3 wdc-col-xl-1">
        <div class="demo-box"></div>
      </div>
    </div>

    Fluid Layout

    Fluid layouts use percentage based columns for resizing content.

    <div class="wdc-row">
      <div class="wdc-col-11">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row">
      <div class="wdc-col-10">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-2">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row">
      <div class="wdc-col-9">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-3">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row">
      <div class="wdc-col-8">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-4">
        <div class="demo-box"></div>
      </div>
    </div>

    Offsets

    Offsets for columns.

    <div class="wdc-row">
      <div class="wdc-col-offset-11 wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>

    Auto Widths

    Flex grow the columns to the parent container.

    <div class="wdc-row">
      <div class="wdc-col">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col">
        <div class="demo-box"></div>
      </div>
    </div>

    Positioning

    Horizontal

    Horizonal position for columns.

    <div class="wdc-row wdc-row-start">
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row wdc-row-center">
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row wdc-row-end">
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>

    Vertical

    Vertical position for columns.

    <div class="wdc-row wdc-row-top">
      <div class="wdc-col">
        <div class="demo-box demo-box-big"></div>
      </div>
      <div class="wdc-col">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row wdc-row-middle">
      <div class="wdc-col">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col">
        <div class="demo-box demo-box-big"></div>
      </div>
    </div>
    <div class="wdc-row wdc-row-bottom">
      <div class="wdc-col">
        <div class="demo-box demo-box-big"></div>
      </div>
      <div class="wdc-col">
        <div class="demo-box"></div>
      </div>
    </div>

    Distribution

    Position content with wdc-row-around and wdc-row-between.

    <div class="wdc-row wdc-row-around">
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>
    <div class="wdc-row wdc-row-between">
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
      <div class="wdc-col-1">
        <div class="demo-box"></div>
      </div>
    </div>

    Install

    npm i @workday/canvas-kit-css-layout

    DownloadsWeekly Downloads

    972

    Version

    8.4.9

    License

    Apache-2.0

    Unpacked Size

    194 kB

    Total Files

    9

    Last publish

    Collaborators

    • workday-canvas-kit
    • justin.pante
    • byed
    • anicholls