Un marco CSS es una biblioteca que permite un diseño web más fácil y compatible con los estándares utilizando el lenguaje Cascading Style Sheets . La mayoría de estos marcos contienen al menos una cuadrícula . Los marcos más funcionales también vienen con más características y funciones adicionales basadas en JavaScript , pero en su mayoría están orientados al diseño y se centran en patrones de interfaz de usuario interactivos. Este detalle diferencia los marcos CSS de otros marcos JavaScript .
Dos ejemplos notables y ampliamente utilizados son Bootstrap y Foundation .
Los frameworks CSS ofrecen diferentes módulos y herramientas:
- restablecer hoja de estilo
- cuadrícula especialmente para diseño web receptivo
- tipografía web
- conjunto de iconos en sprites o fuentes de iconos
- estilo para información sobre herramientas , botones , elementos de formularios
- partes de interfaces gráficas de usuario como acordeón , pestañas , presentación de diapositivas o ventanas modales ( Lightbox )
- ecualizador para crear contenido de igual altura
- clases de ayuda de CSS de uso frecuente ( izquierda , ocultar )
Los frameworks más grandes usan un intérprete de CSS como Less o Sass .
Lista de marcos CSS notables
Nombre | Último lanzamiento (fecha) | Licencia | Red | Unidades | Características | No. de columnas |
---|---|---|---|---|---|---|
Atomizador / CSS atómico | Atomizer 3.7.0 (31 de marzo de 2020) [1] | Licencia BSD | Alguna | Alguna | Biblioteca dinámica de 'CSS atómico' | Alguna |
Plano | 1.0.1 (14 de mayo de 2011) [2] | Licencia MIT | Tipografía, formularios, impresión, complementos para botones, pestañas y sprites. | |||
Oreja | 4.5.3 (13 de octubre de 2020) [3] | Licencia MIT ( Licencia Apache anterior a 3.1.0) | fijo, fluido, sensible | px,% | Diseño, tipografía, formularios, botones, navegación, consultas de medios, archivos .sass, bibliotecas JavaScript, diseño RTL. | Cualquiera, por defecto 12 [4] |
Interfaz de usuario semántica | Versión 2.4.1 - 13 de octubre de 2018 | Licencia Mit | Totalmente receptivo | Alguna | Diseños, icono, botón | Cualquiera, predeterminado |
Fundación | 6.6.3 (8 de abril de 2020) [5] | Licencia MIT | líquido | px,% | Diseño receptivo, ordenamiento de fuentes, tipografía, formularios, botones, navegación, consultas de medios y bibliotecas de JavaScript. | Cualquiera, por defecto 12 [6] |
YAML | 4.1.2 (28 de julio de 2013) [7] | CC-BY 2.0 | fijo, elástico, fluido | px, em,% | Diseño, cuadrículas, columnas, formularios, botones, linealización progresiva para diseños receptivos, manejo de flotadores, navegación, tipografía, accesibilidad y complementos. (pestañas accesibles, soporte RTL y microformatos) | Alguna |
Cuadrículas YUI CSS | 3.18.1 (22 de octubre de 2014) [8] | BSD-3 | fijo y fluido | |||
CSS simple | 3.3.1 (30 de abril de 2019) [9] | MIT | fijo, fluido, sensible | px | Tipografía (cita en bloque, código, encabezados, enlaces, párrafo, texto pequeño), ayudantes (colores, pantalla, flotante, tamaño, espaciado, ayudantes de texto), elementos (botones, regla, ruleta, etiqueta, sugerencia), componentes (alerta, ruta de navegación , tarjeta, lista, menú, tabla, pestañas), diseño (cuadro, barra de navegación, contenido, jumbotron, pie de página), formulario (campos, entrada, interruptor, casilla de verificación, radio, seleccionar, área de texto), cuadrícula y experimentos (modal, barra de progreso y pasos). | Cualquiera, por defecto 12 |
Yogur | 1.1.4-solidcore (14 de marzo de 2021) [10] | MIT | flexbox, receptivo, fijo, fluido | Alguna | ( Documentación de Yogurt ) Accesibilidad, Animaciones, Fondos, Bordes, Fluidos, Efectos, Filtros, Patrones, Flexbox, Interactividad, Diseños, Patrones, Dimensionamiento, Espaciado, SVG, Tablas, Tema, Transformaciones, Transiciones, Tipografía, (sin javascript), ( manipulación de estilo de bajo nivel sin escribir CSS) | Alguna |
MDBootstrap | 3.4.0 (23 de marzo de 2021) [11] | MIT | fijo, elástico, fluido | px, em,% | Tarjetas, Carrusel, Botones, Elementos de entrada, Formularios, Progreso, Spinners, Alertas, Notas y tipografía, Grupo de botones, Colapso, Desplegables, Modal, Brindis, Información sobre herramientas, Popovers, Navbars, Encabezados, Scrollspy, Pie de página, Breadcrumbs, Paginación, Píldoras, Pestañas, Tablas, Efectos de desplazamiento, Máscaras, Sombras | Alguna |
Ver también
Referencias
- ^ "Lanzamientos · acss-io / atomizer · GitHub" . GitHub . Consultado el 23 de abril de 2020 .
- ^ "Lanzamientos · joshuaclayton / blueprint-css · GitHub" . GitHub . Consultado el 23 de abril de 2020 .
Este repositorio ha sido archivado por el propietario. Ahora es de solo lectura.
- ^ "Lanzamientos · twbs / bootstrap · GitHub" . GitHub . Consultado el 31 de octubre de 2020 .
- ^ Documentación de Bootstrap: personalización de la cuadrícula
- ^ "Lanzamientos · fundación / sitios de fundación · GitHub" . GitHub . Consultado el 24 de abril de 2020 .
- ^ Documentación de la fundación - The Grid
- ^ "Lanzamientos · yamlcss / yaml · GitHub" . GitHub . Consultado el 24 de abril de 2020 .
- ^ "Lanzamientos · yui / yui3 · GitHub" . GitHub . Consultado el 24 de abril de 2020 .
- ^ "Versión v3.3.1 · siimple / siimple · GitHub" . GitHub . Consultado el 24 de abril de 2020 .
- ^ "Lanzamiento v1.1.4-solidcore · base de yogur / yogurt-css · GitHub" . GitHub . Consultado el 14 de marzo de 2021 .
- ^ "Lanzamientos · mdbootstrap / mdb-ui-kit · GitHub" . GitHub . Consultado el 29 de marzo de 2021 .