media queries - trick - ¿Cómo usar efectivamente la cuadrícula sin marco?

media query tablet

Question

También estoy empezando a construir un sitio web bueno para dispositivos móviles. Así que también estoy empezando a estudiar las consultas de los medios y los diversos marcos de cuadrícula. He echado un vistazo a todos los "jugadores principales" como Inuit.css, la cuadrícula semántica, etc., y descubrí que probablemente el mejor para mí es la cuadrícula sin marco.

El autor dice que es ''el sucesor espiritual de Less Framework '':

De acuerdo. He estudiado mucho todo el código less / css y el código html de la página principal de framelessgrid.com (que debería implementar la cuadrícula sin marco) pero no puedo explicar cómo puedo implementarlo.

• En primer lugar, ¿qué quiere decir exactamente con "sin marco"? ¿Simplemente que no es un marco? Y, aparte de tener anchos de columna libres y consultas de medios "invertidas" para ser "móviles primero", ¿en qué se diferencia de menos marcos?

• ¿Cómo debo usar exactamente las variables .less (particularmente la serie @cols)?

• ¿Qué significa ''Adaptar columna por columna, no píxel por píxel''? ¿media? ¿Cómo se debe poner en práctica este concepto?

:)

Answer 1

Además de las respuestas de Stratboy anteriores, me gustaría compartir mi pregunta y otras respuestas sobre el menos CSS que Joni usó para Framelessgrid. Me costó entender menos CSS y la comunidad SO realmente me ayudó.

¿Cómo leer este MENOS css?

Answer 2

Finalmente estoy usando la cuadrícula sin marco, así que quiero responder mis propias preguntas:

1. No sé: significa PI, ese nombre, no sé. Sin embargo, no importa ... (También invité al autor de la cuadrícula sin marco a responder aquí, pero no lo hizo).

2. Los @cols vars. Creo que, básicamente, son la cuadrícula sin marco. Bueno, no lo son, ya que la cuadrícula sin marco es ''solo'' una idea. Pero en la práctica, bueno, es la principal diferencia de css contra el enfoque ''estándar''. Simplemente defina el ancho de los elementos en columnas en lugar de píxeles. Eso es todo. Esto, por supuesto, solo se puede hacer usando Less o Sass. Como no sabía menos y no sabía nada, no podía entender completamente la idea principal. Terminarás diciendo que un elemento tiene 8 columnas de ancho, otras 5 columnas de ancho, etc. Mucho más simple que calcular los píxeles.

3. Ver respuesta 2: P

Espero que esto ayude a alguien mas

Answer 3

He estado moliendo el concepto sin marco durante aproximadamente un mes y golpeé el momento de la bombilla hace una semana ... no estoy seguro de cuánto era el concepto sin marco o de cuánto funcionaba con menos. Pero sí sé que el concepto es bastante sólido hasta ahora.

Creo que no hay documentación porque lo que él construyó es un punto de partida para que el desarrollador se ramifique en su propio camino y encuentre la mejor manera de construir su documento menos y, finalmente, construir un marco propio.

Pero empecé a intercambiar los anchos de canal y canal con otros variables y a dividirlos para encontrar una buena proporción entre los elementos. Entonces, al final, se convierte en una var. Maestra que puede cambiar todo el tema con un cambio de número. Las posibilitis son infinitas.

Answer 4

Para lo que vale la pena, he escrito un tutorial para el sistema de cuadrícula sin marco aquí:

http://marknugent.tumblr.com/post/47212935858/a-guide-tutorial-to-the-frameless-grid-how-to

Espero que sea útil!

Edición: de acuerdo con la sugerencia a continuación de que mi respuesta debería sostenerse por sí sola en lugar de simplemente contener un enlace (¡es suficiente!), Agregaré lo siguiente:

Sí, los @cols vars son de hecho las claves de la cuadrícula sin marco. Usas esto para dimensionar tus elementos como usarías cualquier otra unidad de medida.

Por ejemplo, digamos que quiere que #firstDiv ocupe tres columnas con #secondDiv, 2 columnas de ancho, a su derecha:

#firstDiv {
width: @3cols;
float: left;
}
#secondDiv {
width: @2cols;
margin-left: @gutter/@em;
float: left;
}

Tenga en cuenta que también debe tener en cuenta la canaleta.

A medida que avanza por la hoja de estilo, comenzando con los estilos móviles, use las consultas @media , que se activarán donde desee, para agregar estilos a pantallas cada vez más grandes, anulando los valores declarados previamente cuando sea necesario. Con cada paso agregarás columnas a tu diseño.

También hay una técnica que puede utilizar en pasos intermedios para ampliar todo el diseño:

body {
font-size: (@font-size + 1)/16*1em;
}

Este código amplía su diseño en aproximadamente un 6 por ciento, asumiendo que ha expresado todos sus tamaños en la abreviatura / @ em, por ejemplo, si expresa un ancho de relleno de 100 / @ em en lugar de 100 píxeles, se ampliará junto con el resto de su diseño utilizando la técnica anterior.

Del mismo modo, este código podría alejar su diseño en un nivel:

body {
font-size: (@font-size - 1)/16*1em;
}

Answer 5

Si vienes a css desde un lado de programación, recomiendo mucho menos. Realmente pondrá css en tu mente de programación de una buena manera.

Uno de los problemas que tuve fue el concepto de procesar su css en cada carga de la página (que probablemente no sea peor que procesar un marco de JavaScript) o configurar el compilador menos para que se ejecute en su servidor.

Hay una mejor manera. Simplemente instale winless si está en la aplicación Windows o Less para OS X. Son simples observadores de archivos que compilarán su css terminado cada vez que realice un cambio en sus archivos .less. Si configuras tu proyecto así:

/ estilos / css / menos

Ambos pondrán sus archivos css compilados en el directorio css. Luego, puede vincular su html a los archivos css y no tener que preocuparse por compilar sobre la marcha. Ambos funcionan muy bien con su plataforma de control de fuente también.

Less solo tiene aproximadamente una página de documentación, por lo que puede ingresar y ser competente en aproximadamente una hora. Es realmente divertido trabajar con él porque prácticamente ya conoces la sintaxis si sabes css. Less es un superconjunto de css, por lo que todo lo que sabes sobre css sigue siendo válido. Las pocas adiciones de sintaxis menos son realmente fáciles de comprender.

Prefiero la configuración sin marco un poco más que el marco Less , pero eso es una cuestión de elección.

Además, si necesitas un poco más de lo que te dan los documentos sin marco, asegúrate de revisar el css que se usa para el sitio real .

¡Que te diviertas!