shoelace-style/shoelace 1.0.0-beta17

on GitHub

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