A grid component for use within the FFE framework
npm install @sb1/ffe-gridA 12-column grid you can use to visually structure your UIs.
``bash`
npm install --save @sb1/ffe-core @sb1/ffe-grid
Remember to include the less-file in your main less-file:
`less`
@import '~@sb1/ffe-grid/less/ffe-grid';
If your project does not use Less, you can import the compiled styling:
`css`
@import '~@sb1/ffe-grid/css/ffe-grid.css';
Full documentation on grid usage is available at https://design.sparebank1.no/komponenter/grid/.
See also @sb1/ffe-grid-react.
All you need to remember is .ffe-grid, .ffe-grid__row and .ffe-grid__col.
The .ffe-grid-col class has a few modifiers that specify how large it should be
at a given viewport size, and if it should be offset.
> ### Note
>
> There should be no more than four columns on small devices and six columns on
> medium ones. Although it's technically possible, it's not something that's
> encouraged by the designers.
The pattern is like so: ffe-grid__col--{size}-{num-of-cols}
It's easier to explain with an example:
`html
ffe-grid__col--sm-12
ffe-grid__col--md-6
ffe-grid__col--lg-3
"
>
This column will be 100 % (12 columns) for small screens, 50 % (6 columns) for medium
screens and 25 % (3 columns) for large screens.
You only have to specify one of these if you want - each column defaults to a 100 % width
for viewports that are not specified (i.e.
will be 100 % wide on small
devices, and 50 % on medium and large screens).A column can be hidden entirely on a given breakpoint by setting the value to
0, e.g. .ffe-grid__col--sm-0 to hide it on small screens.$3
The pattern is like so:
.ffe-grid__col--{size}-offset-{num-of-cols}The offsets work in a similar fashion to the width specification modifiers. Each breakpoint
can have its own offset if needed.
$3
Margin and padding in the top and bottom of grid rows can be applied using the margin and padding modifiers:
Available sizes correspond to the ffe spacing variables. For example, the required modifier to add a
(80px) margin to a row is ffe-grid__row-padding-4xl.By default, rows have no padding or margin.
$3
The gutter/gap between columns can be controlled using the
.ffe-grid--gap-{size} modifier. Available sizes correspond to the ffe spacing variables, however the largest available size is lg.The default gap is 16px, equivalent to
.ffe-grid--gap-sm.The gap value is also applied as a padding to the left and right of the grid.
$3
Contents of a grid column can be centered horizontally and vertically using the
.ffe-grid__col--center modifier.$3
Text inside a grid column can be centered using the
.ffe-grid__col--center-text modifier.$3
The background color of rows can be changed using modifiers. This requires that the children of
.ffe-grid__row are wrapped in .ffe-grid__row-wrapper.`html
`Supported background colors are limited to
colors in the semantic color palette. This means you can choose from the following backgrounds, which in turn adhere to which mode the parent element is set to (i.e. light mode, dark mode, accent mode).####
.ffe-grid__row--bg-primarySets the row background color to
####
Sets the row background color to
####
Sets the row background color to
Development
To start a local development server, run the following from the designsystem root folder:
bash
npm install
npm run build
npm start
`A local instance of
Example implementations using the latest versions of all components are also available at https://sparebank1.github.io/designsystem.