Nomad Packaging Mechanism

    @visual-framework/vf-grid-page

    3.0.0 • Public • Published

    Grid Page Component

    npm version

    This component has been deprecated. Please use the new `vf-body` component.

    Install

    This component is distributed with npm. After installing npm, you can install the vf-grid-page with this command.

    $ yarn add --dev @visual-framework/vf-grid-page
    

    The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

    @import "@visual-framework/vf-grid-page/index.scss";
    

    Make sure you import Sass requirements along with the modules.

    To start with the page has a simple 3 column grid. The second grid item has a maximum width of 1300 pixels. The two outer grid columns fill the rest of the space to create a centred layout.

    The code for this layout is for the <body class="vf-body"> tag so that the direct children inherit the grid columns.

    CSS
    .vf-body {
      display: grid;
      grid-template-columns:
        [full-start]
          minmax(1.25em, 1fr)
          [main-start]
            minmax(0, 81.25em) // 1300px
          [main-end]
          minmax(1.25em, 1fr)
        [full-end];
    }

    Install

    npm i @visual-framework/vf-grid-page

    DownloadsWeekly Downloads

    60

    Version

    3.0.0

    License

    Apache 2.0

    Unpacked Size

    7.16 kB

    Total Files

    10

    Last publish

    Collaborators

    • pacope92
    • ebiwebdev
    • nitinja
    • sandykadam
    • khawkins98