¿Cuáles son algunos de los mejores marcos de diseño web receptivos?

En estos días, los desarrolladores deberían sentirse desafiados a crear solo aplicaciones y sitios web que funcionen en todos los navegadores, y usar el marco adecuado para permitirles hacerlo. Si bien los marcos son una opción personal y práctica, hemos reducido la amplia gama de marcos receptivos de código abierto a los 10 que más nos gustan. Eche un vistazo y pruebe uno de ellos para su próximo proyecto.

10. Montaje

Montage es un marco de desarrollo web receptivo para crear aplicaciones web escalables que no escatiman en velocidad. Diseñe sus aplicaciones web utilizando módulos que brindan una elegante experiencia de usuario final.

Características notables:

  • Interminables bibliotecas y complementos en Montage Studio
  • Excepcionalmente fácil de aprender

9. CreateJS

Por lo que vale, CreateJS es un patrocinador de Adobe, Microsoft y AOL para este proyecto. El objetivo era crear un marco de herramientas y bibliotecas JavaScript de código abierto donde los desarrolladores pudieran construir proyectos interactivos de sueños HTML5.

Características notables:

  • 5 bibliotecas modulares de JavaScript
  • Toneladas de excelentes efectos de animación
  • Admite audio HTML5

8. Base

Base es un marco HTML5 orientado al desarrollo rápido que es ágil y ligero.

Características notables:

  • Sistema de cuadrícula sensible para diseños de cuadrícula fluidos, menos el código adicional
  • Los módulos de estilo nativo lo ayudan a centrarse en la función antes del diseño
  • El sitio base se completa con módulos de evaluación de habilidades para ayudarlo a aprender

7. Marco7

Cree su aplicación de manera que imite la apariencia de Android e iOS con Framework7. Desafortunadamente, eso significa que no es compatible con nada más que Apple iOS y el Material de Google. Framework7 defiende la autonomía sobre todo lo demás.

Características notables:

  • Funcionalidad de creación de alambre y prototipos
  • Capacidad para construir en HTML5 CSS3 y JavaScript

6. SproutCore

SproutCore es uno de los más antiguos de la lista, pero aún logra construir aplicaciones HTML5 más rápido que la mayoría de los otros marcos aquí. El patrón de arquitectura MVC ayuda a crear experiencias web nativas, sin importar dónde se encuentren sus habilidades de programación en este momento.

Características notables:

  • Soporte para AppCache y Cordova
  • Posibilidad de cambiar las funciones del código según los requisitos del proyecto

5. HTML Kickstart

Ya no es el nuevo chico, HTML Kickstart cubre HTML, CSS y JavaScript de una manera que ahorra mucho tiempo a los desarrolladores de todos los niveles de habilidad. Es preferible para construir tramas HTML5 nativas para diseños de páginas de demostración que tardan una fracción del tiempo en crearse.

Características notables:

  • Más elementos que la mayoría de los demás frameworks principales
  • Botones rápidos y barra de navegación
  • Iconos escalables de Font Awesome
  • Diseño de cuadrícula receptiva
  • Componente de presentación de diapositivas táctil

4. Sencha Touch

Sencha Touch es uno de los paquetes de framework multiplataforma más destacados y notablemente propietarios en el mercado en este momento.

Características notables:

  • Más de cincuenta componentes y plantillas de interfaz de usuario incorporados para todas las plataformas.
  • Encienda aplicaciones con contenido o características utilizando la fuente de una raíz de datos de fondo.
  • Las plantillas predeterminadas hacen que las aplicaciones web o móviles / web híbridas parezcan nativas para cada plataforma.
  • Herramientas de datos visuales incorporadas.

3. esqueleto

Tan rápido como las plantillas de CSS para HTML5, Skeleton hace honor a su nombre con una de las experiencias más básicas del mercado. Para aquellos que desean las herramientas que necesitan y nada más, esta es una gran opción, incluso para el programador aficionado.

Características notables:

  • Cuadrícula de diseño receptivo
  • Elementos de imagen receptivos que se escalan con la cuadrícula de diseño
  • Una plantilla PSD para la etapa de diseño.
  • HTML5 shiv para navegadores web obsoletos

2. Fundación

Foundation es un marco receptivo popular porque le permite crear sitios web receptivos desde dispositivos móviles a computadoras de escritorio o viceversa. El equipo detrás de Foundation ha invertido en hacer que este marco de diseño receptivo moderno sea confiable y robusto con el propósito de crear prototipos rápidamente. Las aplicaciones web receptivas personalizadas creadas con Foundation funcionan bien en dispositivos móviles de alta y baja potencia, por lo que puede estar seguro de que su aplicación funciona como se espera para los usuarios en cualquier dispositivo.

Características notables:

  • Creación rápida de prototipos
  • Sistema de cuadrícula sensible
  • Plantillas de correo electrónico
  • El V6 recientemente lanzado muestra algunas características que son verdaderamente únicas de este marco HTML5.

1. Bootstrap

Bootstrap fue popular desde el primer día, pero ahora es prácticamente un nombre familiar entre los desarrolladores web. Twitter desarrolló este marco moderno para ser como una navaja suiza de primera línea: repleto de todo lo que necesitará para desarrollar sitios y aplicaciones receptivos. Con su triple amenaza de usabilidad, flexibilidad y facilidad de uso, no es de extrañar que tantos desarrolladores y diseñadores llamen Bootstrap como su marco HTML5 predeterminado.

Características notables:

  • Más del 20% de los 100,000 sitios web en Internet se fundaron en Bootstrap.
  • Bootstrap nos brinda las herramientas modernas que necesitamos para crear páginas web ricas en funciones sin tener que hacer todo el trabajo pesado inicial.

Bootstrap V4 ya está en el mercado, ofreciendo desarrollo web de cuarta generación y la optimización más moderna.

Recursos extra

Debido a que un nuevo lote de marcos vuela al mercado cada año, es esencial mantenerse al día con ellos y una de nuestras formas más exitosas de hacerlo es participar en comunidades que se centran en la comunidad de desarrollo o los productos que amamos. Estas son algunas de nuestras sugerencias para las comunidades que nos han ayudado a superar nuestras construcciones más difíciles.

  • StackOverflow: todos los negocios y sin BS, los usuarios de StackOverflow obtendrán respuestas confiables para sus preguntas, pero lo más importante son las discusiones sobre noticias HTML5 y actualizaciones y mejoras tecnológicas. Cuando necesite la información directa sobre nuevos productos, este es el lugar.
  • Reddit: el tablero HTML5 de Reddit siempre está lleno de nuevos tutoriales, los últimos artículos nuevos y las opiniones más controvertidas. Obtenga respuestas a sus preguntas aquí, generalmente con información útil, pero no espere que toda la comunidad tenga la actitud sensata que tiene StackOverflow.
  • Marcadores HTML5 – HTML5 Bookmarks es un flujo de noticias de todo HTML5. Encontramos los archivos infinitamente útiles y bastante fáciles de navegar cuando necesita encontrar una información específica.
  • HTML5 semanal: un boletín semanal que se envía a más de 100,000 suscriptores.
  • DesignInstruct tiene una tabla que compara los marcos de diseño web receptivos más populares. Sin embargo, no han actualizado la lista desde 2013, por lo que no refleja todos los nombres en nuestra lista.

Marcos simples

A menudo se denominan simplemente “sistemas de red”, pero no obstante son marcos. Ofrecen hojas de estilo con sistemas de columnas para facilitar la distribución de diferentes elementos de acuerdo con el diseño establecido.

  • La cuadrícula 1140 CSS La cuadrícula 1140 encaja perfectamente en un monitor 1280. En monitores más pequeños se vuelve fluido y se adapta al ancho del navegador. Más allá de cierto punto, utiliza consultas de medios para ofrecer una versión móvil, que esencialmente apila todas las columnas una encima de la otra para que el flujo de información siga teniendo sentido. ¡Chatarra 1024! Diseñe una vez en 1140 para 1280, y con muy poco trabajo adicional, se adaptará para funcionar en casi cualquier monitor, incluso en dispositivos móviles. cssgrid.net
  • Sistema Golden Grid Una rejilla plegable para un diseño receptivo. goldengridsystem.com
  • Sistema de cuadrícula Mueller MUELLER es un sistema de cuadrícula modular para diseños receptivos / adaptativos y no receptivos, basado en Compass. Usted tiene control total sobre el ancho de columna, el ancho de canal, la cuadrícula de referencia y las consultas de medios. muellergridsystem.com
  • Sistema de cuadrícula receptiva, por Graham Miller Diseño receptivo espectacularmente fácil. Inspirado por el diseño web receptivo de Ethan Marcotte, este sitio fue creado con el espíritu de devolver algo. Encontré algo que funciona para mí y quiero compartirlo. responsivegridsystem.com
  • Titan Un marco CSS para diseños web receptivos. Titan Framework viene en dos versiones, con 12 y 16 columnas titanthemes.com
  • Less Framework 4 Less Framework es un sistema de cuadrícula CSS para diseñar sitios web adaptativos. Contiene 4 diseños y 3 conjuntos de preajustes de tipografía, todos basados ​​en una única cuadrícula. lessframework.com
  • Este sitio es Gridiculous Gridiculous fue creado después de que probé varias cuadrículas receptivas diferentes y me di cuenta de que ninguna de ellas ofrecía todas las funciones que necesitaba. gridiculo.us
  • Columnal El sistema de cuadrícula CSS Columnal es una “remezcla” de un par de otros con un código personalizado incluido. El sistema de cuadrícula elástica se toma prestado de Cssgrid.net, mientras que parte de la inspiración del código (y la idea de subcolumnas) se toma del sistema de cuadrícula 960 . columnnal.com
  • Toast Toast es un marco CSS tan simple como puede ser, pero no más simple. Una cuadrícula receptiva de doce columnas hace que los diseños sean muy sencillos, y con el tamaño de la caja puede agregar relleno y bordes a la cuadrícula, sin romper una sola cosa. daneden.me/toast
  • Ingrid Ingrid es un sistema de diseño CSS ligero y fluido, cuyo objetivo principal es reducir el uso de clases en unidades individuales. Hacer que se sienta un poco menos molesto y más divertido de refluir para diseños receptivos. piira.se/ingrid
  • Sistema 960 Grid El sistema 960 Grid es un esfuerzo para optimizar el flujo de trabajo de desarrollo web al proporcionar dimensiones de uso común, basadas en un ancho de 960 píxeles. Hay dos variantes: 12 y 16 columnas, que se pueden usar por separado o en conjunto. 960.gs
  • Marco receptivo súper simple base creado para funcionar en dispositivos móviles, tabletas, netbooks y computadoras de escritorio matthewhartman.github.com/base/
  • Susy Cuadrículas receptivas para Compass. Susy se basa en los sistemas CSS de Natalie Downe, hechos posibles por Sass, y fáciles con Compass. Puede usarlo en cualquier lugar, desde sitios estáticos a Django, Rails, WordPress y más. Incluso viene empaquetado como parte de Middleman, para hacerte la vida más fácil. susy.oddbird.net

Marcos completos

Por lo general, ofrecen marcos completos con características configurables como tipografía estilizada, conjuntos de formularios, botones, iconos y otros componentes reutilizables creados para proporcionar navegación, alertas, popovers y más, marcos de imágenes, plantillas HTML, configuraciones personalizadas, etc.

  • Bootstrap Marco front-end elegante, intuitivo y potente para un desarrollo web más rápido y fácil. Creado en Twitter por @mdo y @fat, Bootstrap utiliza MENOS CSS, se compila a través de Node y se administra a través de GitHub para ayudar a los nerds a hacer cosas increíbles en la web. twitter.github.com/bootstrap
  • Foundation 3 Un marco front-end avanzado y receptivo. Foundation 3 está construido con Sass, un potente preprocesador CSS, que nos permite desarrollar Foundation mucho más rápidamente, y le brinda nuevas herramientas para personalizar y construir rápidamente sobre Foundation. foundation.zurb.com
  • Esqueleto Una hermosa plantilla para el desarrollo receptivo y compatible con dispositivos móviles. Skeleton es una pequeña colección de archivos CSS que pueden ayudarlo a desarrollar rápidamente sitios que se ven hermosos en cualquier tamaño, ya sea una pantalla de computadora portátil de 17 “o un iPhone. Getskeleton.com
  • YAML 4 Un marco CSS modular para sitios web verdaderamente flexibles, accesibles y receptivos. YAML está probado y es compatible con los principales navegadores modernos como Chrome, Firefox, Opera, Safari e Internet Explorer. yaml.de
  • Tuktuk No intenta competir con Bootstrap o Foundation porque juegan en otra liga. Solo preocúpese por crear sitios receptivos y totalmente extensibles fácilmente. tuktuk.tapquo.com
  • Gumby Gumby Framework es un marco CSS de cuadrícula 960 receptivo que incluye múltiples tipos de cuadrículas con diferentes variaciones de columna que le permiten ser flexible durante todo el ciclo de vida de un proyecto. gumbyframework.com
  • Kube CSS-framework para desarrolladores profesionales. Mínimo y suficiente. Adaptativo y receptivo. Revolución grilla y bella tipografía. No hay estilos impuestos y libertad. imperavi.com/kube
  • Groundwork GroundworkCSS ha sido construido desde cero con el increíblemente poderoso preprocesador CSS, Sass. groundwork.sidereel.com
  • ResponsiveAeon ResponsiveAeon es un marco de sistema de cuadrícula css3 elegante y minimalista, ahora con una cuadrícula receptiva basada en porcentaje con consultas de media, punto de partida html5 y javascript.

Los marcos de diseño receptivos se han vuelto esencialmente importantes para los sitios web . Hay una serie de los mejores marcos front-end disponibles para usar con el fin de crear sitios web excepcionales. Algunos de ellos los enumero a continuación:

1. Bootstrap

2. Fundación

3. Puro

4. esqueleto

5. Montaje

Puede visitar aquí para obtener más información: https://blog.templatetoaster.com

– Bootstrap, Fundación

  • Oreja.
  • Fundación 3.
  • Esqueleto.
  • YAML 4.
  • Tuktuk
  • Gumby
  • Kube