Frameless

De Casiopea


Frameless.png



Caso de Estudio
NombreFrameless
AutorJoni Korpi
Palabras Claveframework, css
Estudiado enTaller de Construcción DG 4 - 2012
Estudiado porNicole Arce
URLhttp://framelessgrid.com/
DescripciónUna 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


Frameless .png
Frameless 8.png
Frameless 6.png
Frameless 4.png


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

Paso1.png

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

Paso2.png

Hacer que se repita infinitamente

dar un número infinito de columnas, no importa el ancho

Paso3.png

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.

Paso4.png

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

Html-frameless.png

Frameless en less

Less-frameless.png

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

frameless en css

bibliografías

http://responsivesummit.com/