A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME πππ
MIT License
Bot releases are hidden (Show)
Published by claviska almost 5 years ago
Published by claviska about 7 years ago
Published by claviska about 7 years ago
--input-font-size-sm|xs
--dropdown-font-size
--dropdown-font-weight
--dropdown-heading-color
--dropdown-heading-font-size
--dropdown-heading-font-weight
--dropdown-line-height
--dropdown-caret-color
--dropdown-caret-size
--dropdown-caret-width
event.preventDefault()
in the select
callback.--font-size-small
relative by default--font-size-big
since it was no longer usedPublished by claviska about 7 years ago
This version fixes a critical bug that prevented dropdowns from working properly.
Published by claviska about 7 years ago
--input-focus-width
to --component-focus-width
since inputs don't use itPublished by claviska about 7 years ago
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:
variables.css
(this makes it a lot easier to bootstrap the project and use Shoelace's variables in your own project)--body-color-muted
variable.text-muted
modifierPublished by claviska about 7 years ago
hide-xs
, hide-sm-down
)input-single
to input-field
since it's more semantic--label-color
variable--input-addon-*
variables:last-child
margins so they only apply to direct descendents[hidden]
elements to not displayPublished by claviska about 7 years ago
--focus-width
variables for easier customization--component-speed
variable for easier customization--component-box-shadow-inner|outer
for easier customizationPublished by claviska about 7 years ago
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:
tomato
π
to --color-blue
πloader-small|big
modifiersloader-xs|sm|lg|xl
modifierspadding-
to pad-
margin-
to mar-
top|left|bottom|right
to t|l|b|r
--spacing-small|big
--spacing-xs|sm|md|lg|xl
width-
to w-
height-
to h-
-w-max-100
and -h-max-100
--dropdown-divider-border-color
to --dropdown-divider-color
--dropdown-divider-border-width
to --dropdown-divider-width
progress-small|big
modifiersprogress-xs|sm|lg|xl
modifiersswitch-small|big
modifiersswitch-xs|sm|lg|xl
modifiersinput-small|big
modifiersinput-xs|sm|lg|xl
modifiersbutton-small|big
modifiersbutton-xs|sm|lg|xl
modifiers--s3
option to the build scriptPublished by claviska about 7 years ago
This release adds loader buttons and fixes disabled links. No breaking changes from beta15.
button-loader
modifier<a>
buttons which fixed a bug where disabled dropdown buttons weren't styleddropdowns.js
and tabs.js
Published by claviska about 7 years ago
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.
a.button
and label.button
wouldn't show hover stateloader-dark
--component-spacing
and rename to --component-padding-x
and --component-padding-y
--component-spacing-small
and --component-spacing-big
<hr>
exampleAll in all, the restructuring today brings Shoelace closer and closer to a stable release. It's now more modular, extensible, and better documented. πͺ
Published by claviska about 7 years ago
This release has breaking changes!
.button-link
variables.css
shoelace.css
--color-primary
to --state-primary
--state-secondary
--state-light
--state-dark
--color-info
default from aqua to teal--state-inverse
--text-muted
(use --state-secondary
instead)text-light
and text-dark
text-muted
(use text-secondary
instead)Published by claviska about 7 years ago
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.
Published by claviska about 7 years ago
Beta 12 is hereby dubbed the "need more sleep version." Don't use it. Use beta 13.
Published by claviska about 7 years ago
em
units for badges<big>
element{version}
placeholder to {{version}}
so it's consistent with Handlebars--clean
remove the docs in build scriptPublished by claviska about 7 years ago
This release mostly focuses on splitting the docs from the homepage.
:last-child
Published by claviska about 7 years ago
shoelace.js
with official support for making dropdowns and tabs interactive πͺ
show
and hide
events for tabsshow
, hide
, and select
events for dropdowns--s3
optionshoelace.js
to build.js
Note: the docs in this version show incorrect links for both CDN resources. The links have been corrected and are available on shoelace.style.
Published by claviska about 7 years ago
--input-font-size-[small|big]
--switch-font-size-[small|big]
table-hoverable
table modifierPublished by claviska about 7 years ago
padding-*
and margin-*
were completely different than what the docs showed.Published by claviska about 7 years ago
What. A. Week.
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:
padding-*
and margin-*
instead of p-*
and m-*
due to a conflict with microformats (see #14)