Skip to content

Examples

Jump to bottom
Ryan Domingue edited this page Sep 28, 2019 · 8 revisions

Advanced Usage

Use the tidy-offset value in non-margin properties

The tidy-offset() functions are great for use in margin, padding, or positioning properties to maintain alignment.

The caveat being that, because the tidy-offset() functions only output the fluid value, it's necessary to declare the static offset value at the site's full-width.

.container {
  position: absolute;
  right: tidy-offset(2);
  top: 0;
}

/* Site becomes static width at 90rem */
@media (min-width: 90rem) {
  .container {
    right: tidy-offset-full(2);
  }
}

0.4.1-beta: Alternatively, you can append the declaration with !tidy and Tidy Columns will declare the -full() version of the function for you.

.container {
  position: absolute;
  right: tidy-offset(2) !tidy;
  top: 0;
}

Note: When compiling from Sass, you're required to escape the ! in the !tidy rule: \!tidy

Increase or decrease the tidy-columns value

Use the tidy-offset() function inside a calc() function to increase or decrease the offset value.

.container {
  margin-left: calc(tidy-offset(2) + 2rem);
}

Scope Settings to a Rule

Declaring @tidy options inside a rule block will scope those settings to that rule only.

.container {
  /* Scoped to this rule only */
  @tidy gap 1rem;
  @tidy edge 1.25rem;
  tidy-span: 8;
  margin-left: tidy-offset(1);
}

@media (min-width: 64rem) {
  /* Uses global configuration */
  .container {
    tidy-column: 1 / span 4;
  }
}

Use Configuration Values in Declarations

Configuration values can be used in declarations by passing an option name to the tidy-var() function.

div {
  padding: 0 tidy-var(gap); /* padding: 0 1rem; */
  tidy-span: tidy-var(columns); /* span all columns */
}

Common Recipes

Full-width Container

Creates a fluid, full-width container.

.container {
  margin-right: auto;
  margin-left: auto;
  tidy-span: tidy-var(columns) !tidy;
}

Container w/ Background Bleed

Extends the width of a container by adding in the edge value on each side, then replacing them with padding.

.container-with-bleed {
  box-sizing: border-box;
  margin-right: auto;
  margin-left: auto;
  /* Add the edges back, multiplied by 2x to account for both sides */
  width: calc(tidy-span(10) + tidy-var(edge) * 2) !tidy;
  /* Use padding to bring the inner width back to alignment with the columns */
  padding-left: tidy-var(edge);
  padding-right: tidy-var(edge);
}

Full-width image

The image is given a negative left-offset to pull it out of its container, with the edge value added in order to align properly with the edge of the browser. The image's max-width is also increased by the 2x the edge value to keep it full-bleed.

.content {
  margin-left: auto;
  margin-right: auto;
  width: tidy-span(tidy-var(columns));
}

.img {
  position: relative;
  width: 100vw;
  margin-left: -tidy-var(edge); /* negated edge value */
}

@media (min-width: 64rem) {

  .content {
    tidy-span: 6;
    tidy-offset-left: 4;
  }

  img {
    /* Pull it to the left 4 columns (equal to tidy-offset-left above) + the edge value */
    margin-left: calc(tidy-offset(-4) - tidy-var(edge));
    /* Set the max-width to the site + edges */
    max-width: calc(tidy-span-full(tidy-var(columns)) + tidy-var(edge) * 2);
  }
}

Breaking out of a CSS Grid Layout child

When using CSS Grid Layout, only the direct descendants of the grid container have access to the grid. As such, it can be complicated to maintain alignment with the outside grid items.

In the following example, the .breakout element spans three columns of the grid container's grid, and is moved one column to the left of its parent element.

.container {
  display: grid;
  grid-template-columns: repeat(tidy-var(columns), 1fr);
  grid-gap: tidy-var(gap);
  width: calc(100vw - (tidy-var(edge) * 2));
}

.grid-item {
  grid-column: 3 / span 6;
}

.grid-item .breakout {
  /*
   * This could also be written as: 
   * tidy-column: -1 / span 3; 
   */
  tidy-span: 3;
  tidy-offset-left: -1;
}
Clone this wiki locally