Share
960gs fue genial! Cuando la mayoría de los visitantes de su sitio utilizaban escritorios con monitores de al menos 1024 píxeles, 960gs simplificó el diseño de un sitio en código. Sin embargo, con la llegada de la proliferación de dispositivos y la prevalencia de consultas de medios, los sitios de ancho fijo son decididamente menos efectivos que los diseños sensibles..
En este documento describiré cómo tomar su sitio de 960gs de ancho fijo y moverlo al marco de la Fundación ZURB. Sin desviarnos demasiado, quiero ser justo con 960gs y mencionar adapt.js, la respuesta de ese marco al diseño web sensible. Ahora, este artículo cubrirá los conceptos básicos de la cuadrícula de Foundation, cómo se compara con la cuadrícula de 960gs y algunas opciones adicionales con Foundation Sass. Para este tutorial, asumo que ya está familiarizado con 960gs y que considera a Foundation como una forma de lograr un diseño receptivo.
Para comenzar, deberá comprender los conceptos básicos de filas y columnas en Foundation. La convención de 960gs era usar un mega contenedor y confiar en cada combinación de DIV para hacer una fila. Al igual que:
Usted podría tener una arrojados entre los DIV de cuadrícula que suman 12, pero eso es opcional. Este diseño, en efecto, produciría dos filas con dos columnas que dividían igualmente el ancho disponible. Si añades alfa y omega clases, se tira respectivamente el extra margen izquierdo y margen derecho.
En las clases HTML predefinidas de Foundation, este mismo diseño se lograría mediante el siguiente fragmento de código:
No hay un mega contenedor para Foundation, en su lugar hay filas y las filas contienen columnas, y las columnas deben sumar 12. Cada columna se define agregando el columnas clase acompañada por al menos una clase para dictar el ancho de esa columna.
Para ir en una tangente corta, para lo que vale, la cuadrícula de Foundation es similar a las filas y tramos de Twitter Bootstrap, excepto que Foundation le da el poder de definir anchos de columna en múltiples puntos de interrupción.
Notarás la notación. medio-6. Eso significa que en el punto de interrupción medio (como se haya definido, el valor predeterminado es 641px), verá seis columnas de ancho, o la mitad del ancho disponible. Se puede agregar otra clase para indicar cuántas columnas vale la anchura de la div debe tomar en otros puntos de interrupción, incluyendo pequeña y grande. Así es como se vería:
Fundacion es primer móvil. Código para pantallas pequeñas primero, y los dispositivos más grandes heredarán esos estilos. Personalizar para pantallas más grandes según sea necesario. fuente
Por defecto, Foundation está diseñado en un primer concepto móvil. Lo que esto significa para las redes es que la pequeña La clase se puede usar sola para definir el ancho de una columna en el punto de interrupción pequeño y todos los puntos de corte anteriores se heredarán de eso siempre que medio o grande La clase no está presente. Por otro lado, si solo usa un medio clase, entonces el diseño de punto de interrupción pequeño predeterminado transformará los DIV en filas apiladas de una sola columna (equivalente a pequeño-12) que es el valor predeterminado aplicado a las columnas en el pequeño punto de interrupción.
Con todo esto en mente, lo básico para cambiar su marca es el siguiente: Primero, la div con el envase clase se puede eliminar. A continuación, alrededor de tu cuadrícula_# DIVs que forman "filas", necesitarás crear un div con la clase fila. Los DIV individuales que contienen cuadrícula las clases se pueden cambiar a medio-#.
Esto le dará algo que se parece mucho a su diseño anterior de 960gs para ventanas de visualización de más de 640 píxeles y por debajo de ese ancho, solo tendrá pilas de filas de ancho completo, lo que significa que cada columna div cambiará a 100% de ancho.
Aquí hay algunos otros conceptos de 960gs traducidos al lenguaje de la Fundación:
En 960gs, el anidamiento se podría lograr agregando alfa a la primera columna en tu fila y omega Hasta el último, eliminando efectivamente los márgenes horizontales. Al usar este enfoque, sus filas anidadas tenían que ser una suma del ancho de la columna en la que vivían las columnas anidadas.
En Foundation, el anidamiento está hecho para usted, solo tiene que insertar una fila dentro de una columna. No se requieren clases extra. La otra diferencia principal es que cada fila de nidos asume 12 columnas nuevas dentro del espacio de nidos disponible. Así que una fila dentro de un medio-6 te permitirá dividir esas seis columnas en 12.
Las clases de prefijo y sufijo de 960gs fueron excelentes clases de utilidad para crear espacio vacío en su diseño y proporcionaron un medio para centrar. Fundación tiene las mismas capacidades, con Offsets..
Esto es en realidad bastante similar en ambos marcos. El orden de origen le permite crear sus columnas en el orden que desee en su HTML real, pero hacer que aparezcan en un orden diferente de izquierda a derecha. Para esto, puedes usar empujar y Halar clases.
La fundación cubre todas las capacidades de 960gs y mucho más. Vea los documentos para aprender sobre todo lo que puede hacer..
Bueno, esta es la razón principal por la que te mueves en algo como Foundation: la capacidad de respuesta. Sabes sobre grande, medio y pequeña puntos de interrupción, pero también hay xlarge y xxlarge. Esto es lo que estas clases de punto de interrupción se relacionan con:
| Punto de quiebre | Ancho de la ventana gráfica |
|---|---|
| pequeña | < 40em (640px) |
| medio | 40.063em (641px) < 64em (1024px) |
| grande | 64.063em (1025px) < 90em (1440px) |
| xlarge | 90.063em (1441px)> 120em (1920px) |
| xxlarge | > 120.063em (1921px) |
Tenga en cuenta que sólo el pequeña, medio y grande Los puntos de interrupción se pueden utilizar en su HTML. Si necesitas usar xlarge o xxlarge, o si desea personalizar estos puntos de interrupción, puede utilizar el trabajo con Sass para adaptar Foundation a sus necesidades..
La fundación está construida para trabajar con Compass y Sass. Si Sass es algo con lo que se sienta cómodo, puede facilitar el desarrollo, lea más acerca de cómo comenzar a usar Sass y Foundation..
El profesional clave para usar Sass es que, en lugar de agregar clases específicas de Foundation a su HTML, puede ampliar los atributos de Foundation según el marcado existente. Por ejemplo, ese existente. div con la clase Noticias se puede hacer para imitar a rejilla-6 columnas div.
Aquí hay un ejemplo completo de cómo podría verse esto, digamos que tiene este HTML:
Para lograr una división 50/50 de .Noticias y .eventos, tu Sass se vería así:
.main @include grid-row; .news @include grid-column (6); .events @include grid-colmn (6);
Esto es el equivalente de cambiar el marcado a esto:
Si quisiera incluir otros puntos de interrupción en su SCSS, simplemente usaría esta técnica:
.main @include grid-row; .news @include grid-column (8); @media # $ large-up grid-column (6) .events @include grid-colmn (4); @media # $ large-up grid-column (6)
Que es lo mismo que:
La técnica SCSS es agradable porque mantiene tus clases ordenadas en tu HTML y te permite ser más semántico..
Hay una cosa más importante que entender acerca de este método. Si está compilando su CSS en una hoja de estilo adicional y por separado, pero desea hacer uso de la Fundación mixins, necesitarás importar lo que necesites, pero evitar la duplicación de estilos de la Fundación. Para evitar que se agreguen estilos redundantes a su CSS de salida, debe especificar el $ include-html-classes variable como falso, Esto es lo que parece:
@import "fundación / configuración"; $ include-html-classes: false; @import "fundación";
Tenga en cuenta que las rutas pueden diferir según su propia configuración. Esto le permitirá usar todas las combinaciones, funciones y configuraciones en Foundation, sin tener que duplicar todo el CSS. Esto es útil si ya está incluyendo Foundation CSS en la página en la que está trabajando. Este método podría, por ejemplo, usarse como un lugar para almacenar todas sus modificaciones para una página especial o un subconjunto de páginas.
Esto es solo la punta del iceberg: Foundation y Sass tienen mucho más que ofrecer y tienen muchos seguidores de desarrolladores que continúan haciéndolos más avanzados, y bueno, mejor.
Accentsconagua