Share
Me gustaría hablarte de limonada. No la refrescante bebida cítrica, sino un sistema de rejilla que creé..
Lemonade es un sistema de cuadrícula que se construyó para darles a los diseñadores y desarrolladores la confianza de crear sitios web totalmente sensibles, eliminando la frustración de los desplazamientos entre los navegadores que buscan errores y fallas. Veamos cómo se integra y cómo puede construir su propio sistema de cuadrícula sensible.
Antes de crear el mío, solía usar Skeleton.css para mis diseños receptivos. Sin embargo, a medida que pasaba el tiempo, sentí que era una causa perdida, simplemente porque lo estaba adaptando constantemente a mis necesidades y eliminando los elementos innecesarios que sentía que no eran utilizables. Es un muy buen marco, pero solo lo recomendaría a las personas que no se sienten cómodas con el trabajo de front-end, en absoluto.
Hay tantas cuadrículas, marcos y bibliotecas por ahí, pero elegir la correcta es una decisión difícil. La forma más fácil de decidir es preguntarse a sí mismo "¿Qué estoy tratando de hacer?" Por ejemplo: actualmente estoy creando un CMS (en su mayoría PHP) y no quiero concentrarme en la interfaz (el panel de administración), así que opté por Bootstrap. Bootstrap es un marco increíblemente completo y, literalmente, cuida de usted durante cada aspecto del proceso de diseño.
Tenía muchas ganas de hacer algo que me diera un control total, en el que no tendría que dedicar la mayor parte de mi tiempo a personalizar la cuadrícula. Para empezar, pensé que hacer una cuadrícula sería un paseo por el parque, en realidad pensé que podría hacerlo en unas pocas horas. El 24 de junio de 2013, alrededor de las 12:30 am, abrí mi editor y comencé a escribir código, muchos. Pero sorpresa, sorpresa, fue extremadamente difícil ponerse en marcha; ¿Cómo creas algo que ha sido creado cientos de veces, pero mejor? Necesitaba pensar en el futuro, tenía que crearlo de la manera en que quisiera que funcionara, no de cómo pensaba que debería funcionar un sistema de cuadrícula, así que me puse tres objetivos (los escribí en notas adhesivas y los pegué en mi pared):
Déjame guiarte a través de estos objetivos de una manera más detallada. Quería que la cuadrícula fuera pequeña, tan pequeña que si alguna vez tuviera que editarla, no estaría maldiciendo la pantalla con frustración. Necesitaba trabajar en navegadores modernos (olvídate de IE8 y menores); Quería eliminar el escenario de hojear los navegadores preocupándome de que todo se vea bien. El objetivo final era todo acerca de su uso, no quería hacer algo y simplemente pegarlo en GitHub y nunca volver a usarlo. Si iba a crear algo, tendría que ser usado en cada proyecto que hice.
Primero vamos a abordar el CSS. Recuerda el primer objetivo: "Sé pequeño, pero poderoso".
*, *: después, *: antes margen: 0; relleno: 0; / * Elimina el comportamiento de relleno en anchos * / -webkit-box-sizing: border-box; -mano-caja de tamaño: cuadro de borde; tamaño de caja: caja de borde; / * Selector de atributo * / [class * = 'bit-'] float: left; relleno: 10px; / * Flota el último ".bit-" a la derecha * / [class * = 'bit -']: last-of-type padding-right: 10px; flotar derecho; / * Clearfix * / .frame: after content: ""; pantalla: tabla; Limpia los dos;
Esencialmente esta es la columna vertebral de la red; Esto es lo que hace que la red funcione y mantiene todo unido..
Establecer una caja de borde con un selector universal evita que nos preocupemos por el relleno de nuestros elementos que ensucian nuestros anchos.
Mientras estamos en el tema de los selectores, el mayor destructor del espacio en nuestra cuadrícula es el selector de atributos. Puedes ver el atributo selctor en acción donde lo he usado [class * = 'bit-']. Esto apunta a cualquier elemento cuyo atributo de clase contiene "poco-". También podríamos haber utilizado [clase ^ = 'bit-'] que se dirige a todos los elementos donde la clase comienza con "bit-". El uso de un selector de atributos para abarcar todas nuestras diversas clases de columnas nos ahorrará mucho tiempo al escribir nuevos anchos de columna.
Una cosa más a tener en cuenta es el uso de un selector de último tipo [class * = 'bit -']: último tipo. Cada fila de "bit-" s estará contenida dentro de un cuadro elemento:
Usando el selector de último tipo, podemos apuntar al último elemento "bit-" en el grupo, indicándole que flote a la derecha, en lugar de a la izquierda. Esto asegura que todo se alinee perfectamente con el borde derecho, en los navegadores compatibles.
Una pregunta común que escucho mucho acerca de Lemonade es: "¿Por qué nombres de clase tan raros?" No es una historia emocionante, solo seguí refiriéndome a las columnas como "bits" en mis notas, por lo que se intensificó. Dicho esto, creo que subconscientemente quería que las clases fueran diferentes al estándar "col-1" visto en muchos otros sistemas de grillas.
Generé los anchos de las columnas usando una calculadora (mira, no tienes que ser un nerd de matemáticas). Calcular las columnas no fue nada difícil, de hecho, fue muy fácil. Por ejemplo, en mi cuadrícula, cada bit es una fracción de todo el ancho, el bit 8 es un octavo. Por lo tanto, 100 ÷ 8 = 12.5, por lo que establecemos el ancho de cada bit-8 en 12.5%.
Probé a fondo cada sección de columna con contenido real y todas funcionan perfectamente en diferentes navegadores y dispositivos.
/ * Anchos principales * / .bit-1 ancho: 100%; .bit-2 ancho: 50%; .bit-3 ancho: 33.33%; .bit-4 ancho: 25%; .bit-5 ancho: 20%; .bit-6 ancho: 16.6666666667%; .bit-7 ancho: 14.2857142857%; .bit-8 ancho: 12.5%; .bit-9 ancho : 11.1111111111%; .bit-10 ancho: 10%; .bit-11 ancho: 9.09090909091%; .bit-12 ancho: 8.33%;
Ahora, como puede ver, los anchos son súper limpios, legibles y esto es lo que inicialmente quería: puede ver fácilmente qué es y, si es necesario, puede ensuciar y editar los tamaños con facilidad..
Editar Limonada es agradablemente simple. Los sistemas de cuadrícula a menudo son intimidantes de editar, por lo que me desafié a hacer el mío lo más simple posible. La única regla para personalizar Limonada es: Mientras sus columnas sean iguales al 100%, funcionará perfectamente.. Agregar sus propios bits es sencillo, ya que los selectores de atributos se encargan de la mayoría de la estructura de la cuadrícula:
.bit-25 ancho: 25%; .bit-75 ancho: 75%;
Estos dos en combinación estarían bien.
Hacer que respondiera fue bastante desafiante, lograr que fuera perfecto en cada dispositivo y determinar los puntos de interrupción, fue extremadamente frustrante. Déjame que te pase por el código. Elegí trabajar con el escritorio hacia abajo, en lugar del móvil primero, pero depende totalmente de usted el enfoque que prefiera..
Ya hemos establecido nuestros anchos base, por lo que ahora vamos a apuntar dispositivos entre 800px y 1100px:
/ * Tableta de base para estilos de escritorio pequeños * / @media (ancho mínimo: 800 px) y (ancho máximo: 1100 px) .bit-2, .bit-7 ancho: 100%; .bit-4, .bit-8, .bit-10, .bit-12 ancho: 50%;
Podríamos describirlo de forma general como orientación de la Tablet Horizontal al Escritorio (aunque tenga en cuenta que los anchos de los dispositivos de ninguna manera están definidos). Esto fue tan importante como las otras preguntas de los medios, ¿por qué? Debido a que la mayoría de las personas que poseen computadoras portátiles de 13 "rara vez tienen el ancho completo del navegador, tendrán un par de cientos de píxeles menos que el ancho completo, por lo que lo que se ve bien en una tableta horizontal, también debe verse bien en el escritorio.
/ * estilos de tableta base * / @media (ancho máximo: 800 px) .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 ancho: 50%; .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 ancho: 100%;
Me gusta pensar en este rango como la orientación de móvil a tableta (aunque, nuevamente, la definición de dispositivos por resolución de pantalla es un territorio rocoso). ¿Por qué los extraños puntos de quiebre? Nada demasiado loco, es lo que funcionó mejor: las cuadrículas son muy tediosas cuando se trata de lo estrictas que deben ser las anchuras, y encontré que estos puntos de ruptura funcionaron bien en la naturaleza..
La singularidad de los tamaños de las columnas fue bastante difícil de crear y esto fue realmente en lo que gasté la mayor parte de mi investigación; ¿Qué ves usualmente en el escritorio que cambia dramáticamente en el móvil? Principalmente contenido en línea que se convierte en contenido apilado, por lo que tuve que pensar qué es más probable que se coloquen lado a lado y qué se apilará uno encima del otro.
/ * estilos móviles básicos: todo 100% * / @media (ancho máximo: 480 px) .bit-1, .bit-2, .bit-3, .bit-4, .bit-5, .bit-6 , .bit-7, .bit-8, .bit-9, .bit-10, .bit-11, .bit-12 ancho: 100%;
Este punto de interrupción aborda lo que la mayoría de la gente reconocería como móvil. Intenté ser más creativo al configurar los anchos para dispositivos móviles, pero sentí que necesitaba mantenerlo en un nivel básico, ya que me imagino que la mayoría de las personas no están buscando algún tipo de diseño de metro o algo demasiado loco como ese..
El HTML es super simple y eso es lo mejor de esta cuadrícula. Para continuar con nuestro ejemplo, hagamos una columna de tres cuadrículas (podría ser una galería, por ejemplo).
Ahí lo tienes, una galería de tres columnas adaptable y compatible con el navegador. Por supuesto, puedes jugar con el HTML y hacer todo tipo de diseños..
Construir limonada fue una gran curva de aprendizaje para mí, me enseñó que si no me siento cómodo con algo, no tengo que quedarme y esperar alternativas, puedo crear mi propio!
Espero que este tutorial te haya dado una idea de cómo crear algunas cosas increíbles. Eche un vistazo a algunos sitios en la naturaleza, para ver cómo otros lo han usado:
Si tiene alguna pregunta o problema, deje un comentario a continuación o no dude en enviarme un tweet..
Accentsconagua
