- Re-factored the flex pseudo grid system to use x-axis padding for vertical gutters, and to add media query breakpoint modifiers to flex-items rather than relying on the breakpoint modifiers on the flex wrapper. Introduced a new
.flex-grid
wrapper class to set up the flexbox and cause wrapping of pseudo grid flex-items. Now the flex-items can have their columnar spanning individually controlled at multiple media query breakpoint widths. These will become 100% width below their media query breakpoints. Backward compatibility is maintained:.flex-grid
is doing the same thing as.flex.flex-wrap
.It is still possible to use the.flex.flex-wrap
,.flex-sm.flex-wrap
etc. on flex pseudo grids, but the new way gives you granular control of indivicual pseudo columns at more than one breakpoint.
- Fixed a bug in
activator.jquery.js
that interfered with resetting Activator components after moving focus off and back on to them (now they close with a single click). - Added media query breakpoint widths to
.flex-gap
(which is handled by margins not flexbox gap, for backwards compatibility). Now the.flex-gap
only take effect above the.flex
(all), or.flex-sm
/.flex-md
/.flex-lg
breakpoint (and therefore smaller layouts are not messed up by unwanted margins). - Combined several media queries in the layout utilities.
- Reduced the heading sizes a little.
- Moved
scroll-behavior: smooth
from body{} to html{}. - Minor snagging since 4.0.7.
- Improved the UI colors (including form element focus, highlight/mark and select colors).
- Made hover states to lighten in dark theme.
- Increased H2, .h2 and .t-semibold font weight to 600.
- Bug fixes to
activator.js
andactivator.jquery.js
, to reset the control button after clicking a close button. - Refactored the modal as lightbox examples for Activator.
- Removed some redundant inline utility classes (large and small sizes).
- Improved
t-long-read
. - In the docs, moved AlpineJS (CDN source) and
activator.js
to the HTML<head>
and added thedefer
attribute to the script tag.
- Improvements to
.menu
- Bug fix in
activator.js
(&activator.jquery.js
), so that a second click on a control also releases the (optional) scroll-lock. - Added
.table-fixed
.
- Minor improvements to typography:
- slightly reducing H3 and H4 heading sizes, so that there is more difference between couplets of H2/H3 and H3/H4;
- Adding margin below OL and UL, so that it is the same as for paragraphs and headings (instead of the space between each LI).
- Downloadable zipped
dist
folder, prepared usinggulp-zip
. - Improvements to the docs.
- Added the
.panel-responsive
component. - Minor snagging.
- Improvements to the docs.
See: ie11-support.md
- CSS: renamed the CSS grid
.container
as.container-grid
, and exposed the (was false variable toggled) traditional.container
(that has x-axis margin auto centering). Similarly exposed the full-bleed utility (uses nrgative margin and CSS transform) and renamed the CSS grid bleeds as.container-grid-full-bleed
etc. - CSS: added a responsive 12-column flexbox pseudo grid.
- CSS: added classless styling for the
<details>
and<summary>
tags. - CSS: Adjusted the UI secondary and success colors.
- CSS:
flex-gap
is not (yet) implemented in Safari. Therefore, reverting to the old “negative margins on the flexbox wrapper; positive margins on flex items” technique (hack) to make.flex-gap
work everywhere. - JS: Using
Array.from()
in constants that query select for arrays of CSS classes. This fixed a bug where on Mac and iOS Safari was (correctly) not handling scroll locks on other than the first demo modals in the docs.
- Codebase 4’s first sync with Github.