v7.0.0

Changelog

Breaking Changes

• keyword !important has been removed from all atoms (namely, the .-fz atoms). this change could break specificity, so read below for instructions on how to fix.
• Xmeter no longer supports media-specific stylesheets, e.g. xmeter-sK.css. From now on, you are expected to extend classes yourself. Read below for how to.

Removed

• Pug partial _views/_c-Permalink.view.pug is gone, along with the Permalink component. The component has been moved to aria-patterns.
• styles for .o-Tablist, .c-Permalink, and .h-Hidden are gone; moved to aria-patterns
• Pug partial /docs/_includes/_base.pug is gone and has been replaced with /docs/tpl/base.tpl.html.
• Directory /src/ is gone. All css source files are in /css/src/.
• build files /css/xmeter.css and /css/xmeter.css.map have been moved to /css/dist/ directory.
• deprecated /xmeter.css is gone
• (internal) Xmeter.class and its views are gone
• Custom property --vru is gone and renamed to --lh. This is only a superficial change, but var(--vru) will no longer work. Use var(--lh) instead, and while you're add it, start using the lh unit as well. Read below for details.

New Features

• The Xmeter package offers xmeter.css in addition to constituent parts, such as o-List.css, for when you want to import specific patterns only. See the updated README for details.
• package metadata is prepended to build file contents, in the form of a comment, so you can see what version you’re using directly from the asset.
• add underline to all links
• cursor of UI components (forms, interactive) to match browser default
• move informal hyperlink design comments to style guide, Principles page

Fixes

• better support for logical properties & values
• fix an issue where Flex item and Grid item text-level elements were overlapping vertically
• removed an unused lib file
• dependency updates
• documentation updates

Discussion

!important has been removed from Atoms! What do I do?

Since xmeter.css (a base stylesheet) is imported first, the atoms used to have !important in order to override any other styles applied afterward. However, I’ve decided that this was an abuse of a css feature meant for debugging only. Therefore Atoms no longer sport the !important keyword.

Here’s an example.

<link rel="stylesheet" href="xmeter.css"/> <!--
  .-fz-kilo { font-size: 1.5em; }
-->
<link rel="stylesheet" href="my-styles.css"/> <!--
  .c-Hed { font-size: 1.25em; }
-->

<h1 class="c-Hed -fz-kilo">Page Title</h1>

The .c-Hed style has 1.25em font-size applied, but we want to override this particular instance with .-fz-kilo, a 1.5em font-size, since it’s the page title. Since xmeter.css is a base, it is imported first, followed by my-styles.css, so the .-fz-kilo gets overridden anyway, which is not what we want. We want Atom styles to override Component styles. Previously, !important had been added to .-fz-kilo to force the specificity to take precedence.

I decided that that technique used a css feature as a hack to fight against specificity. Xmeter@7 is written to work with css specificity the right way. So all we have to do is import our stylesheets in the right order.

<!-- NOTE: link hrefs are not exact -->
<!-- base styles -->
  <link rel="stylesheet" href=".../xmeter/.../base.css"/>
<!-- Object styles -->
  <link rel="stylesheet" href=".../xmeter/.../o-*.css"/>
  <link rel="stylesheet" href="my-objects.css"/>
<!-- Component styles -->
  <link rel="stylesheet" href=".../xmeter/.../c-*.css"/>
  <link rel="stylesheet" href="my-components.css"/> <!--
    .c-Hed { font-size: 1.25em; }
  -->
<!-- Helper styles -->
  <link rel="stylesheet" href=".../xmeter/.../h-*.css"/>
  <link rel="stylesheet" href="my-helpers.css"/>
<!-- Atom styles -->
  <link rel="stylesheet" href=".../xmeter/.../-*.css"/> <!--
    .-fz-kilo { font-size: 1.5em; }
  -->
  <link rel="stylesheet" href="my-atoms.css"/>
<!-- HACK styles -->
  <link rel="stylesheet" href="my-hacks.css"/>


<h1 class="c-Hed -fz-kilo">Page Title
  (now the correct size)</h1>

This technique splits up CSS files into smaller parts, but the constituent parts are loaded and applied in the correct order: from low to high specificity: from generic to explicit: from far-reaching to localized. (The example above uses hypothetical file names. See the README for a list of real files you can use.)

What happened to all the suffixes?

The stylesheets xmeter-sK.css and others (with media-specific suffixes) have been removed, because they were a fringe use case. There is no reason anyone would normally need an entire stylesheet nested inside a media query. If you want to use a specific media query class, you are expected to write it yourself, like so:

@import (reference) url('/node_modules/xmeter/css/dist/o-List.css');

/* `.o-List-sK` acts like `.o-List`, but only on screens >= 30em */
@media screen and (min-width: 30em) {
  .o-List-sK {
    .o-List;
    // or `&:extend(.o-List);`
    // or copy-paste the code in `.o-List`
  }
}

What’s all this about a new lh unit?

CSS Values Level 4 plans to introduce a new unit, lh, equal to the computed value of line-height. It is not yet supported by any browsers, but it could’t hurt to start using it now. (Why set yourself up for more work further down the road?) The --lh custom property computes this value. Example:

.my-figure {
  margin-bottom: (2 * 1.5rem);          // fallback for custom properties
  margin-bottom: calc( 2 * var(--lh) ); // fallback for `lh` unit
  margin-bottom: 2lh;                   // works when supported, skips when not
}

As always, we observe the principle of progressive enhancement by ordering our rules from oldest to newest. The newer features, when supported, will override the older features.