前端开发人员需要他们可以获得的所有最佳资源。 通常,这意味着要在 Bootstrap 之类的框架上工作,因为它基本上包含了所有内容。
但是,还有许多替代方法 , Shoelace.css是您应该熟悉的此类示例。
这个免费CSS套件并不是真正的完整框架。 相反,它更像是一个入门套件,适合那些不想从头开始构建数十种自定义CSS样式的开发人员。
您始终可以使用CSS重置,但是只能对每个浏览器进行相同的格式化。 对于处理更复杂的任务 ,重设并不是全部内容 ,而这正是Shoelace的重点。
![Shoelace.css主页](https://i-blog.csdnimg.cn/blog_migrate/1a38d13c89feb577f4af48502bc6e170.png)
它作为带有在Node上运行的CLI的软件包提供 ,您可以与任何项目一起安装。 虽然,如果您不想使用npm,它也有CDN版本 。
要进行所有设置,请查阅官方文档中的安装指南 。 尽管此标签被标记为CSS库,但它确实也包含JavaScript组件 。 尽管大多数代码都在jQuery上运行 ,所以您需要将其作为依赖项包括在内。
如果您进一步研究文档,则会找到自定义页面 , 该页 面向您展示如何在CSS中编辑变量 。 这些使您可以构建自定义组件并轻松更改默认的Shoelace样式。
![Shoelace.css样式表下拉样本](https://i-blog.csdnimg.cn/blog_migrate/67e302769f2c61e670d0490fbc60782f.png)
每个组件的设计确实具有Bootstrap感 ,因此Shoelace几乎可以在任何布局中使用。
但是,它也比Bootstrap具有更陡峭的学习曲线 ,因为它不那么受欢迎,也没有足够的支持。 在撰写本文时,Shoelace仍处于v1.0 beta中,因此有足够的时间赶上较大的前端框架。
快速浏览一下文档应该证明它已经准备好用于生产站点 。 Shoelace是否值得学习和实施完全取决于您。
窥视GitHub存储库以获取副本 ,以及在线文档以获取更多设置信息 。 如果您对Shoelace有任何疑问或建议,还可以在Twitter @claviska上给创建者下一行 。
翻译自: https://www.hongkiat.com/blog/shoelacecss-frontend-starter-kit/