webapp/src/styles

_grid.scss - a Minimalistic Bootstrap-Compatible Grid System

This grid system is a lightweight alternative to Bootstrap's grid, providing essential features for responsive design. It includes a set of SCSS mixins and classes to create flexible layouts.

Supported Classes in _grid.scss

Container

• .container: Creates a fixed-width container and centers it on the page.
• .container-fluid: Creates a full-width container that spans the entire width of the viewport.

Row

• .row: Creates a flexbox container for columns, with negative margins to offset column padding.

Columns

• .col-xx-#: Defines the width of a column for a specific breakpoint (xx can be xs, sm, md, lg, xl, xxl). Replace # with a number from 1 to 24 (based on $grid-columns).

Offsets

• .offset-xx-#: Adds left margin to a column, effectively moving it to the right by the specified number of columns. Replace xx with the breakpoint and # with the number of columns to offset.

Mixins

media-breakpoint-up($breakpoint)

Applies styles at a minimum width of the specified breakpoint.

media-breakpoint-down($breakpoint)

Applies styles at a maximum width of the specified breakpoint.

media-breakpoint-between($lower, $upper)

Applies styles between two breakpoints.

make-container($max-widths, $gutter)

Creates a container with specified maximum widths and gutter.

make-row($gutter)

Creates a flexbox row with specified gutter.

make-col($size, $columns)

Defines a column with a specific size and total number of columns.

make-col-offset($size, $columns)

Offsets a column by a specific size.

row-cols($count)

Sets the number of columns in a row, each taking an equal width.

Customization

You can customize the grid system by modifying the variables in _globals.scss:

• $grid-columns: Total number of columns in the grid.
• $grid-gutter-width: Width of the gutter between columns.
• $grid-breakpoints: Map of breakpoints for responsive design.
• $container-max-widths: Maximum widths for containers at each breakpoint.