Skip to content

v3.0.0
Compare
Choose a tag to compare
@jonathanharrell jonathanharrell released this 04 May 16:42
· 240 commits to master since this release
v3.0.0
f29685a
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Learn about vigilant mode.

3.0.0 (2019-05-04)

Locally Scoped Custom Properties (BREAKING CHANGE)

Locally scoped custom properties are now available to use when overriding specific element instances or classes. For example, when creating a button, you can set a global custom property, and then override the locally scoped property:

:root {
  --hiq-button-background-color: lightgray;
}

button.is-primary {
  --button-background-color: blue;
}

With this change, HiQ no longer supports Internet Explorer.

New Gray Palette (BREAKING CHANGE)

A new gray palette is no longer semantically tied to darkest -> lightest values, but now uses numbered gradations. This now makes more sense when using these colors in both light and dark themes. An additional gray value has also been added, bringing the total to eight.

  --hiq-color-gray-1: hsl(220, 10%, 5%);
  --hiq-color-gray-2: hsl(220, 10%, 10%);
  --hiq-color-gray-3: hsl(220, 10%, 20%);
  --hiq-color-gray-4: hsl(220, 10%, 40%);
  --hiq-color-gray-5: hsl(220, 10%, 60%);
  --hiq-color-gray-6: hsl(220, 10%, 90%);
  --hiq-color-gray-7: hsl(220, 10%, 95%);
  --hiq-color-gray-8: hsl(220, 10%, 98%);

Refactored Outline Styles

In previous versions of HiQ, outline styles were applied to focusable elements using the box-shadow property. This could cause conflicts if you wanted to use box-shadow AND have a custom focus style on an element. Now, HiQ uses the native outline properties for styling.

Removal of Extraneous Utilities (BREAKING CHANGE)

Previous versions of HiQ included numerous utility classes. In order to trim down the library, and clarify its purpose, a number of these utilities have been removed. HiQ is designed to be a CSS starter kit, NOT a utility classes library. With the introduction of locally scoped custom properties, the button variant mixin has also been removed.

  • has-text-centered
  • has-text-justified
  • has-text-left
  • has-text-right
  • is-capitalized
  • is-lowercase
  • is-uppercase
  • has-font-weight-light
  • has-font-weight-normal
  • has-font-weight-medium
  • has-font-weight-semibold
  • has-font-weight-bold
  • is-full-width
  • is-max-full-width
  • is-centered
  • is-pulled-left
  • is-pulled-right
  • is-clearfix
  • flex-grid
  • has-inline-children
  • is-marginless
  • is-paddingless
  • is-radiusless
  • is-shadowless
  • button-variant

Renamed Stretch Utility (BREAKING CHANGE)

To conform with the overall naming scheme of utilities, the absolute-stretch utility has been renamed to is-stretched.

Removal of Extraneous Custom Properties (BREAKING CHANGE)

A few infrequently used custom properties have been removed. The distinction between hovered and focused styles have also been removed for all elements, except for inputs, as this is an unnecessary separation in most cases.

Focus-related removed properties:

  • --hiq-button-focus-border-color
  • --hiq-button-focus-background-color
  • --hiq-button-focus-text-color
  • --hiq-input-focus-placeholder-color
  • --hiq-range-input-track-focus-background-color

Other removed properties:

  • --hiq-code-border-radius
  • --hiq-pre-border-radius
  • --hiq-kbd-border-radius
  • --hiq-checkbox-check-position-top
  • --hiq-checkbox-check-position-left
  • --hiq-checkbox-indeterminate-position-top
  • --hiq-checkbox-indeterminate-position-left
  • --hiq-radio-check-position-top
  • --hiq-radio-check-position-left

Return to .css File Extension

Source files now use the standard .css file extension, rather than .pcss, which should make usage of source files easier.

Assets 2
Loading