Aquí hay una colección y una breve revisión de los que he usado, y los pros / contras de cada uno. También tenga en cuenta: muchos de estos, como Bootstrap, son marcos CSS / JS (no solo CSS).
Fundación http://foundation.zurb.com – Más cerca de Bootstrap.
Foundation también tiene un sistema de red móvil primero y muchos componentes que faltan en Bootstrap. Eche un vistazo a las imágenes receptivas de la Fundación, el ecualizador, las tablas de precios, los interruptores y JoyRide para ver algunas características que no encontrará en Bootstrap. Es fácil personalizar los sitios basados en Foundation usando una hoja de estilo separada o SASS. Foundation utiliza el tamaño de em para la mayoría de los elementos (es decir, anchos de columna de cuadrícula, consultas de medios, tamaño de fuente, etc.) que proporciona una mayor flexibilidad sobre el tamaño de unidad basado en porcentaje de Bootstrap.
- ¿Hay alguna buena razón para usar Linux para el desarrollo web, en lugar de Windows?
- ¿Cuáles son las características del rango de problemas relacionados con la seguridad que el personal de control de calidad debe tener en cuenta al probar una aplicación web?
- ¿Cuál es la mejor estructura MVC con ReactJS (escalable, popular, gran comunidad, etc.)?
- ¿Debería centrar mis esfuerzos en aprender a desarrollar utilizando la plataforma Salesforce o favorecer tecnologías de código abierto más generales?
- ¿Qué tan importante es aprender Python? ¿Cuáles son algunas razones por las que debería aprender Python?
Esqueleto http://getskeleton.com: cuadrícula mínima solamente, sin estilos.
Considerado como una “plantilla repetitiva, simple y muerta”, Skeleton es exactamente eso. Skeleton es una gran opción para diseñadores y desarrolladores que simplemente quieren una grilla receptiva. No encontrarás todas las campanas y silbatos de Bootstrap, como controles deslizantes, alertas, paneles y barras de navegación. Skeleton es únicamente un marco CSS, por lo que no necesita preocuparse por ninguna hinchazón de JavaScript / jQuery. Lo que Skeleton ofrece es una cuadrícula potente y liviana que es perfecta para crear diseños receptivos. Skeleton también proporciona algunos estilos básicos para tipografía, botones y formas.
CSS puro http://purecss.io: cuadrícula mínima con algunos extras.
Creado por Yahoo, Pure es otro marco mínimo solo CSS que es una extensión de normalize.css. Es un sistema de cuadrícula de respuesta que también incluye estilos básicos para formularios, botones, tablas y menús. Al igual que Bootstap, la cuadrícula Pure tiene 4 puntos de interrupción para diferentes anchos de dispositivo: sm , md , lg y xl . Las naves puras con una cuadrícula basada tanto en la quinta como en la 24a. La cuadrícula basada en la quinta es muy útil para diseños con números impares de columnas, que es una característica de diseño que no encontrará en la cuadrícula Bootstrap.
UIkit http://getuikit.com: muchas opciones de diseño y elementos.
UIkit se describe a sí mismo como “Un marco front-end ligero y modular para desarrollar interfaces web rápidas y potentes”. Es un marco muy completo y complejo que tiene casi todo menos el fregadero de la cocina. Este es el marco de elección para los desarrolladores que desean un marco CSS / JS todo en uno que no lo deje buscando el componente que falta. La rejilla flexible de UIkit admite divisiones de 1, 2, 3, 4, 5, 6 y 10 unidades, ordenamiento de columnas y múltiples tamaños de canalones. Ninguno de los otros marcos ofrece este nivel de control. UIkit también es compatible con la caja flexible de CSS 3, que permite la compatibilidad con elementos como columnas de igual altura.
Interfaz de usuario semántica http://semantic-ui.com – Todo, y luego un poco más.
La interfaz de usuario semántica es otra biblioteca de componentes implementada utilizando un conjunto de especificaciones diseñadas en torno al lenguaje natural. Al igual que Bootstrap y UIkit, la interfaz de usuario semántica es un marco muy completo que es extenso con características y componentes. Similar a Foundation, la interfaz de usuario semántica utiliza la cuadrícula de em y el tamaño de los elementos. Semantic incluye más de 3000 variables de temática, por lo que es muy fácil y flexible para el tema. La biblioteca de componentes es extensa con elementos como botones, modales, etiquetas, cargadores, migas de pan, formularios, acordeones, tarjetas, menús, etc. La interfaz de usuario semántica está disponible a través de un solo paquete grande, que es algo a considerar si está buscando para un marco mínimo.
Materialise http://materializecss.com – ¿ La próxima gran cosa?
Muchos desarrolladores frontend están avanzando hacia la adopción de los Principios del diseño de materiales de Google. El equipo de Materialise ha adoptado estos principios en su marco front-end receptivo que se basa en el diseño de materiales. Materialise proporciona una cuadrícula receptiva con 3 puntos de interrupción y muchos componentes de la interfaz de usuario que permiten a los desarrolladores web diseñar rápidamente sitios basados en el lenguaje de diseño de materiales. Incluye funciones de animación, tarjetas, colecciones (listas), botones, estilos de formulario y 740 iconos de diseño de materiales cortesía de Google. También hay varios componentes de JavaScript que facilitan otras características como modales, animaciones de desplazamiento, pestañas y cuadros de diálogo. Materialise es un marco muy nuevo, que es algo a considerar si está buscando una base de código estable y madura.
Puedes jugar con cualquiera de estos marcos y encontrar ejemplos de código en Codeply.
