The API

Baseplate was created with the express intention of abstracting out the baseline grid calculations from Design Grid based CSS development.

The grid API supports any regular design grid, incorporating baseline shifts, gutter shifts, fixed widths, floated, relative and absolutely positioned elements and layouts.

The API has been designed to be consistent and familiar syntactically to standard CSS properties.

Note: Horizontal measurements are in columns and Vertical measurements are in Baselines.

POSITIONING

.top(<Number>)

Positions vertically in baselines. Can take fractional values.

.right(<Number>)

Positions horizontally to the nearest column. Can take fractional values.

.bottom(<Number>)

Positions vertically in baselines. Can take fractional values.

.left(<Number>)

Positions horizontally to the nearest column. Can take fractional values.

.gutterLeft(<Number>)

Positions horizontally to each gutter. Can take fractional values.

.gutterRight(<Number>)

Positions horizontally to each gutter. Can take fractional values.

.firstGutterLeft()

Positions horizontally to the first gutter.

.lastGutterRight()

Positions horizontally to the first gutter.

DIMENSIONS

.contentWidth()

Sets the width to the content width set in baseline.grid.constants.less.

.contentWidthWithoutSideGutters()

Deducts the first gutter and last gutter from the total content width.

.width(<Number>)

Sets the width in columns. Can take fractional values.

.height(<Number>)

Sets the height in baselines. Can take fractional values.

MARGINS AND PADDING

.marginTop(<Number>)

Sets the margin-top in baselines. Can take fractional values.

.marginRight(<Number>)

Sets the margin-right to the nearest column. Can take fractional values.

.marginBottom(<Number>)

Sets the margin-bottom in baselines. Can take fractional values.

.marginLeft(<Number>)

Sets the margin-left to the nearest column. Can take fractional values.

.marginLeftGutter(<Number>)

Sets the margin-left to the nearest gutter. Can take fractional values.

.marginRightGutter(<Number>)

Sets the margin-right to the nearest gutter. Can take fractional values.

.firstGutterLeftMargin()

Sets the margin-left to the first gutter. Can take fractional values.

.lastGutterRightMargin()

Sets the margin-left to the last gutter. Can take fractional values.

.paddingLeftGutter(<Number>)

Sets the padding-left to the nearest gutter. Can take fractional values.

.paddingRightGutter(<Number>)

Sets the padding-right to the nearest gutter. Can take fractional values.

.paddingTop(<Number>)

Sets the padding-top in baselines. Can take fractional values.

.paddingRight(<Number>)

Sets the padding-right to the nearest column. Can take fractional values.

.paddingBottom(<Number>)

Sets the padding-bottom in baselines. Can take fractional values.

.paddingLeft(<Number>)

Sets the padding-left to the nearest column. Can take fractional values.

.firstGutterLeftPadding()

Sets the padding-left to the first gutter. Can take fractional values.

.lastGutterRightPadding()

Sets the padding-left to the last gutter. Can take fractional values.