嘿,孩子们,您准备好告诉我有关这个叫做Bootstrap的新奇事物了吗?好吧,因为我永远不会对你这样做。并不是说Bootstrap并不出色,而是因为如果您从事Web设计,并且您一直在关注任何东西,那么您已经知道了。
如果您不满意,那么……欢迎来到这个行业!我们有一些您可能想查看的文章。
对于其他所有人,我一直在寻找新事物,刺激甚至是乐趣。上帝保佑GitHub的高级搜索功能,因为我发现CSS图书馆可以做各种事情。即使您最终不使用它们,也可以绝对向他们学习。看一看:
CSS Wand
CSS Wand是此列表中较简单和较小的库之一。它实际上只是少数几个简单的,基于CSS的纯动画,您可以将它们复制粘贴到您的站点中,并随意进行自定义。如果您需要使按钮,输入或加载动画看起来不错,可以尝试一下。
Water.css
是的,那是Water.css,就像“只需加水”中一样。这是一组默认样式,尽管它没有一个完整的CSS框架,但如果您不想为自己的类型或表单样式烦恼,可以帮助您入门。它的重量小于2kb,并且不使用任何类。老实说,这就是我的入门框架。
Raisin CSS
Raisin CSS将自己描述为实用程序CSS库,这意味着(您猜对了)很多类。他们已经为CSS Grid,FlexBox,断点,Display属性,溢出,定位等预构建了模块。如果要使用JS即时更改许多不同元素的外观,我将亲自使用这样的库。
Atomize
Atomize比Raisin CSS更进一步,创建了更像基于Atomic CSS的完整框架以及关注点分离理论的东西。它旨在保持风格中立,让您定义自己的断点,并且可以将其与NPM一起使用,或者仅下载源代码以与任何其他开发管道一起使用。
Sassyfication
从名称开始就可以说是恶意。这只是让我想以“ Z”形指尖,告诉别人他们无法应付我。它还具有用于SASS的常用变量和mixin的集合。考虑一下前面提到的实用程序库,但适用于SASS。
伙计,我爱SASS,但我仍然想念LESS。还有人想念LESS吗?
Spectrum CSS
Adobe拥有自己的设计系统或有时被称为“设计语言”的不足为奇。好吧,这叫做Spectrum,Spectrum CSS就是您可以用来使您的网站看起来很像Adobe项目的东西。或者,您知道,您可以只是看看它们是如何做的,很有趣。
Box-shadows.css
好吧……您到底有多喜欢下拉阴影和框阴影属性?大概比制作Box-shadows.css的人少得多,Box-shadows.css是一个致力于一件事的整体图书馆:圆角。
我在开玩笑。我想您可以猜到这是做什么的。如果您在生活和用户界面中需要更多阴影,那就别无所求。
Flix Carousel
顾名思义, Flix Carousel是基于Netflix的预览轮播的轮播。我喜欢它,它是纯CSS,并且效果很好。唯一的麻烦是存储库页面上的预览无法正常工作。对于一个直观的例子,您必须前往作者的投资组合。
Woah.css
Woah.css被誉为偏心的Web开发人员的CSS动画库,并且可以兑现这一承诺。动画元素使我想起了90年代电视上的许多旧视频过渡,以及每个“消费级”视频编辑器中的视频过渡。很俗气,玩起来很有趣。
Animation Library
它被称为“ 动画库 ”,其动画名称与之差不多。这不是一件坏事,因为公司网站可能不需要或不希望90年代的动画按钮有视频过渡。它是纯CSS,因此只需添加所需的类,然后从那里开始。
Wipe.css
Wipe.css基本上是一个全新的CSS重置,基于sanitize.css和normalize.css之类的库。它不会重新发明轮子,也不应该重新发明轮子。它具有明智的默认设置,这对我来说很有意义,我很可能会在不久的将来自己使用它。
Denali CSS Library
Denali CSS库是另一个基于设计系统的库,特别是(您猜对了) Denali设计系统。它具有时尚,现代和高度无衬线的外观,非常适合商业场所。它还有一些相当详细的文档来帮助您入门。
nova-skeletons
新星骨架很有趣,因为它绝对不应该用于生产。如屏幕截图所示,它基本上用于为原型中的虚拟内容创建灰色块。现在虚拟内容从来都不是完全理想的,但是对于非常早期的原型,这实际上可能比Lorem Ipsum更好。
vov.css
vov.css是一组可爱的纯CSS动画,基本上涵盖了您可能需要的每个(基本)动画。只需添加一个课程然后继续。我喜欢的一件事是它们包括一组额外的类,以增加动画的延迟。
relaxCSS
RelaxCSS是一个完整的(但很小的)框架,可为您在基本网页或应用中可能需要的大多数内容设置样式,并带有用于导航,标签和类似内容的额外组件。它还具有深色主题。我最喜欢的是没有布局框架,因此您可以将这些样式添加到具有Grid或Flexbox布局的网站中,然后继续工作。