Possible breaking changes
- Moved
@custom-media
custom media queries from_base.css
to_media_queries.css
and remove from:root {}
context as per issue (csstools/postcss-custom-media#54) - Removed
position: absolute;
from.position-[direction]
utility classes
Additons
- Added numerical value
.font-weight-*
utility classes for 100-900 values - Added
position-absolute
,position-fixed
,position-relative
classname variants for utility classes - Added
sticky
,position-sitcky
andstatic
,position-static
utility classes - Added
cursor-*
utility classes for all values of thecursor
property - Added
font-style-*
utility classes for all values of thefont-style
property - Added
media-cover
class to set media element to absolutely cover containing element - Added
no-border-radius
alias for settingborder-radius: 0:
- Added
overflow-wrap-*
utility classes for all values of theoverflow-wrap
property - Added
group-column
andgroup-nowrap
to groups - Added
opacity-*
utility classes for general 5% opacity scales - Added
height-100
utility class forheight: 100%
- Added
width-100
utility class forwidth: 100%
- Added
--form-message-font-style
,--form-message-text-transform
and--form-message-letter-spacing
property declarations - Added
--label-font-style
property declaration - Added
--input-font-style
,--input-text-transform
and--input-letter-spacing
property declarations - Added
--select-font-style
,--select-text-transform
and--select-letter-spacing
property declarations - Added
--control-font-style
,--control-text-transform
and--control-letter-spacing
property declarations
Updates
- Updated dependancies. Including major versions for
postcss@^7.0.17
andpostcss-preset-env@^6.7.0
- Updated
--select-border-radius
default variable definition in_form.css
to--input-border-radius
- Updated
.font-weight-*
named variables and utility classes to match common name matching as identified in issue #32 - Updated
.position-[direction]
utility classes to include variants forposition-top
,position-right
,position-bottom
,position-left
- Updated
display-title
default variable definitions for better default styling - Updated opinionated styles from
<fieldset>
default variable definitions, instead opting basic display which can be customised if desired - Updated
--legend-padding
to0
default variable definitions removing opinionated styles - Updated
.media
class to set child<img>
,<video>
, &<canvas>
elements to beobject-fit: cover
by default
Removals
- Removed duplicate
caption
selector inreset.css
- Removed
position: absolute;
from.position-[direction]
utility classes
Fixes
- Fix typo in package.json browserlist value
- Button with
spinner
class setcolor: transparent
to ensure spinner is visible over text
Docs
- Updated Border Color examples with
margin-vertical-xs
- Remove unnecessary duplicate or "Example"
<h2>
from utility class pages - Updated
field
examples to use<p>
tags to improve semantics - Cleanup
<input />
tags for prettier HTML cleanup - Update
nav.yml
utility class pages into alphabetical order - Improve navigation active visual indicators to highlight 3rd level pages
Additions
- Add
border-radius-none
utility class
Fixes
- Restructure button indicator classes hierarchy to allow for optional
.button-*
classes for indicators for consistency
Breaking changes
- Updated
hide
andshow
utility classes to be consistant with naming convention as outlined in #23
Fixes
- Remove
padding-left
on<li>
tags within<ol>
,<ul>
with the.list-unstyled
class - Replace abritory
right: 15px
value onselect::after
arrow with1em
Additions
- Add
display-none
,display-contents
,display-flex
,display-inline-flex
,display-grid
utility classes - Extend
overflow
utility classes with x/y varients and adding-webkit-overflow-scrolling: touch;
tooverflow-scroll
utility classes - Added
--headings-font-style
and--headings-small-font-style
property declarations - Added
--display-title-font-style
property declaration - Added
--all-caps-font-style
property declaration - Added
--strong-font-style
property declaration - Added
--code-font-style
property declaration - Added
--pre-font-style
property declaration - Added
--kbd-font-style
property declaration - Added
--mark-font-style
property declaration - Added
--lead-font-style
,--lead-text-transform
and--lead-letter-spacing
property declarations - Added
--paragraph-font-style
,--paragraph-text-transform
and--paragraph-letter-spacing
property declarations - Added
--blockquote-text-transform
and--blockquote-letter-spacing
property declarations - Added
--cite-line-height
,--cite-text-transform
and--cite-letter-spacing
property declarations - Added
--definition-term-font-style
,--definition-term-text-transform
and--definition-term-letter-spacing
property declarations - Added
--definition-description-font-style
,--definition-description-text-transform
and--definition-description-letter-spacing
property declarations - Added
--list-font-style
,--list-text-transform
and--list-letter-spacing
property declarations - Added
--emphasis-font-family
,--emphasis-font-weight
,--emphasis-color
property declarations
Documentation
- Added documentation for
pointer-event
utility classes
Upgrades
- Upgrade
normalize.css
tov8.0.0
- Change PostCSS dependancy from
postcss-cssnext
topostcss-preset-env
. - Update dependencies to latest compatible major versions
- Commit package-lock.json
- Updated
color()
function tocolor-mod()
(stage 2) CSS spec
Breaking Changes
- Removed
@apply
rules and remove_mixins.css
definitions along with documentation - Removed
--gutter
and utity classes in preference for--container-gutter
being set on the container element only - Removed
--margin-*
and--padding-*
custom property definitions in preference for--space
avoiding duplicate values - Removed font size responsive declarations for
:root
element, it's not being used, has no real benefit and is easy to update manually - Removed
--input-*-padding
and--select-*-padding
custom property definitions asinput
andselect
sizes already use relative padding size (em
) and this is not required - Removed
@apply
fromprogress
andinput[type="range"]
elements - Removed
.big
typography styles - Removed
.small-caps
typography styles, rplaced withall-caps
with size variants - Removed
left-*
andright-*
float utility classes (along with responsive breakpoint classes) - Renamed
text-*
utility alignment classes to.text-align-*
and text-transform utility classes to.text-transform-*
- Refactored
button-icon
sizing to add sizing for each size under--button-icon-*-size
variable definitions, these sizes are inhertited by the<svg>
element within a.button-icon
element without the need for anicon-*
class
Additions
- Added
xxs
, andxxl
variants for all global classes (font-size
,line-height
, etc.) elements (input
,button
, etc.) and@media
query breakpoints - Added support for
control-reversed
modifier - Added support for
[disabled]
attribute on<a class="button ...">
- Added space utility classes to add
width
andheight
to an element based on--space-*
custom property defintions - Added
.all-caps
as a replacement for.small-caps
with size variants for greater flexibility - Extended
.display-title
with size variants for greater flexibility - Extended
.lead
with size variants for greater flexibility - Added
.group
base class with alignment and size variants to be placed on wrappers of<ul>
lists with margins applied to<li>
elements within - Added
--spinner-width
to control the thickness of the.spinner
element - Added support for
.spinner-*
sizes - Added
.box-shadow-*
sizes and utility classes - Add
margin-negative-*
utility classes for all sizes - Add
margin-vertical-*
utility classes for relative sizes (em) including 1, 3-4, 1-2, 1-4 - Add
min-height-*
utility classesvh
basedmin-height
settings - Add
order-*
utility classes for 1, 2, 3 and aliases first, middle, last - Added
.button-text
modifier class - Added
.font-family
,.font-weight
,.font-size
,.line-height
,.letter-spacing
, and.box-shadow
utility classes for base settings - Added
--link-text-decoration-skip
and--link-hover-text-decoration-skip
for links - Added
--all-caps-color
variable definition - Added
--label-text-transform
and--label-letter-spacing
variable definitions - Added
--control-text-transform
,--control-letter-spacing
variable definitions - Added
--definition-term-line-height
and--definition-description-line-height
variable definitions - Added
text-decoration-underline
andtext-decoration-none
utility classes
Fixes
- Added
.table-responsive
to margin reset - Fixed
.button-group
not resettingborder-radius
for direct decendants - Removed
height
from being set oninput[type="range"]
withheight: auto
- Updated
package.json
scripts to be more descriptive and meaningful - Fixed
.control
check indicator border color to default to checked background color - Updated
.control:checked
indicator SVG glyph, no longerbase64
but ratherutf-8
encoding for editing and scaling purposes - Removed
:not(:disabled)
frominput
,.field-float-label
,select
, andbutton
styles - Fix direct child
<ul>
/<ol>
of<li>
recieving styles to avoid nested markup inheriting styles - Add
px
affix toflex-1
utility class flex property value:flex: 1 1 0px
for IE support - Fixes to links
text-decoration-skip-ink
property value addingtext-decoration-skip-ink: auto;
to links by default
Style Changes
- Tighten global
--space-*
sizes - Increase default global
--border-radius
custom property definition to0.125rem
(4px
) - Update default global
--max-width
and--letter-spacing
custom property definitions to have generic scales - Tightened
progress
andinput[type="range"]
heights - Tightened
.control
size scale - Decrease default global
--label-magin
custom property definition - Update default global
--field-magin
and--range-magin
custom property definition - Updated default
<pre>
and<code>
styles - Updated default
-icon-*
sizes
Documentation
- Removed
<mark>
indicator variants - Add prettier formatter for
.md
markdown files - Docs move quick start to getting started
Fixes
- Reset
<caption>
margin for:first-child
and:last-child
Updates
- Updated default
line-height
variable defintions to be proper fractions
--line-height-xl: 1.75;
--line-height-l: 1.625;
--line-height-m: 1.5;
--line-height-s: 1.375;
--line-height-xs: 1.25;