当我们开发构建复杂的网站时,使用CSS进行样式化对于开发者来说会变得枯燥,我们需要代码更少、功能更多的样式。
这就是CSS框架被构建和使用的原因。以下是八个最佳框架:
材料界面
网址:https://mui.com/
据说Material UI (MUI)提供了一套全面的UI工具,可以帮助你更快的发布新功能。例如,许多大型组织使用Material UISpotify、Unity、NASA 空、网飞等。
安装MUI
npminstall@mui/material@emotion/react@emotion/styled
基金会
URL:https://get . foundation/
世界上最先进的响应前端框架。Foundation是一系列响应式前端框架,可以轻松设计出漂亮的响应式网站、应用程序和电子邮件,在任何设备上看起来都很棒。(来自他们官网)。使用Foundation的大型机构有迪士尼、三星、Adobe、国家地理等。
固定
npminstallfoundation-sites//or//yarnaddfoundation-sites
布尔玛
URL:https://bulma . io/
布尔玛是一个免费的开源框架,它提供了现成的前端组件,您可以轻松地组合这些组件来构建一个响应迅速的Web界面。使用bulma不需要CSS知识。
固定
npminstallbulma
顺风CSS
URL:https://tailwindcss . com/
Tailwind CSS不用离开HTML就能快速搭建现代化网站。这很有趣,因为您只需要在div标签的类中编写样式。
固定
npminstall-Dtailwindcssnpxtailwindcssinit
引导程序
网址:https://get bootstrap . com/
Bootstrap是一个强大的、可扩展的、丰富的前端工具包。通过Bootstrap,您可以使用Sass进行构建和定制,利用预构建的网格系统和组件,并使用强大的Javascript插件来实现项目。
固定
npmibootstrap@5.2.3
脉轮UI
网址:https://chakra-ui.com/
Chakra UI是一个简单、模块化和可访问的组件库,它提供了构建React应用程序所需的构建块。有了Chakra UI,您可以花更少的时间编写UI代码,花更多的时间为客户创造更好的体验。
固定
npmi@chakra-ui/react@emotion/react@emotion/styledframer-motionoryarnadd@chakra-ui/react@emotion/react@emotion/styledframer-motionorpnpmadd@chakra-ui/react@emotion/react@emotion/styledframer-motion
无头用户界面
URL:https://headlessui . com/
Headless UI拥有完全无风格和完全可访问的UI组件,旨在与Tailwind CSS完美集成。这也是由顺风实验室创造的。
固定
npminstall@headlessui/react
语义UI
网址:https://semantic-ui.com/
Semantic是一个开发框架,可以帮助用人性化的HTML创建漂亮的响应式布局。
固定
npminstallsemantic-ui–savecdsemantic/gulpbuild
有许多CSS框架也可以用来建立超级网站,但选择最佳网站的诀窍是没有诀窍的。深入研究后选择自己认为适合自己的就行了。