@visual-framework/vf-grid-page NPM

Grid Page 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];
}

fractal component

@everything-registry/sub-chunk-987 @ebiwd/ebi-eleventy-boilerplate @visual-framework/vf-demo-design-system @visual-framework/vf-demo-desing-system @zalastax/nolb-_vis

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago