A lightweight, progressive, high-IQ CSS framework.
MIT License
Bot releases are hidden (Show)
Published by jonathanharrell over 5 years ago
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.
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%);
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.
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
To conform with the overall naming scheme of utilities, the absolute-stretch
utility has been renamed to is-stretched
.
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
.css
File ExtensionSource files now use the standard .css
file extension, rather than .pcss
, which should make usage of source files easier.
Published by jonathanharrell about 6 years ago
.button
class so anchor tags can receive button styling without changing semantics.Published by jonathanharrell about 6 years ago
Replacing postcss-nesting plugin with postcss-nested in build since former with be dropping support for nested media queries.
Published by jonathanharrell over 6 years ago
New button variant mixin to more easily create simple button variants using scoped custom properties.
Published by jonathanharrell over 6 years ago
Major refactor of documentation using Vuepress
Published by jonathanharrell over 6 years ago
Published by jonathanharrell almost 7 years ago
Added indeterminate state styling for checkboxes.
Published by jonathanharrell almost 7 years ago
Added missing border width and color variables for checkboxes and radio buttons.
Published by jonathanharrell almost 7 years ago
Published by jonathanharrell almost 7 years ago