v6.0.0

✨ New

• Support for Subgrids x-subgrid
• Non-linear Type scale system
• Non-linear Spacing system

🔧 Bug Fixes

• Fixed contrast for links in dark mode (#31)
• Fixed media query documentation alignment (#29)
• Resolved CSS Validator "Invalid Type" errors (#34)

💡 Improvements

• More options to control .disabled class
• Code clean-up, removed Safari-specific alignment (#23)
• Updated skelet.css with various enhancements

Full Changelog: v5.0.0...v6.0.0

v5.0.0

• added --icoSize var for icons
• fixed svg display problems in firefox and safari
• better Headings
• If you need additional link states, add .all-states to body
• fixed positions for better i18n
• added more options to .scroll-snap
• fixed some bugs with .stack
• fixed problems with .has-icon
• added 3 new utility classes for hr .text-hr .text-hre:.text-hrs
• Added span="#" support to x-flex
• fixed prefers-reduced-motion where some animations weren't removed previously.
• Removing support for [L] (window width >= 1600). Therefore x-grid, x-flex and other utilities will no longer support a different layout for >= 1600 width. Only default, [S] and [M] remain.
• Toggle tokens for type="radio" type="checkbox"
• RTL adjustments
• introducing .field-sizing utility class
• New font fallbacks
• fixing display problem for x-grid and x-flex if js class was present.

Full Changelog: v4.0.0...v5.0.0

v4.0.0

Fixed

• Fixed a problem where the text of the button did not align properly when using the --buttonAlign variable.
• Fixed a bug in the .stack utility class.
• Fixed a bug in the .has-icon utility class.
• Fixed a bug in the .fullflex utility class.
• Fixed a bug where children of the x-grid component were incorrectly displayed as display:block.
• Fixed a bug in the iframe component that caused the margins of headings to be incorrect.
• Fixed a bug in Firefox where the :hover and :focus pseudo-classes caused inputs to glitch.

Added

• Added support for the :focus, :active, and :visited pseudo-classes for links.
• Added the small-medium and medium-large utility classes.
• Added an option to control the font size with a global font scale.
• Added a new value of 1f for the span-y utility class.
• Added variables for the height, width, text alignment, and font weight of inputs.
• Added variables for the width and text alignment of buttons.

Changed

• Replaced the clamp function with the minmax function for font size in headings and body.
• Changed the primary color to a shade that works well in both dark and light themes.
• Renamed the --buttonFontSize and --buttonFontWeight variables to --buttonSize and --buttonWeight.
• Made a11y active by default.

Removed

• Removed support for the .badge utility class.
• Removed the normalize.css file.
• Moved the tooltips to a separate file.

Full Changelog: v3.4.6...v4.0.0

v3.4.6

Changed

• Updated main colors
• Updated button paddings
• .group-input-button is now .stack
• Made changes on how .scroll-snap behaves
• Better <tables>. You can now customize tables via vars. You can have a sticky header .is-sticky-head and footer .is-sticky-foot.
• You can now use x-grid and x-flex inside every HTML tag. e.g. <div x-grid columns="2" pi="center">
• Overall x-grid optimization and bug fixes.
• How <figure> and <figcaption> are being displayed
• A bug where data-tooltip overlapped if near another data-tooltip
• Button styles.
• Consistency for checkbox .switch and type=radio

Added

• Added styles for <kbd>
• Added badges use .badge
• Added --buttonHeight to buttons, defaults to: fit-content

Removed

• .has-shadow for buttons has been deprecated.

v3.4.0

Added:

[+] Two dimensional grids. Use <x-cell span-y="1-2"> to create vertical columns.
[+] You can now make any element a grid or flex by adding: <div x-grid> or <span x-flex> and you can use pi="center" like so <div x-grid pi=center>
[+] You can use both x-col & x-cell now
[+] You can use ps="" ai="" etc. on both x-flex & x-grid
[+] <x-grid columns=1f> forces all <x-cell> to span 1 row so you don't have to set all <x-cell> individually to <x-cell span-s=row>
[+] you can now use auto-fill & auto-fit w/ <x-grid columns=fit> / <x-grid columns=fill>
[+] .no-js styles
[+] .visually-hidden
[+] Animations now listen for "prefers-reduced-motion"
[+] Added --inputBorderActive:
[+] Added a .text-break-word for long words
[+] Added a variable for --fontFallback

Removed:

[-] float-*
[-] Float label
[-] Semicolon clean up

Changed:

[=] --box* renemad to --input* to match the elements it's actually applied to
[=] Grid system goes from 1 column to 12 columns (instead of 16 columns)
[=] Buttons padding is set to em instead of rem
[=] box-sizing:border-box target ::before & ::after now
[=] .a11y *:focus has been replaced with *:focus-visible

Fix:

[+] --hSize is now smaller
[+] Fixed button:hover problem
[+] Fixed center-axyz so that if cont is larger it doesn't overflow.
[+] kbd, samp style fix
[+] Fixed button width problem in .group-input-button
[+] Fixed a bug where super long words broke grids
[+] Fixed animation bug

v3.3.2

• fixed specificity problem with :is() ! :where() is used now instead
• added --hSpace --hWeight & --hStyle
• fixed scroll snap bugs
• added .fullheight

v3.3.1

• use class even on x-flex
• fixed iframe width
• bug fixes
• removing docs

v3.3.0

• Added Accessibility class="a11y" or class="a11y--custom"
• Grids, columns & flex change from <grid> <flex> & <c> to <x-grid> <x-flex> & <x-col>
• Buttons: rewritten from scratch
• Buttons: and added new styles
• Removed the scrollbar customization option
• Fixed tooltips' aria-label
• Fixed a lot of bug
• Cleaned up the codebase
• Update the docs

v3.2.2

• + you can now change Headings font-family
• + customize browser's scrollbars with --scrollbarTrack & --scrollbarThumb
• + introducing skelet.min.css
• + fixes and code clean up
• + & other additions

v3.1.20

• + introducing float label placeholder
• + you can now decide how your UL/OL look like: .disc, .square, .roman, .inside, .outside etc.
• + added a new class for .scroll-snap
• + .no-scrollbars class (hide browser scrollbars) you can use it with .mob-scroller or .scroll-snap or else
• + introducing a MEDIUM breaking point for Grids etc.

• -/+ New and better: + Radio + Checkbox + Switch
• -/+ better buttons
• -/+ grid-row-gap is being replaced by row-gap
• -/+ grid-column-gap is being replaced by column-gap

• - code clean up