¿Cómo utilizar de manera efectiva la cuadrícula sin marco?

Question

Estoy empezando a construir un sitio web bueno también para dispositivos móviles. Así que también estoy empezando a estudiar las consultas de medios y los diversos marcos de grillas. He echado un vistazo a todos los "principales jugadores como Inuit.css, la red semántica, etc .. y se encontró que probablemente el mejor para mí es el frameless grid

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

Ok. He estudiado mucho el código menos/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 averiguar cómo realmente puedo implementarlo.

• Antes que nada, ¿qué quiere decir exactamente con 'frameless'? ¿Simplemente que no es un marco? Y además de tener anchos de columna libres y consultas de medios "invertidos" para ser "móviles primero", ¿cómo difiere 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 debería uno poner este concepto en práctica?

:)

Answer 1

fin estoy usando la red sin marco, así que quiero responder a mis propias preguntas:

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

2. El @cols vars. Creo que, básicamente, son la red 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, se puede hacer solo con Less o Sass. Como no sabía menos y scss, no pude entender por completo la idea principal. Acabará diciendo que un elemento tiene 8 columnas de ancho, otras 5 columnas de ancho, etc. Es mucho más simple que calcular los píxeles.

3. Véase la respuesta 2: P

Esperamos que esto ayude a alguien más.

Answer 2

Si vienes a CSS desde el lado de la programación, te recomiendo 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 página (que probablemente no sea peor que procesar un marco de JavaScript) o configurar menos compilador para ejecutar en su servidor.

Hay una manera mejor. Simplemente instale winless si está en Windows o Less app 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 configura su proyecto así:

/estilos /CSS/ menos

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

Menos sólo tiene alrededor de una página de la documentación, para que pueda entrar en ella y ser competentes en alrededor de una hora más o menos. Es realmente divertido trabajar con él porque ya sabes la sintaxis si conoces 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 son realmente fáciles de entender.

Prefiero la configuración frameless un poco más que Less Framework, pero esa es una cuestión de elección.

Además, si necesita un poco más de lo que le proporcionan los documentos sin marco, asegúrese de revisar el css que se usa para el actual site.

¡Diviértete!

Answer 3

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

How to read this LESS css?

Answer 4

estado moliendo en el concepto framless por alrededor de un mes y dio en el momento de la bombilla hace una semana ... no estoy seguro de cuánto fue el concepto sin marco o cuánto estaba trabajando con menos. Pero sí sé que el concepto es bastante sólido hasta el momento.

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

pero empecé a cabo swaping canalones y ancho de las columnas con otros variabls y dividirlos para encontrar una buena relación de elementos brttween. Así que al final se convierte en una var maestro que puede cambiar todo el tema con un cambio de número. Las posibilitis son infinitas.

Answer 5

Por lo que vale la pena que he escrito un tutorial para el sistema de red sin marco aquí:

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

espero que sea útil!

Editar: Por debajo de la sugerencia de que mi respuesta debe sostenerse por sí mismo en lugar de simplemente contiene un enlace (! Suficiente), voy a añadir lo siguiente:

Sí, los @cols VARs son de hecho las teclas a la cuadrícula sin marco. Usted usa esto para dimensionar sus elementos como lo haría con cualquier otra unidad de medida.

Por ejemplo, supongamos que desea #firstDiv para ocupar 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 usted tiene que dar cuenta de la cuneta también.

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

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

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

Este código se amplía en su diseño por algo así como 6 por ciento, suponiendo que has estado expresando todas sus tamaños en la taquigrafía/@ em, p. ej. si expresa un ancho de relleno como 100/@ em en lugar de 100 píxeles, se ampliará con el resto de su diseño con la técnica anterior.

Del mismo modo este código sería enfocar su diseño a cabo un nivel:

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