shoelace下载_Shoelace.css：基本CSS入门工具包

shoelace下载

CSS frameworks such as Bootstrap and Semantic UI have become an essential part of web design. They provide the necessary resets, default styles, and components that save us hours and hours of work.

诸如Bootstrap和Semantic UI之类CSS框架已成为Web设计的重要组成部分。 它们提供了必要的重置，默认样式和组件，从而节省了我们数小时的工作时间。

Most CSS frameworks are built using preprocessors such as Less or Sass, which is great, except when folks include the entire library like this:

大多数CSS框架都是使用预处理器(如Less或Sass)构建的，这很不错，除非人们像这样包含整个库：

<!-- Bootstrap 4 - 192KB -->
<link rel="stylesheet" href="bootstrap.min.css">

Or this:

或这个：

<!-- Semantic UI 2.2 - 567KB --> 
<link rel="stylesheet" href="semantic.min.css">

Note the file sizes for the minified versions. And that doesn't even include scripts.

请注意缩小版本的文件大小。 而且甚至不包括脚本。

There are a couple problems here:

这里有几个问题：

One, you don't need most of the things frameworks ship with. They weren't designed for you to use the bundled version, except perhaps for building a really quick prototype.

一，你不需要大部分东西框架附带。 他们不是为您设计使用捆绑版本的，而是为了构建一个真正快速的原型。

Two, when you use the bundled version you lose what makes preprocessors so great, such as customizing everything with variables. For example, in Bootstrap 4 you'll need to update at least 30 styles just to change the primary color globally. Fail!

第二，当使用捆绑版本时，您会失去使预处理器变得如此强大的功能，例如使用变量自定义所有内容。 例如，在Bootstrap 4中，您需要至少更新30种样式，才能全局更改原色。 失败！

Of course, the reason most people load everything is because it's easier. You don't have to worry about Less, Sass, Stylus, or setting up a build script.

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

What if you could have the best of both worlds?

如果您可以两全其美怎么办？

介绍Shoelace.css (Introducing Shoelace.css)

I created Shoelace.css to solve this very problem. It's a highly customizable, pure CSS starter kit that weighs in at only 31KB minified (7.9KB gzipped). You can load it locally or via CDN, yet still customize everything with variables. And it's completely free.

我创建了Shoelace.css来解决这个问题。 这是一个高度可定制的纯CSS入门工具包，最小压缩后只有31KB(压缩后的7.9KB)。 您可以在本地或通过CDN加载它，但仍可以使用变量自定义所有内容。 而且它是完全免费的。

Shoelace uses a well-supported feature of CSS called Custom Properties. Many people like to call them "CSS variables." Either way, they're incredibly useful.

Shoelace使用了CSS的一个受支持的功能，即Custom Properties 。 许多人喜欢称它们为“ CSS变量”。 无论哪种方式，它们都非常有用。

You define custom properties in your stylesheet like this:

您可以在样式表中定义自定义属性，如下所示：

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

And then use them later on like this:

然后像下面这样使用它们：

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

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

The nice thing about custom properties is that they cascade, so you can override them as needed. To customize Shoelace, just override a few variables and you're done. No preprocessing required!

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

Check out this demo on CodePen to see Shoelace in action. You can change the variables and watch components update right in the browser.

在CodePen上查看此演示，以了解Shoelace的运行情况 。 您可以在浏览器中更改变量并观看组件更新。

No magic. Just CSS.

没有魔法 只是CSS。

盒子里装了什么 (What's in the Box)

I like to think of Shoelace as a CSS reset sprinkled with helpful components. It doesn't do quite as much as a full blown framework, but that's intentional. It ships with the essentials because that's usually all you really need. Of course, you can extend Shoelace with your own components as needed.

我喜欢将Shoelace看作是CSS重置，上面撒满了有用的组件。 它并没有完全完善的框架那样做，但这是有意的。 它附带了必需品，因为通常这就是您真正需要的。 当然， 您可以根据需要使用自己的组件扩展Shoelace 。

Here's what you get out of the box:

这是您开箱即用的内容：

• CSS Reset
  CSS重置
• Default Content Styles
  默认内容样式
• Alerts
  警报
• Badges
  徽章
• Buttons
  纽扣
• Forms
  形式
• Loaders
  装载机
• Tabs
  标签
• Tables
  桌子
• Text Utilities
  文字工具
• Float Utilities
  浮动工具
• Sizing Utilities
  实用工具
• Spacing Utilities
  间距实用程序

One thing that Shoelace doesn't ship with is a grid system. This is also intentional, as support for the CSS Grid has improved significantly and you really don't need one anymore. If you haven't explored the CSS Grid yet, Rachel Andrew has created Grid By Example to bring you up to speed.

Shoelace 不附带的一件事是网格系统。 这也是有意的，因为对CSS Grid的支持已大大改善 ， 您真的不再需要它了 。 如果您还没有探索CSS网格，Rachel Andrew会创建Grid By Example来使您快速入门。

If you have an obligation to support older browsers, you're encouraged to include your favorite grid system on top of Shoelace.

如果您有义务支持较旧的浏览器，建议您将自己喜欢的网格系统包括在Shoelace之上。

CSS框架的未来 (The Future of CSS frameworks)

I don't like to call Shoelace a framework. It's more of a "CSS starter kit" that lets you build things without the overhead preprocessors require. The fact that you can <link> to it with one line and immediately have access to a fully customizable CSS boilerplate is incredible.

我不喜欢将Shoelace称为框架。 它更像是一个“ CSS入门工具包”，可让您构建东西而无需额外的预处理器。 您只需一行即可<link>并立即访问完全可定制CSS样板，这一事实令人难以置信。

I think Shoelace is the future of CSS frameworks. Preprocessors still have a place in the world of web design, and they will at least until color modifiers and custom media queries land, but CSS is catching up fast — and Shoelace is taking full advantage of it.

我认为Shoelace是CSS框架的未来。 预处理程序在Web设计领域中仍然占有一席之地，至少在颜色修饰符和自定义媒体查询登陆之前，它们会一直流行 ，但是CSS很快赶上了时代-Shoelace充分利用了它。

Shoelace was created by @claviska. You can learn more about this project by visiting shoelace.style.

鞋带由@claviska创建。 您可以通过访问shoelace.style了解有关此项目的更多信息。

翻译自: https://davidwalsh.name/shoelace-css

shoelace下载