Shoelace.css: A Back to the Basics CSS Starter Kit

第二，当你使用捆绑版本时，你失去了预处理器如此强大的功能，比如用变量定制一切。例如，在Bootstrap 4中，您需要更新至少30种样式才能全局更改原色。失败

当然，大多数人加载所有的原因是因为它更容易。您不必担心Less、Sass、Stylus或设置构建脚本。

如果你能两全其美呢？

Introducing Shoelace.css

我创建了Shoelace.css来解决这个问题。这是一个高度可定制的纯css入门套件，重量仅为31KB（7.9KB gzipped）。您可以在本地或通过CDN加载它，但仍然可以使用变量自定义所有内容。而且它是完全免费的

Shoelace使用了一个广受支持的CSS功能，名为自定义属性。许多人喜欢称它们为”CSS变量“。“不管怎样，它们都非常有用。

您可以在样式表中这样定义自定义属性：

:root {
  --body-color: #000;
  --body-bg-color: #fff;
  --pnk-color: blue;
}

然后像这样稍后使用它们：

body {
  color: var(--body-color);
  background-color: var(--body-bg-color);  
}

a {
  color: var(--pnk-color);  
}

自定义属性的好处在于它们级联，因此您可以根据需要覆盖它们。要自定义Shoelace，只需覆盖几个变量即可。无需预处理！

在CodePen上查看此演示，了解Shoelace的实际操作。您可以在浏览器中更改变量并观看组件更新。

没有魔法。只是CSS。

What s in the Box

我喜欢把Shoelace看作是一个CSS重置，里面点缀着有用的组件。它的作用不如一个完整的框架那么大，但这是有意的。它附带了必需品，因为这通常是你真正需要的。当然，您可以根据需要使用自己的组件来扩展Shoelace。

以下是您开箱即用的内容：

CSS Reset

Default Content Styles

Alerts

Badges

Buttons

Forms

Loaders

Tabs

Tables

Text Utipties

Float Utipties

Sizing Utipties

Spacing Utipties

Shoelace没有配备的一件事是网格系统。这也是有意为之的，因为对CSS网格的支持显著改进和你真的不需要了。如果你还没有探索过CSS网格，Rachel Andrew已经创建了按示例网格，让您跟上进度。

如果你有义务支持旧的浏览器，我们鼓励你在Shoelace上加入你最喜欢的网格系统。

The Future of CSS frameworks

我不喜欢把Shoelace称为一个框架。它更像是一个“CSS入门工具包”，可以让您在没有预处理器所需开销的情况下构建东西。事实上，您可以<；链接>，只需一行即可访问到一个完全可定制的CSS样板，这真是不可思议。

我认为Shoelace是CSS框架的未来。预处理器在网页设计领域仍然占有一席之地，至少在颜色修饰符和自定义媒体查询落地，但CSS正在迅速赶上，而Shoelace正在充分利用它。

Shoelace由@claviska。您可以访问鞋带。款式

About Cory LaViska

Cory LaViska是新罕布什尔州一家小型开发工作室A Beautiful Site，LLC的创始人。他负责Shoelace和Surreal CMS，以及GitHub上的一些开源项目