v7.2.0

Features

• add global opinionated tab-size: 4;
• horizontal spacing Atoms: (ml, mr, mx, pl, pr, px)
• integrate Base element documentation into style guide

Fixes

• update feature queries & logical properties in base styles
• update to gulp v4
• update other dependencies
• c41ae4c, dda6c7d

v7.1.0

Features

• use 32-bit hex color syntax (#rrggbbaa), keeping fallbacks for browsers not yet supporting it
• add default hover/focus shadow styles for form elements
• vertical spacing Atoms
• remove opinionated list styles

Fixes

• fix .h-Ruled background-origin
• border and border-radius fixes
• documentation updates
• dependency updates

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.

v6.5.0

Features

New

• All-new type scale and font sizes. This affects the default font-sizes of <h1> thru <h6>. This is considered non-breaking, even though it is a style change.
• .-mb-* and .-pt-* Atoms have been added back in. They were taken out awhile ago but now they’re back and improved! I realized these classes were absolutely essential to designing with vertical rhythm. See the docs for info.

Changed

• the .-fz-* Atoms now have --font-scale and --tracks custom properties built-in, so you can use them with the .h-FontSize helper if you want

Fixed

• fix some comments & formatting
• updated documentation no longer uses Pug

v6.4.0

Breaking

• upgrade to gulp-less v4.0.0

Changed

• add <slot> to base docs
• update comments & code formatting
• #14 mitigate render-blocking stylesheets (see README for details)
• split IE hacks stylesheet into respective parts

New

• All-new published documentation! Check out the gh-pages branch for generated documentation. /docs/styleguide/ is not checked in on the master branch, but is checked in on gh-pages to be published. Visit https://chharvey.github.io/xmeter/docs/styleguide/ to see the published docs.
• new .h-FontSize Helper! Now you can use custom properties to set the font-size & line-height (together) of an element while preserving vertical rhythm. Read the new docs for details.

v6.3.0

Non-Breaking Changes

New

• add new Constrain Helper .h-Constrain, which sets the max-inline-size (width) of an element.

Changed

• in style guide, rename Organism → Interface

Deprecated

• .o-Tablist and its markup are DEPRECATED. It is moving to https://github.com/chharvey/aria-patterns
• Xmeter.VIEW.permalink is DEPRECATED. It is also moving to https://github.com/chharvey/aria-patterns

v6.2.0

Non-Breaking Changes

• restyle hyperlinks: a elements without [href] are no longer styled; now only a[href] are colored. The color has also been changed from #00e to #06c. Also, a:not([href]) are no longer decreased opacity.
• new vertical rhythm features, including lh unit
• DEPRECATED: --vru custom property: use --lh instead (just a rename). --lh is a custom prop for browsers that don’t support the lh unit. --vru will be removed in v7+
• add more logical properties & values (#15)
• add separate stylesheet for IE fallbacks

Fixes

• fix th text-alignment (#17)
• fix an issue in the .h-Measure helper where max-inline-size was not overriding max-width in vertical writing modes
• fix missing quotation marks on q element
• style change: links are now colored #0066cc, to meet contrast ratio requirements
• refactors & updates to code formatting
• update dependencies

v6.1.1

Fixes

• fixup Tablist styles
• change mark color (opinionated)

v6.1.0

Minor Changes

Added

API

• add /class/Xmeter.class.js (main exported object)
• new view for .c-Permalink design component

Styles

• all-new .o-Tablist Object!
• all-new .h-Measure Helper! (#13)
• all-new .h-Ruled Helper! (background for checking vertical rhythm, #7)
• add new mark color (opinionated)

Changed

• /docs/_models/Docs.class.js → /docs/class/Docs.class.js
• /src/ → /css/src/

Deprecated

Things in this section are DEPRECATED: still present but will lose support & be dropped in the next major release.

• move all files from /src/ into /css/src/. main file xmeter.css is now located at /css/xmeter.css, and Less tools are now located in /css/src/__tool.*.less. be sure to update your projects when @importing or <link/>ing!
• _views/_c-Permalink.view.pug deprecated. Call Xmeter.view(data).permalink() instead.

v6.0.0

Major Changes

These are breaking changes; your code will break if you do not update it and want to use these features.

File removals/renamings

• the minified file xmeter.min.css is no longer available. Use xmeter.css instead: it is already minified and has a sourcemap.
• moves xmeter.less into src/xmeter.less
• deletes OBSOLETE __tool.clearfix.less. use .h-Clearfix helper instead of .clearfix() mixin.
• deletes OBSOLETE _-mb.less and _-pt.less atom classes (deprecated in v5.7)
• removes deprecated /docs/includes/_base.docs.jade, /docs/_includes/base.docs.jade, and /docs/_includes/_base.jade. if your project references either of these files, change it to /docs/_includes/_base.pug. sorry for all the renaming.
• uses directory /src/ and REMOVES /styles/. remember to update your project code if @importing these files
• removes all fallback mixins! Do not reference any file starting with __fallback anymore! Use Autoprefixer in your own project instead.
• deletes OBSOLETE __tool.vertspacing.less in favor of CSS custom properties ("native variables"), and corresponding mixin .vertspacing()

Code renamings/repurposes

• removes OBSOLETE .transition-multi() mixin. use CSS transition property instead (with Autoprefixer if you wish)
• removes OBSOLETE negative breakpoint classes suffixed with -ns* (e.g., -nsK). Instead, use -n* (e.g. -nK). see #11 (deprecated in v5.7)
• REPURPOSED! Grid Object, now using CSS Grid! (note: appearance has not changed, but support may have changed. if you use .o-Grid in your code, in conjunction with flexbox properties, you will need to revisit.)
• renames variables in /src/__settings.less. uses hyphens instead of underscores

Other Drops

• drops pixel fallback for rem units (rems are not supported on IE8- and IE9 and IE10 on the font shorthand property and on pseudo-elements/classes)
• fix .font-size-el() params: removes 3rd parameter. Now only takes two params: .font-size-el(@ratio: 1; @lines: 1)
• drops fallbacks for CSS custom properties ("native variables")
• drops global Less variables @g-line-height and @g-vru, in favor of CSS custom properties. watch out if you use these! switch to var(--line-height) and var(--vru) respectively.
• drops @media queries screen and print for all Objects, Components, and Atoms. The following queries are available:

  @media screen  and (min-width: 30em) {} // suffix -sK
  @media screen  and (min-width: 45em) {} // suffix -sM
  @media screen  and (min-width: 60em) {} // suffix -sG
  @media screen  and (min-width: 75em) {} // suffix -sT
  @media screen  and (min-width: 90em) {} // suffix -sP
  @media not all and (min-width: 30em) {} // suffix -nK
  @media not all and (min-width: 45em) {} // suffix -nM
  @media not all and (min-width: 60em) {} // suffix -nG
  @media not all and (min-width: 75em) {} // suffix -nT
  @media not all and (min-width: 90em) {} // suffix -nP

Minor Changes

These are non-breaking changes; your code does not need to be updated if you want to use these features.

• All-new documentation & style guide generated by KSS. Not yet published, but meanwhile you can build them yourself:

  $ cd node_modules/xmeter/
  $ npm install
  $ npm run kss

  then check out file://path/to/xmeter/styleguide/!

Fixes

• fixes borders on fieldset elements
• remove styles in reset.css that are overridden by _base.less
• add fallbacks for unset in reset.css
• update ins & del, colors (GitHub opinionated)