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|down}($breakpoint) - Applies styles at a minimum or maximum width of the specified breakpoint
• media-breakpoint-between($lower, $upper) - Applies styles between two breakpoints.

Justify Content

• .justify-content-{breakpoint}-{start|end|center|between|around|evenly}

Display

• .d-{breakpoint}-{none|inline|inline-block|block|table|table-row|table-cell|flex|inline-flex}
• .d-print-{none|inline|inline-block|block|table|table-row|table-cell|flex|inline-flex}

{breakpoint} can be xs, sm, md, lg, xl or xxl.

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.
• $container-padding-x: Padding for containers.
• $prefix: Prefix for classes.