shoelace

• Fix semver numbering
• No other changes from 1.0.0-beta24

• Added tabs-nav block modifier
• Added input hints
• User browser default for less distracting focus state on tabs
• Fixed bug where textareas didn't work with validation classes

• Adjusted default values for --input-font-size-sm|xs
• Added dropdown headings
• Added dropdown variables:
  • --dropdown-font-size
  • --dropdown-font-weight
  • --dropdown-heading-color
  • --dropdown-heading-font-size
  • --dropdown-heading-font-weight
  • --dropdown-line-height
• Removed ASCII dropdown caret and use borders instead. Added:
  • --dropdown-caret-color
  • --dropdown-caret-size
  • --dropdown-caret-width
• Fixed dropdowns so text alignment is correct even when the parent element is different
• Fixed dropdowns so they don't close when clicking on disabled items or headings
• Fixed dropdown behavior so clicks aren't intercepted by default. This lets you use regular links in your dropdowns without the need for JavaScript. To intercept a click, use event.preventDefault() in the select callback.
• Made --font-size-small relative by default
• Remove --font-size-big since it was no longer used
• Made dropdown selectors less specific so they're easier to override
• Made button selectors less specific so they're easier to override
• Fixed various typos and examples in the docs

This version fixes a critical bug that prevented dropdowns from working properly.

• Fix dropdown bug introduced by #49
• Fix file button positioning

• Fixed input icons so they inherit validation classes
• Fixed input icons so they work better with icon fonts and SVG icons
• Fixed bug where dropdown triggers with children wouldn't open the menu
• Changed --input-focus-width to --component-focus-width since inputs don't use it
• Rewrote tabs script
  • Switch to a mutation observer instead of event listeners ✨
  • This makes it easier to programmatically switch tabs
  • Keeps tab panes in sync with the active tab with zero effort from the user
• Made file buttons into their own component
  • Changed structure to make file buttons keyboard accessible
  • Added lots of examples
• Minor corrections to the docs

Shoelace is inching closer and closer to its first stable release. Lots of bugs have been fixed I'm really happy with the API and the overall structure of the project. 💯

What's new in this release:

• Separated core/component variables and custom media queries into variables.css (this makes it a lot easier to bootstrap the project and use Shoelace's variables in your own project)
• Added input icons
• Added --body-color-muted variable
• Added .text-muted modifier
• Improved checkbox/radio alignment

• Forked the Bootstrap 4 grid system for Shoelace
• Added custom media queries for xs, sm, md, lg, and xl breakpoints
• Added display utilities (e.g. hide-xs, hide-sm-down)
• Reduced switch sizes so they're not so gigantic compared to inputs
• Changed input-single to input-field since it's more semantic
• Added --label-color variable
• Added --input-addon-* variables
• Fixed :last-child margins so they only apply to direct descendents
• Added polyfill styles to force [hidden] elements to not display
• Documentation updates

• Changed loader sizes to be consistent with inputs by default
• Adjust default loader thickness
• Fixed active/hover states for dark buttons
• Increased default input heights slightly (2rem => 2.25rem, etc.)
• Increased bottom margins to 1.5rem from 1rem
• Decreased default focus ring widths from 3px to 2px so they're not so obnoxious
• Decreased button border width for a more subtle effect (2px => 1px)
• Added --focus-width variables for easier customization
• Added --component-speed variable for easier customization
• Added --component-box-shadow-inner|outer for easier customization
• Adjusted fieldset padding slightly

This release makes Shoelace usable for more people today. There is a fundamental change to how the /dist is generated and how the library is customized. I discussed why this change was necessary in #41.

Long story short, we're still using pure, future-ready CSS. You can use the dist/CDN version as-is for prototyping. But to customize Shoelace and use future CSS features such as nesting, color functions, etc., you'll need to use the source version and run it through cssnext. Alas, due to IE's lack of support for CSS variables, and Edge's very buggy support for them, this is necessary for now.

Here's something I wrote on the new website that I'd like to emphasize:

Shoelace makes extensive use of future CSS features in its source. Most browsers don’t support this syntax today, but they will soon. As CSS evolves and support improves, you’ll eventually be able to use Shoelace without any processing at all. In that sense, Shoelace is “future-ready.”

CSS has a really bright future, and you can use most of its upcoming features today with Shoelace + cssnext. You no longer need Less or Sass to do amazing things with CSS.

I believe we should focus on the future. Preprocessors had a place when the evolution of CSS seemed stagnant, but things have changed and it’s time to move forward. Instead of learning a different syntax, let’s just learn the future syntax.

That sort of sums up my goal for this project. It sucks that we can't use CSS variables natively today, but we will very soon, and I'll be enabling future features in Shoelace little by little as browser support for each one becomes more mainstream.

OK, here's what else is new with this release:

• Switched primary color from tomato 🍅 to --color-blue 💙
• Reworked alerts
  • More customizable with variables
  • Used color functions for a better appearance
  • Made alert links bold instead of underlined
• Reworked loaders
  • More customizable with variables
  • Used color functions for loader bg color
  • Removed loader-small|big modifiers
  • Added loader-xs|sm|lg|xl modifiers
  • Changed some var names to make more sense
• Reworked spacing utilities
  • Shortened padding- to pad-
  • Shortened margin- to mar-
  • Shortened top|left|bottom|right to t|l|b|r
  • Removed --spacing-small|big
  • Added --spacing-xs|sm|md|lg|xl
• Reworked sizing utilities
  • Shortened width- to w-
  • Shortened height- to h-
  • Added -w-max-100 and -h-max-100
• Reworked badges
  • More customizable with variables
  • Added focus states to badge links
• Reworked dropdowns
  • Changed --dropdown-divider-border-color to --dropdown-divider-color
  • Changed --dropdown-divider-border-width to --dropdown-divider-width
  • Added focus state for menu items
• Reworked progress bars
  • More customizable with variables
  • Removed progress-small|big modifiers
  • Added progress-xs|sm|lg|xl modifiers
  • Better indeterminate animation
• Reworked switches
  • More customizable with variables
  • Removed switch-small|big modifiers
  • Added switch-xs|sm|lg|xl modifiers
  • Added focus states
• Reworked forms
  • Removed input-small|big modifiers
  • Added input-xs|sm|lg|xl modifiers
  • Fixed range styles to be consistent in all browsers
• Reworked buttons
  • More customizable with variables
  • Removed button-small|big modifiers
  • Added button-xs|sm|lg|xl modifiers
  • Added focus states
  • Fixed button loader colors with color functions
• Moved official CDN back to KeyCDN (Shoelace is unofficially available on CDNJS as well)
• Added back the --s3 option to the build script
• Added nesting to all components for better organization
• Added stylelint
• Updated docs to reflect these changes

This release adds loader buttons and fixes disabled links. No breaking changes from beta15.

• Added button-loader modifier
• Added back disabled <a> buttons which fixed a bug where disabled dropdown buttons weren't styled
• Simplified dep check in dropdowns.js and tabs.js
• Minor updates to the docs

Got a little ambitious with the last release. Lots of changes, a couple bugs I missed. 🐛 This release fixes those.

If you're updating from beta13 or below make sure to read the beta14 release notes too.

• Fixed bug where hovering on a.button and label.button wouldn't show hover state
• Fixed active state for file buttons
• Fixed background color for loader-dark
• Split --component-spacing and rename to --component-padding-x and --component-padding-y
• Removed --component-spacing-small and --component-spacing-big
• Added a custom components example to the docs
• Added <hr> example
• Added example code for background utilities

All in all, the restructuring today brings Shoelace closer and closer to a stable release. It's now more modular, extensible, and better documented. 💪

This release has breaking changes!

• Fixed active status for .button-link
• Changed alternative grid system recommendation
• Removed variables.css
  • Moved core variables to shoelace.css
  • Moved component variables to their respective stylesheets
  • This makes Shoelace more modular and removes added weight from unused modules
• Reworked color/state variables:
  • Changed --color-primary to --state-primary
  • Added --state-secondary
  • Added --state-light
  • Added --state-dark
  • Changed --color-info default from aqua to teal
  • Removed --state-inverse
  • Removed --text-muted (use --state-secondary instead)
  • We now have the following states: primary, secondary, success, info, warning, danger, light, dark
• Reworked variations for alerts, badges, buttons
  • Added secondary, light, and dark variations
  • Removed inverse variation
• Added variations to loaders, progress bars, and switches
• Added text-light and text-dark
• Removed text-muted (use text-secondary instead)
• Removed support for disabled links
• Lots of minor tweaks and improvements
• Lots of updates to the docs

• Don't use scoped variables
• Added GitHub templates

Why were scoped variables removed?

Myth and cssnext convert CSS variables to static properties, making it possible to use Shoelace in all browsers today. However, it's not possible for these libraries to handle scoped variables, therefore, all variables must be defined at the root.

For example:

:root {
  --color: red;
}

.blue {
  --color: blue;
}

div {
  color: var(--color);
}

<div>
  This will be red.
</div>

<div class="blue">
  This will be blue.
</div>

Because of this, I've reverted all scoped variables in Shoelace so you can continue to use it with Myth or cssnext as needed.

Beta 12 is hereby dubbed the "need more sleep version." Don't use it. Use beta 13.

• Added progress bars 🎉
• Used scoped variables for many modifiers to save code
• Added CSS grid example
• Added Font Awesome example
• Changed to default font weight for badges
• Changed padding to use em units for badges
• Removed prefixed pseudo elements from source
• Fixed bug where autoprefixer wasn't applying prefixes to imported files
• Fixed bug where some variable names for tabs were wrong
• Removed default styles for obsolete <big> element
• Changed {version} placeholder to {{version}} so it's consistent with Handlebars
• Removed unused stats from build script
• Made --clean remove the docs in build script
• Various updates to the docs

This release mostly focuses on splitting the docs from the homepage.

• Split website into a homepage + docs
• Fixed CDN links 😵
• Fixed margin for blockquote :last-child

• Added shoelace.js with official support for making dropdowns and tabs interactive 💪
  • Added support for jQuery or Zepto (see #21)
  • Added show and hide events for tabs
  • Added show, hide, and select events for dropdowns
• Reworked the build script
  • Added minification for scripts
  • Removed the --s3 option
  • Renamed from shoelace.js to build.js
• Fixed bug where adjacent block buttons would have a top margin in input groups
• Fixed bug where placeholder text was misaligned in iOS
• Fixed bug where list item bullets were inside instead of outside
• Switched to CDNJS

Note: the docs in this version show incorrect links for both CDN resources. The links have been corrected and are available on shoelace.style.

• Added dropdowns 🎉
• Added --input-font-size-[small|big]
• Added --switch-font-size-[small|big]
• Added table-hoverable table modifier
• Fixed focus rings in input groups
• Various updates to docs

• Changed spacing utilities to be consistent with docs. Critical fix since most class names for padding-* and margin-* were completely different than what the docs showed.

What. A. Week.

• My post about Shoelace was featured on David Walsh's blog yesterday
• I woke up Shoelace being on the homepage of Hacker News
• As a result, Shoelace received lots of ⭐️ ⭐️ ⭐️ and is now trending on GitHub

We're GitHub Famous for a day! 💃

Seriously though, I'm thrilled to see so much interest in my little side project. I really think it's the future of CSS frameworks.

Without further ado, here's 1.0.0-beta6:

• Switched from CleanCSS to PostCSS/cssnano for a smaller minified build
• Added Autoprefixer to provide better support for older browsers
• Changed spacing utilities to use padding-* and margin-* instead of p-* and m-* due to a conflict with microformats (see #14)
• Fixed a bug where text in certain inputs would be cutoff/misaligned in Safari
• Added preload link to CDN instructions to optimize loading in supportive browsers
• Various updates to the docs