Skip to content

Tips

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

Redeclare Declarations Across Specs with !tidy

New in 0.4.1-beta

If the same span or offset is used across configured breakpoints, the declaration must be redeclared within a media query for the breakpoint at which the columns spec changes. This is to ensure the ouput calc() function is using the correct option values.

However, rather than manually redeclaring the declaration, appending the declaration with !tidy will tell Tidy Columns to redeclare it for you.

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

Use Negative and/or Fractional Values

All of the span and offset properties and functions provided by this plugin accept negative and decimal numbers.

.container {
  tidy-span: 3.5;
  tidy-offset-left: -0.5;
}

You can negate a tidy-var() value by prepending the property with a -.

span {
  margin-left: -tidy-var(gap);
}

If your configuration values are held in CSS Custom Properties, you'll need to wrap the tidy-var() function in a calc() function.

:root {
  --gap: 1.5rem;
}

@tidy gap var(--gap);

span {
  margin-left: calc(tidy-var(gap) * -1);
}

Prevent Unwanted Media Queries

The tidy-offset-[left|right] properties output a media query, which can complicate things if you plan to override the offset value.

Option 1: Declare the siteMax within the breakpoints object.

tidyColumns({
  columns: 8,
  gap: '0.625rem',
  edge: '1.25rem',
  breakpoints: {
    '64rem': {
      columns: 12,
      /* 
       * The plugin will only use this configuration's `siteMax` option if a 
       * given CSS rule is within a media query that is equal or greater than 
       * the parent object's `breakpoints` key (min-width: 64rem)
       */
      siteMax: '90rem',
      gap: '1.25rem',
      edge: '1.5rem',
    },
  },
});

Option 1: Use the tidy-offset() function for the initial declaration, which outputs only the calc() value.

.container {
  margin-left: tidy-offset(3);
}

@media (min-width: 64rem) {
  .container {
    margin-left: 0;
  }
}

Using CSS Custom Properties (Modern Browsers)

CSS Custom Properties are especially useful if you're needing to define multiple columns specs, or to easily override the option values, and are supported in @tidy rules with the following caveat:

Due to the nature of CSS Custom Properties, particularly the inability to use them in media query parmeters, a CSS Custom Property used as the site-max value will throw an error.

Using CSS Custom Properties for configuration values negates the need to define any breakpoints configuration.

:root {
  --columns: 8;
  --gap: 0.625rem;
  --edge: 0.75rem;
}

@media (min-width: 64rem) {

  :root {
    --columns: 12;
    --gap: 1rem;
    --edge: 1.25rem;
  }
}

@tidy columns var(--columns);
@tidy gap var(--gap);
@tidy edge var(--edge);
@tidy site-max 75rem;

Control Output with Tidy Functions

In order to maintain complete control, use only the offset and span functions. They can be used in any property you see fit, and won't output anything unexpected, like additional properties and media queries.

It's also arguably easier to read and follow:

.container {
  width: tidy-span(4);
  max-width: tidy-span-full(4);
  margin-left: tidy-offset(2);
  padding: 0 tidy-offset(1);
}

@media (min-width: 90rem) {
  .container {
    margin-left: tidy-offset-full(2);
    padding: 0 tidy-offset-full(1);
  }
}

Clone this wiki locally