Reimpreso, indique la fuente: sitio web oficial de Grape City , Grape City proporciona a los desarrolladores herramientas de desarrollo profesional, soluciones y servicios para capacitar a los desarrolladores.
Fuente original: https://dzone.com/articles/how-to-speed-up-your-design-process-using-modern-c
El estilo de los sitios web ahora es muy diferente al de hace mucho tiempo. Si miro la interfaz de usuario de los sitios web originales de algunas empresas ahora, creo que la mayoría de los usuarios de Internet tendrán dificultades para reconocer. Entonces, gracias a la innovación de la tecnología de diseño web, ahora los sitios web no solo pueden mostrar información, sino que también pueden tener animaciones interesantes, diseños diversos y elementos interactivos. Entre ellos, la mayoría de estos son implementados por CSS.
Por lo tanto, la aparición de CSS ha inyectado vitalidad en la página web original. Es por eso que la experiencia del usuario del sitio web ha evolucionado aún más. Esta puede ser una de las razones por las que casi todos los sitios web usan CSS más o menos.
Este año, algunas tecnologías CSS están iniciando una nueva innovación tecnológica, como Flexbox. Aunque el 83% de las cargas de la página en Google Chrome usan Flexbox, otro nuevo competidor llamado Grid está ganando popularidad lentamente. Además, las tecnologías como el modo de escritura CSS, la animación móvil, los sitios web de una sola página, las fuentes flexibles y la captura de desplazamiento también pueden tener algún impacto.
Sin embargo, en este artículo, no discutiremos las similitudes y diferencias entre las diferentes tecnologías CSS, principalmente para presentar el marco CSS. Porque solo se han vuelto populares en los últimos años, pero cada vez más desarrolladores han comenzado a usarlos.
¿Qué es un marco CSS?
Definimos CSS como un lenguaje de diseño, que proporciona ayuda para el diseño de la interfaz de usuario de documentos HTML. Diseñar con CSS tiene muchas ventajas: se puede usar con cualquier tipo de XML, incluidos XUL y SVG. El marco CSS es como un paquete listo para usar que contiene archivos que pueden usarse como base de la estructura del sitio web.
Hay muchos beneficios al usar frameworks. Aquí hay algunos de ellos:
Ahorre tiempo : esta es una de las ventajas más destacadas. Con el marco CSS, los desarrolladores no tienen que comenzar desde cero al crear aplicaciones o sitios web. Pueden dedicar tiempo a estudiar y centrarse en otras tareas importantes, como el diseño de la interfaz de usuario, la terminalización móvil y la resolución de problemas específicos de compatibilidad del navegador.
Código reutilizable : si su proyecto es un proyecto grande con muchas páginas y se actualiza continuamente en el futuro, el uso del marco le será útil. Se puede decir que un marco con potentes funciones de reutilización puede acortar significativamente el ciclo de preparación de su proyecto.
Problema entre navegadores : durante mucho tiempo, lidiar con las diferencias de acceso entre navegadores ha sido el mayor dolor de cabeza para la mayoría de los desarrolladores front-end. Pero el marco CSS puede encontrar y resolver las diferencias entre navegadores por adelantado, para garantizar que pueda ejecutarse sin diferencias en ningún navegador.
La estructura estándar garantiza la coherencia : el marco front-end generalmente consta de archivos CSS, HTML y JavaScript, que ayudan a garantizar la coherencia de los elementos (como el diseño y los formularios) en todas las páginas.
Excelente marco CSS
Oreja
Bootstrap fue creado originalmente por Twitter Blueprint como una herramienta para uso interno del equipo. Pero después de su lanzamiento público, fue ampliamente utilizado por los desarrolladores y la tasa de uso continuó creciendo.
Bootstrap proporciona plantillas de diseño para elementos como ventanas de advertencia, botones, carruseles, menús desplegables y formularios. A través de la función de prioridad móvil Bootstrap, puede crear fácilmente un diseño receptivo, que puede lograr un diseño consistente para su aplicación en múltiples dispositivos.
Esqueleto
Skeleton es conocido por su "soporte simple para repetitivo". Debido a que el marco tiene solo alrededor de 400 líneas de código, es más adecuado para proyectos más pequeños o desarrolladores que tienen requisitos livianos.
Para aquellos que recién están comenzando a usar frameworks front-end, esta también es una buena opción. Pero debido a que Skeleton carece de plantillas de diseño CSS, preprocesadores y funciones más ricas, esto lo hace menos adecuado para equipos y proyectos más grandes.
Fundación ZURB
如果您正在寻找的是一个快速且响应迅速的前端框架，那么ZURB Foundation可能正是您要的。它允许您为所有设备创建生产环境的代码和原型。依靠ZURB Foundation支持具有“准系统结构”的框架结构，可以让用户快速地完成产品设计原型。同时它在GitHub上也有大量的支持，提交的数量超过了14000个，贡献者也在940个以上。目前华盛顿邮报和国家地理等网站均使用了ZURB Foundation框架。
UI Kit
UI Kit以具有高度可定制的轻量级元素而著称。基于使用它提供的模板，您将可以轻松创建各种Web界面。它的安装包里包含了CSS、HTML和JavaScript文件，以及用于Sublime Text和Atom编辑器的包。另外，它还提供30多个可混合搭配的模块化组件，以实现更多功能。这意味着您不必重复搜索标记和类名。
UI Kit与Bootstrap和Foundation等其他框架的不同之处在于它没有使用将页面分为12列的网格设置。它将它的布局分为三个组件，即Flex、Grid和With。不过由于相关的支持资源不多，所以这个框架更适合有相当经验的开发人员来使用。
Bulma
Bulma作为最常用的框架之一，已经得到了超过15万名开发人员的支持。它是基于Flexbox的免费开源框架之一。Bulma易于使用，即使是作为初学者，也是非常易于上手的，因为该框架仅保留了开发人员开发响应式网站的最低要求。同时，在支持方面，Bulma在GitHub上拥有一个庞大的用户社区，可提供支持。
Materialize
这个前端CSS框架是根据Google的设计规范而创建的。它带有易于使用的IZ列网格，在布局方面具备良好的基础。它的包里还包括了按钮，卡片，表格，图标以及许多其他随时可用的常用组件。
您还可以使用如：拖出式移动菜单，涟漪动画效果，SASS mixins等功能。另外，Materialize也是可以在任何类型的设备上使用。
Semantic UI
尽管Semantic UI是作为较新的框架之一，但它在几个方面的努力还是值得肯定的。首先，它在代码中使用了自然语言，这可能受到初学者开发人员的青睐。而且它的继承系统中有一个高级主题变量，所以这使你在设计时拥有较高的自由度。
使用Semantic UI时，您不必使用其他库，因为它附带了大量的第三方库。这使您的Web开发过程更加方便。凭借它出色的功能，可能很轻松俘获新老开发人员。
Tailwind CSS
Tailwind CSS与其他CSS框架不同，因为它的包中没有预置任何的UI组件。该框架更多注重的是实用性。它附带的CSS类可以在您构建网站时需要设置颜色、大小、位置等内容时为您提供极大的帮助。Tailwind是为那些希望在网页设计方面拥有完全自由度的开发人员而设计的。
Picnic CSS
该框架非常轻量，压缩后代码尺寸不到10KB。Picnic CSS还提供了基于Flexbox的网格布局和许多UI元素，还包括了适合初学者使用的模态窗口和导航栏，您可以使用它们来启动您的Web开发项目。
Ionic
这个开源的移动UI框架可用于为原生Android和iOS开发出高网络性能的应用程序。它带有直观的UI组件，有助于加快网站或应用程序的开发过程。
Ionic提供卓越的原生功能和速度，并能很好地与社区、主要分析、身份验证、插件和其他功能集成一起工作。
Pure.css
Pure.css专注于移动优先的理念。由于Pure.css是模块化的，您可以很轻松地导入您要使用的包。您还可以访问大量可供下载和安装的布局。Pure.css 以其轻量著称。在压缩后，这个框架的尺寸只有3.8KB。
mini.css
mini.css也是一款能够提供完整功能且足够轻量的框架，它压缩后的大小约为10KB，虽然它是个很轻量的框架，但它仍然提供大量布局和UI的元素。如果您想了解它的工作原理是怎样的，您可以通过它的文档了解。
Base
如果您的主要工作是为所有的应用程序和Web开发项目打下坚实的基础，那么您可以尝试一下这个模块化框架。Base自称是 “坚如磐石”的响应性框架。Base基于Normalize.css，并提供基本的、可自定义的样式。如果你的需求只是一个简单的框架，那么它可以满足你。
Concise CSS
如果你需要的是一个简单并实用的框架，那么Concise CSS可能会是你的选择。它的框架是为那些想要“放弃臃肿”的开发人员准备的。顾名思义，它们为开发人员提供的是不包含其他额外附件的包，如果需要更多UI元素，您可以通过单独的工具包完成添加。
Mobi.css
压缩后的Mobi.css只有2.6KB，它是您能找到的最小的框架之一。它的执行速度是它的特点，特别是对于移动设备，所以如果你追求的是速度，那么试试这个框架吧。
不过，和其他模块化框架一样，如果您需要的不只是它们提供的基本样式和功能，您可以在其基础上以模块化方式进行构建。
总结
各类CSS框架除了为用户提供了项目正常运行所需的基础外，还确保了您的应用在各浏览器中访问的一致性和包含响应式的网站设计。这样您就可以集中精力更好地去专注于应用程序的内容和策略的制定。那么，希望您能从上面的列表中找到符合您需求的框架。