# Layouts Serious Detoxification

## Concept

The main idea is to have single column layout on each page that can contain blocks arranged vertically. *Block*, a.k.a. _placek_, is a layout element that has 100% available page width and parametrized N % available page height. There should some constraints what minimal page width and height should be for each breakpoint. If total height of blocks exceeds 100% of the page, scroll will be visible.

### Grid
Base *Block*  type is one containing grid layout inside. Number of columns is derived from breakpoint and number of rows is calculated from breakpoint and height property.

> ##### Example
*Grid*(50%) on *Desktop*  breakpoint could have 10 rows and 12 columns while *Grid*(70%) on *Mobile*  breakpoint could have 7 rows and 4 columns.

### Card
It behaves the same way as *Grid*, only visually it adds background and shadow to its content.

> ##### Inside a Grid
*Card*  is a container that is allowed inside a *Grid*. When put inside it will wrap part of internal grid.

### Border
It behaves the same way as *Grid*, only visually it adds border to its content.

> ##### Inside a Grid
*Border*  is a container that is allowed inside a *Grid*. When put inside it will wrap part of internal grid.

### Tabset
It behaves the same way as *Grid*, only it allows one row less, which is reserved for tabs control.

> ##### Inside a Grid
*Tabset*  is a container that is allowed inside a *Grid*. When put inside it will wrap part of internal grid - minus one row, which will be reserved for tabs control.

### Section
It behaves the same way as *Grid*, only it allows one row less, which is reserved for section control.

### Accordion
Should this be included?

## Repeating
Repeating should be allowed for:
* Pages
* Blocks
* Tabs within Tabset

## Responsiveness
All *Blocks* are placed one below the other. There is no concept of *Page*  horizontal splitting.

Numbers of rows and columns is decided based on breakpoint. If arranged elements won't fit into grids on lower breakpoints, they're expected to expand (design-time) their containers and place one below the other until the designer arranges them specifically for given breakpoint.

## Backwards compatibility
We should for some time support both old and new approaches and offer a migration path - in most cases we could automatically flatten existing configurations and put them into new containers.

FlexLayout should turn into *Grid*.

FluidLayout should turn into *Grid*.

Repeating within *GridLayout* should turn into repeating *Grid*  blocks.