# Baroquest
Framework

### Lattice Trellis Columnize Grid

LATTICE: A decorative screen made up of a crisscross pattern.
TRELLIS: A vertical framework for supporting growth.
COLUMN: A vertical support for any structure.
Inspired by these supportive structures, LTC Grid offers three methods for creating a layout, built using CSS Grid and Flexbox.

SOURCE: css/ltc-grid.css

### Lattice Grid

Lattice Grid is a 2-D grid built with CSS grid. It divides child items into columns ranging from 1 to 12 for each row. If no number of columns are specified, the default is 1 (full-width). It is also possible to set a min-height for items, and span items across columns and rows. To create a CSS grid, wrap items within a container with the class lattice-grid.
COLUMNS.
To create columns, add a class of .col-X, where X is a value ranging from 1 to 12.

#### Example: .lattice-grid.col-4

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

GAPS.
We can apply gap spacing by adding the class .gaps, which uses the --gaps variable.

#### Example: .lattice-grid.gaps.col-4

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

SPANS.
We can also span individual grid items across both rows and columns. Apply the class .span-X to any child element, where X is a value between 1 and 6. In the example below (with gaps), Item 3 will span 2 columns and rows, and Item 6 will span 4 columns.

Item 1
Item 2
Item 3 (.span-2)
Item 4
Item 5
Item 6 (.span-4)

MIN-HEIGHT.
We can set a minimum height for rows by applying any of the following classes:
.fifth - 20% height of viewport
.quarter - 25% height of viewport
.third - 33% height of viewport
.half - 50% height of viewport
.full - 100% height of viewport

#### Example: .lattice-grid.gaps.col-4.quarter

Item 1
Item 2
Item 3
Item 4

### Trellis Grid

Trellis Grid is a 1-D grid built with Flexbox. By default, items are stacked vertically in a column. Items can be put into a horizontal row orientation where items automatically wrap as needed. Each individual child item can have a preset width, and they can even be ordered in reverse.
WIDTHS.
Within a .trellis-grid wrapper, apply any of the following width classes to an item:

#### Example: .trellis-grid

.full
.half
.third
.quarter
.fifth
.two-thirds
.three-quarters

ROWS & REVERSE.
We can put items into a horizontal row simply by adding the class .row. We can also put items into reverse order by adding the class .reverse.

#### Example: .trellis-grid.row.reverse

1
2
3
4

GAPS.
We can apply gap spacing by adding the class .gaps, which uses the --gaps variable.

#### Example: .trellis-grid.row.gaps

.third
.third
.fifth
.half

### Columnize

Content can be divided into columns, which is especially useful for long lists or blocks of text. To divide content into columns, simply wrap it within a .columnize container. By default, gaps are included, using the --gaps variable.
COLUMN COUNT.
We can define the number of columns by adding the class .col-X, where X is a value between 2 and 12.

#### Example: .columnize.col-3

Perhaps originating in the Near East, it is a feature of Late Roman architecture, which was revived in Baroque architecture, especially in the Spanish and Portuguese-speaking worlds. The Solomonic column was revived as a feature of Baroque architecture. The twisted S-curve shaft gives energy and dynamism to the traditional column form which fits these qualities that are characteristically Baroque.

Easily the best-known Solomonic columns are the colossal bronze Composite columns by Bernini in his Baldacchino at St. Peter's Basilica. The construction of the baldachin, actually a ciborium, which was finished in 1633, required that the original ones of Constantine be moved.

COLUMN RULES.
We can add vertical column rules (dividers), whose thickness and color is determined by the --crsize and --crcolor variables, respectively. Apply any of the following classes:
.cr-a - dashed
.cr-b - double
.cr-d - dotted
.cr-s - solid

#### Example: .columnize.col-3.cr-b

Perhaps originating in the Near East, it is a feature of Late Roman architecture, which was revived in Baroque architecture, especially in the Spanish and Portuguese-speaking worlds. The Solomonic column was revived as a feature of Baroque architecture. The twisted S-curve shaft gives energy and dynamism to the traditional column form which fits these qualities that are characteristically Baroque.

Easily the best-known Solomonic columns are the colossal bronze Composite columns by Bernini in his Baldacchino at St. Peter's Basilica. The construction of the baldachin, actually a ciborium, which was finished in 1633, required that the original ones of Constantine be moved.

SPAN ALL COLUMNS.
We can also apply the class .all to a child element to make it span across all columns.

#### Example: .columnize.col-3.cr-d

Perhaps originating in the Near East, it is a feature of Late Roman architecture, which was revived in Baroque architecture, especially in the Spanish and Portuguese-speaking worlds. During the succeeding century, Solomonic columns were commonly used in altars, furniture, and other parts of design.

##### h5.all - transcend all columns

The Solomonic column was revived as a feature of Baroque architecture. The twisted S-curve shaft gives energy and dynamism to the traditional column form which fits these qualities that are characteristically Baroque.

Easily the best-known Solomonic columns are the colossal bronze Composite columns by Bernini in his Baldacchino at St. Peter's Basilica. The construction of the baldachin, actually a ciborium, which was finished in 1633, required that the original ones of Constantine be moved.

### Nesting Grids

We can nest a Trellis Grid within a Lattice Grid (but NOT the other way around). CSS grids cannot be nested within a Flexbox grid. In the example below, we have a three-column Trellis Grid nested within a couple Lattice Grid items.

##### GRID ITEM 1

##### FLEX ITEM 1

##### FLEX ITEM 2

##### FLEX ITEM 3

##### GRID ITEM 3

##### FLEX ITEM 4

##### FLEX ITEM 5

##### FLEX ITEM 6

##### GRID ITEM 4