Share
inuit.css es un framework OOCSS potente, escalable, basado en Sass, BEM,. Este artículo es una breve introducción a inuit.css; cómo está construido, quién debería usarlo y por qué.
Hola, soy Harry, el creador de un framework CSS recientemente reescrito llamado inuit.css. Esperamos que este artículo sirva como una introducción rápida a lo que es inuit.css, por qué es diferente y cómo puede comenzar a usarlo de inmediato ...
En primer lugar, sé lo que estás pensando; otro marco de CSS ?! Bueno, la respuesta corta es sí ... La respuesta larga es 'Sí, pero hay una razón para esto ...'
Los marcos de CSS son actualmente diez centavos con mucha gente que publica su versión del marco de CSS de forma bastante regular. El problema con la mayoría de estos marcos es que son muy opuestos; CSS es un lenguaje de estilo, por lo que cualquier marco de CSS se relaciona inherentemente con los cosméticos y con la apariencia. inuit.css, sin embargo, no lo hace.
Un marco de CSS que tome muchas decisiones de diseño es excelente si eres un desarrollador que necesita a alguien o algo más que se encargue del diseño por ti, pero ¿qué pasa si eres un diseñador que necesita una mano con CSS? Usar un marco significaría que tendría que soportar las decisiones y opiniones de diseño de otra persona o comenzar a eliminar lotes y lotes de código; ¡o ambos! Es probable que el diseño de otra persona sea totalmente inadecuado para su proyecto, por lo que es casi completamente inútil. Esto está lejos de ser ideal, lo que necesitamos es un marco CSS que no tenga estilo; Un marco que hace mucho trabajo pesado..
inuit.css es una pequeña y poderosa colección de objetos y abstracciones libres de diseño que construyen el esqueleto de cualquier sitio del que luego puedes colocar tu diseño sobre la parte superior. inuit.css funciona de una manera OOCSS, lo que significa que puede dividir todo en estructura y piel; inuit.css hace la estructura y puedes aplicar tus propios cosméticos en la parte superior!
inuit.css también tiene un archivo lleno de variables que configurarán la escala tipográfica de todo el proyecto; dependen totalmente de usted y se utilizarán para construir una gran cantidad de componentes en torno a los valores que elija..
inuit.css arregla un montón de estilo dolores de cabeza, pero te deja en total control del propio estilo ...
Por supuesto, el principal competidor para cualquier persona en el mercado marco de CSS es el Bootstrap de Twitter. Bootstrap es excelente Si necesitas algo para manejar el lado del diseño de las cosas; es rápido de configurar y puede colocar todo tipo de componentes prediseñados en un proyecto a voluntad. Perfecto para el desarrollador con problemas de diseño que necesita lanzar rápidamente un front-end, pero no es útil para un diseñador que tiene su propia idea de los cosméticos pero necesita ayuda con algunos de los trucos más complicados de CSS.
Si necesita un diseño, o una solución rápida para la venta, use Boostrap! Si necesita libertad creativa, pero un ayudante escalable, sin diseño, extensible y poderoso, tal vez podría considerar inuit.css ...
inuit.css es un marco pequeño creado para sitios web de todos los tamaños; desde simples paginadores de una página, hasta gigantes gigantes gestionados por contenido que necesitan crecer y crecer.
Inuit.css en realidad es ideal para sitios web masivos y grandes equipos, y se basa en algunos principios para ayudar a este estilo de desarrollo..
En primer lugar, inuit.css es un marco OOCSS. Soy un gran defensor de la forma de pensar OO; Escribo y hablo mucho sobre OOCSS. OOCSS es una manera fantástica de abordar construcciones más grandes; reutilizar el código base en la función, extraer patrones de diseño comunes / repetidos, SECAR el código, mantener el código eficiente y portátil. Todas estas ideas están integradas en inuit.css en su núcleo, el marco es básicamente una biblioteca de objetos útiles y abstracciones como la abstracción de navegación, el objeto de medios, el objeto de la isla y una mucho Más.
Es esta idea de separar la estructura y la piel lo que hace que inuit.css sea tan adecuado para proyectos en los que participa un diseñador o diseñadores. inuit.css proporciona patrones de diseño estructural sin diseño, el equipo de diseño pone su tratamiento por encima de todo.
Las ideas de DRYness, eficiencia y abstracción son las que prestan tan bien inuit.css a los sitios web a gran escala. CSS se mantiene delgado, las abstracciones resultan más útiles y las construcciones son más eficientes; Estas son cosas que realmente ayudan en proyectos más grandes..
inuit.css está construido de manera SMACSSesque. No es tan granular ni completo (ya que inuit.css está desprovisto de módulos, y SMACSS no lo hace). necesariamente tratar con abstracciones y OOCSS) pero comparte algunos principios comunes ...
La idea de escribir CSS en orden de especificidad es algo que inuit.css toma muy en serio; El código que se redefine o deshaga a sí mismo sobre un proyecto suele ser una mala noticia, por lo que la arquitectura de CSS de una manera que evite esto es primordial, especialmente en construcciones más grandes. La estructura de archivos de inuit.css significa que cada conjunto de reglas solo se suma a los anteriores, nunca los deshace..
En primer lugar, comenzamos con nuestro reinicio / reinicio básico; inuit.css restablece los márgenes y los rellenos, pero también define algunos valores predeterminados útiles para todos los navegadores. Este es el punto cero, tu punto de partida, el más básico absoluto..
A continuación, inuit.css importa elementos sin clasificar, estas son cosas como encabezados (h1-h6) que se ajustan al ritmo vertical que definió en su archivo de variables ... Esto le permite ponerse en marcha con elementos HTML simples y de vainilla, todos con un estilo según las variables elegidas.
Después de eso, agregamos objetos y abstracciones ... Estas son las cosas que extienden sus elementos HTML (usando clases) y hacen un montón de trabajo pesado. Estos objetos y abstracciones son todos elementos agnósticos, y por lo tanto pueden aplicarse a casi cualquier cosa. Esto los mantiene increíblemente portátiles, reutilizables y, lo más importante, útiles!
Una vez que haya comenzado a extender inuit.css para trabajar en su propio proyecto, las siguientes cosas que importará son sus componentes o módulos. Estas son cosas que están construidas a partir de objetos y abstracciones y sus extensiones relevantes (por ejemplo, convertir el objeto multimedia en una imagen de perfil de usuario y biografía).
Finalmente, inuit.css saca cualquier clase de ayudante y "triunfos de estilo". Estas son cosas como el ancho y las clases push / pull para su sistema de cuadrícula, el color y la cara de su marca como clases útiles e incluso un modo de depuración para el desarrollo..
BEM es una metodología de front-end inmensamente poderosa ideada por los desarrolladores de Yandex. BEM es, en pocas palabras, una forma de nombrar clases CSS para hacerlas más estrictas, más claras y más poderosas. inuit.css utiliza una metodología BEM con una convención de nomenclatura basada en el trabajo de Nicolas Gallagher.
BEM significa bloquear, elemento, modificador.
Un bloque es como un componente, un elemento es algo que se dirige hacia la construcción de un bloque como un todo, y un modificador es una variación de un bloque, por ejemplo:
.comentar / * Bloquear * / .comment__body / * Elemento * / .comment - guest / * Modificador * /
Aquí tenemos un .comentario bloque que puede contener un elemento llamado .comentar. También podemos ver que hay una variación de .comentario llamado .comentario - invitado. Solo a partir de las clases podemos limpiar lo que hace cada cosa y sus relaciones entre sí; .comentar debe vivir dentro .comentario, mientras que .comentario - invitado tiene ser una variación de .comentario.
los __, -- La notación nos dice mucho sobre un objeto. Esto es particularmente útil en equipos más grandes, ya que ayuda a comunicar cómo, dónde y cuándo se deben usar las clases..
Un bien analogía De cómo funciona BEM podría ser:
.person .person - woman .person__hand .person__hand - left .person__hand - right
Aquí podemos ver que el objeto básico que estamos describiendo es una persona, y que un tipo diferente de persona podría ser una mujer. También podemos ver que las personas tienen manos; estas son sub-partes de personas, y, a su vez, hay diferentes variaciones de éstas, como izquierda y derecha.
Sass se utiliza por varias razones, principalmente para que:
Mover inuit.css en un preprocesador no fue una decisión fácil, pero me alegro de haberlo hecho. La combinación de OOCSS con Sass ha demostrado ser invaluable, y el uso de variables para configurar su proyecto personalizado significa que no hay dos compilaciones inuit.css que tengan el mismo aspecto.
Configurar un proyecto en inuit.css no podría ser más sencillo. Asumiendo que su proyecto tiene una estructura muy básica, como esta:
+ css / + img / + index.html
Entonces su primer paso es obtener inuit.css en ese directorio CSS. Hay dos maneras de hacer esto:
Accentsconagua
discos compactos en el directorio del proyecto y clonar con Git: git clone https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd… /. Esto básicamente dice 'clonar el proyecto inuit.css en un directorio llamado css, entonces entra css / y elimine las versiones de Git de los archivos inuit.css, luego regrese al directorio del proyecto '.
Una vez que hayas hecho eso, tu proyecto debería verse un poco así:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
En primer lugar, puede eliminar completamente README.md. A continuación, renombrar tu-proyecto.scss a lo que desees, por ejemplo estilo.scss.
Nota: Si usa CodeKit, o alguna otra interfaz para compilar su Sass, salte al final del tutorial donde veremos cómo configurar un proyecto inuit.css de esa manera..
Ahora necesitas abrir watch.sh, Donde deberías encontrar algo como esto:
#! / bin / sh # Cambie todas las instancias de 'su-proyecto' a lo que haya nombrado como # hoja de estilo de su proyecto, 'cd' al directorio en el que reside este archivo y # simplemente ejecute 'sh watch.sh'. # Sin minificación #sass --watch your-project.scss: your-project.css --style expandido sass --watch your-project.scss: your-project.min.css --style comprimido exit 0
Aquí, necesitas cambiar cada instancia de tu-proyecto.scss al nombre que elegiste. Este pequeño archivo elimina el dolor de ver archivos Sass desde la línea de comandos.
Ahora, para comenzar a ver los archivos de su proyecto, solo necesita abrir una ventana de Terminal, discos compactos al directorio CSS del proyecto y simplemente ejecute sh watch.sh. Voila, su proyecto ahora está configurado en inuit.css.
Como se mencionó, inuit.css viene con un montón de variables que hacen un montón de cosas, si abres _vars.scss deberías verlos todos ...
$ debug-mode Es útil para proyectos en desarrollo; esto invocará el complemento de depuración que viene con inuit.css y marcará visualmente, en el navegador, cualquier código potencialmente inaccesible o problemático.
$ base-tamaño-fuente y $ base-línea-altura son bastante auto explicativas pero increíblemente importante. Solo con estas dos piezas de información, inuit.css puede comenzar a configurar todo su ritmo vertical (consulte la tamaño de fuente() mezclando en _mixins.scss para más información).
El resto de las variables son simplemente tamaños de fuente para sus encabezados. Estos, junto con su $ base-tamaño-fuente y $ base-línea-altura Las variables, son las que completan tu ritmo vertical. Intenta alterar estas variables y mira que pasa.!
El siguiente paso es uno que encuentro muy útil; abrir inuit.scss y encontrará una enorme tabla de contenidos y una larga lista de parciales importados. Es una buena práctica comentar todos los objetos y abstracciones de inmediato y descomentarlos a medida que los necesite. Esto significa que tiene que llamarlos intencionalmente cuando sean necesarios y que no está empaquetando una gran cantidad de CSS no utilizados.
Con sus archivos observados, sus variables configuradas y sus objetos no utilizados comentados, todo está configurado en inuit.css ...
Existe una buena posibilidad de que no trabaje directamente con la línea de comandos, en cuyo caso puede usar una de las muchas aplicaciones disponibles para compilar Sass. CodeKit es uno de esos ejemplos y (en términos de lo que lo necesitamos aquí) se comporta como cualquier otro compilador, en cualquier plataforma que esté ejecutando..
Entonces, para configurar un proyecto inuit.css, primero deberá obtener los archivos de origen del repositorio de GitHub:
Una vez que haya descomprimido los archivos, organícelos en un diseño de proyecto familiar, como este, por ejemplo:
Como puede ver, he tirado el contenido de la carpeta fuente inuit en un css carpeta. También me he deshecho de los archivos README.md y watch.sh.
A continuación, abra su compilador (CodeKit en este caso) e indíquele que vigile la carpeta de su proyecto. En la mayoría de los compiladores OS X, esto es solo un caso de arrastrar la carpeta de su proyecto a la ventana de la aplicación. Como puede ver a continuación, CodeKit ahora está viendo mi inuit.css-master y ha resaltado los archivos .scss que serán compilados directamente. Cualquier archivo con un guión bajo anterior no generará su propio archivo .css, aunque se puede importar a otros archivos.
No he cambiado el nombre de nada en este caso, pero verá que tu-proyecto.scss está configurado para compilar en su nombre .css. Todo lo que necesito hacer ahora es conectar ese archivo css a mi index.html:
Mi propio proyecto inuit. Tunngahugit (bienvenido, en inuit)
Cada vez que guardo mis archivos de proyecto en un editor de código, CodeKit compila el proyecto por mí y vuelve a cargar la ventana del navegador sobre la marcha.
Extender inuit.css es algo que podemos cubrir en la segunda parte de este tutorial, pero por ahora, todo lo que necesita saber es que es tan simple como tu-proyecto.scss Te dijo:
/ ** * Ella es toda tuya, capitán ... Comienza a importar tus cosas aquí. * /
