Rish Docs

Layouting

Linear Layouts

The Stack element is a foundational layout RishElement. It acts as a generic container that arranges elements in a single direction.

Props

  • Stack.Direction direction: Vertical (default) or Horizontal.
  • bool reverse: If true, children are arranged in reverse order.
  • float gap: Pixel spacing between children.
  • Element separator: An element (like a divider) rendered between each child.
  • VisualAttributes visualAttributes: Styling information. Expanded in Create method.
  • Children children: The elements to be arranged.

Col and Row

To keep code clean, Roots provides two wrappers that pre-set the direction:

  • Col: A Stack with Vertical direction.
  • Row: A Stack with Horizontal direction.

Responsive Layouts

While Stacks may cover 90% of use cases, Roots also includes a responsive system inspired by modern web frameworks.

Breakpoints

Breakpoints are width thresholds that define layout behavior. Roots uses six standard tiers:

Breakpoint Key Default Min Width
Extra Small xs Always 0.
Small sm 576
Medium md 768
Large lg 1024
Extra Large xl 1365
Extra Extra Large xxl 1820

The 4/3 Rule

By default, Roots calculates breakpoints using a 4/3 ratio. If you define sm, the system will automatically calculate the other breakpoints. If you need custom ratios, define all breakpoints manually.

Responsive Context

A ResponsiveContext is the root of all responsive layouts. Elements react to their parent ResponsiveContext.

You can have multiple ResponsiveContexts (e.g. resizable windows, viewports) and elements inside them will adapt to the specific width of each ResponsiveContext independently.

You define your responsive breakpoints through ResponsiveContext’s Props.

Props

  • int sm: Min width for Small breakpoint. Extra Small min width is always 0.
  • int md: Min width for Medium breakpoint.
  • int lg: Min width for Large breakpoint.
  • int xl: Min width for Extra Large breakpoint.
  • int xxl: Min width for Extra Extra Large breakpoint.
  • VisualAttributes visualAttributes: Styling information. Expanded in Create method.
  • Children children: Container’s children.
  • Action<float, ResponsiveBreakpoint> onResize: Callback that gets called when the container gets resized.

Containers

Containers are the most basic responsive layout element. They are used to contain, pad, and (sometimes) center the content within them.

  • Container: Stays 100% wide until its specific breakpoint is hit, then applies a max-width. Equivalent to .container-{breakpoint} in Bootstrap.
  • FluidContainer: Always spans 100% of the available width. Equivalent to .fluid-container in Bootstrap.

The table below illustrates how each container compares to each other at each breakpoint (assuming default breakpoint values).

xs (≥ 0)
width / max-width 		sm (≥ 576)
width / max-width 		md (≥ 768)
width / max-width 		lg (≥ 1024)
width / max-width 		xl (≥ 1365)
width / max-width 		xxl (≥ 1820)
width / max-width
Container
Extra Small 		100% / 100% 100% / 576px 100% / 768px 100% / 1024px 100% / 1365px 100% / 1820px
Container
Small 		100% / 100% 100% / 576px 100% / 768px 100% / 1024px 100% / 1365px 100% / 1820px
Container
Medium 		100% / 100% 100% / 100% 100% / 768px 100% / 1024px 100% / 1365px 100% / 1820px
Container
Large 		100% / 100% 100% / 100% 100% / 100% 100% / 1024px 100% / 1365px 100% / 1820px
Container
Extra Large 		100% / 100% 100% / 100% 100% / 100% 100% / 100% 100% / 1365px 100% / 1820px
Container
Extra Extra Large 		100% / 100% 100% / 100% 100% / 100% 100% / 100% 100% / 100% 100% / 1820px
FluidContainer 100% / Not Set 100% / Not Set 100% / Not Set 100% / Not Set 100% / Not Set 100% / Not Set

Container Props

  • ResponsiveBreakpoint breakpoint: Breakpoint.
  • VisualAttributes visualAttributes: Styling information. Expanded in Create method.
  • Element content: Container’s content.

FluidContainer Props

  • VisualAttributes visualAttributes: Styling information. Expanded in Create method.
  • Element content: Container’s content.

Grid

Roots provides a powerful responsive grid system for complex layouts. If you’re familiar with Bootstrap’s (or other similar CSS responsive frameworks) Grid, you will find Roots’ solution familiar. Although it has some key differences.

It uses a Mobile-First Inheritance model: settings for xs flow up to xxl.

How it works

A Grid defines how many units wide it is per breakpoint. Grid sizes are inherited from lower breakpoints.

If columns exceed the Grid’s unit count, they wrap to a new line. If no grid size is set, the Grid automatically fits all columns into one row.

Columns and rows are separated by a gutter. Grid gutters are also inherited from lower breakpoints.

Props

  • int? xs: Grid size to use in Extra Small ResponsiveContexts. If not set, the grid will set the size to fit all cols in one row.
  • int? sm: Grid size in Small ResponsiveContexts. If not set, it inherits xs value.
  • int? md: Grid size in Medium ResponsiveContexts. If not set, it inherits sm value.
  • int? lg: Grid size in Large ResponsiveContexts. If not set, it inherits md value.
  • int? xl: Grid size in Extra Large ResponsiveContexts. If not set, it inherits lg value.
  • int? xxl: Grid size in Extra Extra Large ResponsiveContexts. If not set, it inherits xl value.
  • Gutter? xsGutter: Gutter to use in Extra Small ResponsiveContexts. If not set, it’s 0 by default.
  • Gutter? smGutter: Gutter to use in Small ResponsiveContexts. If not set, it inherits xs value.
  • Gutter? mdGutter: Gutter to use in Medium ResponsiveContexts. If not set, it inherits sm value.
  • Gutter? lgGutter: Gutter to use in Large ResponsiveContexts. If not set, it inherits md value.
  • Gutter? xlGutter: Gutter to use in Extra Large ResponsiveContexts. If not set, it inherits lg value.
  • Gutter? xxlGutter: Gutter to use in Extra Extra Large ResponsiveContexts. If not set, it inherits xl value.
  • VisualAttributes visualAttributes: Styling information. Expanded in Create method.
  • RishList<ColData> cols: Columns data.

ColData

Each column has a size in Grid Units per breakpoint. Column sizes are inherited from lower breakpoints.

If no column size is set, then it’s assumed to be 1. A size of 0 is valid, which is useful when you need to hide a column only in certain breakpoints.

Children in a column will be separated by the Grid’s vertical gutter.

  • int? xs: Column size (in Grid Units) in Extra Small ResponsiveContexts. If not set, it’s assumed to be 1.
  • int? sm: Column size (in Grid Units) in Small ResponsiveContexts. If not set, it inherits xs value.
  • int? md: Column size (in Grid Units) in Medium ResponsiveContexts. If not set, it inherits sm value.
  • int? lg: Column size (in Grid Units) in Large ResponsiveContexts. If not set, it inherits md value.
  • int? xl: Column size (in Grid Units) in Extra Large ResponsiveContexts. If not set, it inherits lg value.
  • int? xxl: Column size (in Grid Units) in Extra Extra Large ResponsiveContexts. If not set, it inherits xl value.
  • VisualAttributes visualAttributes: Styling information.
  • Children children: Children.