Share
Si usa Sass, disfruta del uso de Bourbon y le gustaría usar un marco de red inteligente para diseños ligeros, Neat podría muy bien convertirse en su compañero de confianza en el futuro inmediato. En este breve artículo de introducción, le daré un par de razones razonables para darle una oportunidad a este marco de cuadrícula no respaldado..
Bourbon Neat fue concebido por Reda Lemeden y forma parte de la fantástica suite Bourbon. Es un marco de cuadrícula ligero y sensible, construido sobre Sass y Bourbon. El proyecto en sí es apoyado por thoughtbot y sus diseñadores se encargan de ello..
Antes de instalar algo, déjame darte un par de buenas razones para analizarlo. Hay innumerables marcos que prometen ofrecer un marco estable para desarrollar sus diseños. Y la mayoría de ellos ciertamente tienen éxito de una manera u otra. ¿Pero hasta qué punto? Pregúntese:
Si las respuestas a cualquiera de los problemas anteriores suenan timbres de alarma, solo quiero asegurarles que estos dolores de cabeza son fácilmente evitables en estos días. Es muy raro encontrar un proyecto que equilibre sus beneficios tan bien como Bourbon Neat (o simplemente "Neat" para abreviar). ¿Porque? Aquí hay un par de buenas razones:
Bourbon también tiene como objetivo proporcionarle opciones, no respuestas. Lo que me gusta especialmente es que no es una fábrica de estilos genéricos predefinidos. De esa manera, ayuda a las decisiones de diseño del diseñador sin interponerse en el camino..
Este es un tema importante pero lo haré corto: feo clases presenciales y adicional envoltorio vacío divs que a menudo se encuentra en las bibliotecas de front-end son fantasmas del pasado (al menos, debería ser fantasmas). Neat juega un papel importante en superar estos hábiles hábitos semánticos. Le ayuda a escribir marcas limpias y discretas, y tener todos sus estilos de cuadrícula separados de manera limpia en sus hojas de estilo por medio de combinaciones.
¿Por qué lidiar con un marco de red en absoluto? Bueno, el diseño tiene que ver con las relaciones y las relaciones pueden ser difíciles. Las cuadrículas los hacen más fáciles al ayudarlos a unir estructuras de una manera más significativa y organizada. Simplifican, reducen y estabilizan la esencia, ayudan a recortar la grasa de los diseños. Neat logra esto con solo catorce mixins ...
Accentsconagua
reinicio-diseño-direccióndirección-contextocambio de contextopantalla de contextocontenedor exteriorcolumnas de expansiónpantalla de reiniciollenar los padresresetear todoomegamedios de comunicacióncambioalmohadillafila... una sola función para establecer puntos de interrupción ...
nuevo punto de ruptura… Y doce variables para ajustes:
dirección de diseño por defectoopacidad-cuadrícula visualtamaño de caja de bordevisual-grid-indexadvertencias de inhabilitaciónvisual-rejilla-colorcaracterística por defectorejillas-columnasanchura máximacuadrícula visualcolumnacanalBoom, eso es todo! Bastante bajo, pero te da muchos caballos de fuerza.!
Cambio y el necesidad de flexibilidad Son necesidades constantes a prueba de futuro. La incorporación de consultas de medios debe ser fluida y fácil de manejar, pero pueden convertirse rápidamente en un desastre si no se manejan con cuidado.
Bourbon Neat anima a un SECO enfoque para manejar sus puntos de interrupción con su función de "nuevo punto de interrupción". Guarde los puntos de interrupción en las variables y vuelva a utilizarlos donde lo necesite. Cambiar un montón de consultas de medios en un solo lugar es difícil de superar.
Para ser más concreto, déjame darte un ejemplo. Aquí hay un fragmento aleatorio de Sass que utiliza la función "new-breakpoint" para consultas de medios:
$ mobile: new-breakpoint (max-width 500px 4) .sidebar + span-columnas (3) + media ($ mobile) + span-column (1) .content + span-columns (9) + media ($ mobile) + columnas-span (3)
Por ahora, no se preocupe demasiado por las mezclas utilizadas en este ejemplo. En los próximos tutoriales profundizaré en el meollo de la cuestión. Lo que debería ser evidente en este ejemplo, sin embargo, es la facilidad de uso si decide cambiar sus consultas de medios. Mediante el uso de las variables Sass y esta función, tendrá un lugar consistente y autorizado para cambiar y ajustar su diseño de respuesta, sin tocar cada elemento individualmente..
Ahora que sabes en lo que te estás metiendo, instalamos esta belleza:
Nota: necesitará Sass instalado antes de comenzar.)
Eche un vistazo a mi tutorial sobre Borbón si necesita seguir este paso..
Esto se hace a través de RubyGems, así:
instalación de gemas ordenada
A través de la línea de comandos, cambie a un directorio Sass de su elección, luego ejecute:
instalación ordenada
Esto instalará todas las combinaciones, configuraciones y funciones necesarias en su directorio designado.
@import 'bourbon / bourbon' @import 'grid-settings' @import 'neat / neat'
Nota: El orden de importación es importante aquí. Como Neat se creó sobre Bourbon, primero debes importar Bourbon. Lo mismo ocurre con su configuración de cuadrícula.
Si quieres usar Neat with Rails necesitarás agregar:
joya ordenada
a tu Gemfile.
Entonces corre:
instalación de paquete
en tu terminal.
En "application.sass" deberá añadir:
@import 'bourbon' @import 'grid-settings' @import 'neat'
y eres bueno para ir Recuerde sin embargo, que @importar no está jugando bien con las directivas Sprockets y, por lo tanto, tendrá que eliminar sus referencias. En "application.sass", "require", "require_tree", y "require_self" deben irse.
Por último, pero no menos importante, la buena gente de thoughtbot nos ha proporcionado una interfaz de línea de comandos agradable. Viene con tres comandos autoexplicativos:
neat install neat update neat remove
Usar herramientas inteligentes como esta, es una alegría trabajar con grillas. Este marco hace un gran trabajo en la planificación de la felicidad del desarrollador (largo y corto plazo).
En el siguiente tutorial veremos más de cerca y de manera más técnica cómo usar Neat.
