@claviska claviska released this Oct 11, 2017 · 5 commits to master since this release

Assets 2
  • 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

@claviska claviska released this Sep 21, 2017 · 12 commits to master since this release

Assets 2
  • 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

@claviska claviska released this Aug 30, 2017 · 32 commits to master since this release

Assets 2

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

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

@claviska claviska released this Aug 30, 2017 · 35 commits to master since this release

Assets 2
  • 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

@claviska claviska released this Aug 27, 2017 · 49 commits to master since this release

Assets 2

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

@claviska claviska released this Aug 26, 2017 · 58 commits to master since this release

Assets 2
  • 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

@claviska claviska released this Aug 22, 2017 · 80 commits to master since this release

Assets 2
  • 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

@claviska claviska released this Aug 18, 2017 · 94 commits to master since this release

Assets 2

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

@claviska claviska released this Aug 15, 2017 · 140 commits to master since this release

Assets 2

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

@claviska claviska released this Aug 13, 2017 · 151 commits to master since this release

Assets 2

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. 💪