Frameless
| Caso de Estudio | |
| Nombre | Frameless |
|---|---|
| Autor | Joni Korpi |
| Palabras Clave | framework, css |
| Estudiado en | Taller de Construcción DG 4 - 2012 |
| Estudiado por | Nicole Arce |
| URL | http://framelessgrid.com/ |
| Descripción | Una idea para un nuevo tipo de grilla para el diseño web adaptativo. Es una grilla de ancho fijo que se puede utilizar para adaptar el diseño de columna por columna, en lugar de pixel por pixel. |
Caso de estudio: Frameless
Son grillas adaptables que sirven para empezar a diseñar un sitio. Propone diseñar las columnas, adaptando columna por columna, no pixel por pixel
- Las grillas de frameless son de ancho fijo no fluidos
- Es una idea muy simple y flexible, es muy fácil de usar para empezar a diseñar
- Se recomienda siempre partir diseñando para móbiles, diseñando desde el mínimo soporte, es decir diseñar para móvil primero
En el sitio de frameless http://framelessgrid.com/ podemos ver el comportamiento de las columnas según el tamaño de la ventana. Este sitio, sólo se adapta alrededor de 320, 480, 600, 900 y 1900 pixeles. Para verlo en acción, intente cambiar el tamaño de la ventana del navegador.
Pasos para construir una grilla en Frameless
Hacer un ancho de columna fijo
Elegir el ancho de la columna, sin preocuparse de la cantidad todavía, se recomienda un ancho de columna relativamente pequeña para una mayor flexibilidad
Hacer que se repita infinitamente
dar un número infinito de columnas, no importa el ancho
Centrarlo
alinear a la cuarícula horizontalmente, para una grilla con un numero par de columnas, alinear el punto central de la ventana en medio de la cuneta entre sus dos columnas mas centrales. para una cuadricula con números impares, alinear en el centro de la columna mas central.
Utilizar y adaptar
Comience a utilizar la grilla. Utilice preguntas de los medios para adaptar su diseño a medida que más columnas disponibles. hacer la adaptación columna por columna en lugar de pixel por pixel, se puede elegir exactamente cuando su diseño se debe y no se debe adaptar.
Biblioteca de Frameless en Github
contenidos
- frameless.html es una plantilla HTML5 básica, que incluye clases condicionales, la cuña HTML5, y una etiqueta meta adecuada de la vista.
- frameless.js está en desarrollo.
- frameless.less contiene un pequeña restablecimiento CSS, algunas correcciones de consistencia, así como algunos adaptable super-variables básicos y las funciones para iniciar una grilla frameless.
- frameless.psd es una plantilla básica de Photoshop para una grilla frameless, con 48 columnas de píxeles y 24 píxeles cunetas.
- frameless.scss contiene el mismo que el del archivo LESS, pero en lugar SCSS.
frameles en html
Frameless en less
frameless en less, el ancho de las columnas es dado por pixeles, aquí se contienen las funciones básicas para la construcción de una grilla de ancho fijo
