Red de conocimiento informático - Conocimiento de Internet de las cosas - Cómo escribir un marco CSS ligero

Cómo escribir un marco CSS ligero

En pocas palabras, llamé a mi marco Snacks, que significa "comida rápida" y expresa principalmente simplicidad. Aunque es un marco liviano, no quiero usarlo como truco. Después de todo, el peso ligero significa la ausencia y omisión de ciertas características. El significado de este marco tiene más que ver con la comunicación y el aprendizaje. Intento aprender de los mejores puntos de otros marcos, simplificar los nombres de las clases tanto como sea posible e intentar explorar algunos componentes más generales.

La mayoría de los frameworks ligeros son solo frameworks CSS, no componentes JS, y se utilizan principalmente para el diseño de páginas web. Planeo escribir el marco yo mismo, porque hay demasiadas cosas repetitivas en mi trabajo y el marco puede integrar muy bien estos componentes dispersos. Por otro lado, escribir un pequeño proyecto y aprender nuevos conocimientos también es divertido.

Escribir un marco es algo que quería hacer el año pasado, pero se retrasó mucho tiempo por razones de tiempo. Al comienzo de escribir el marco, tuve un malentendido. Planeo diseñar algunos estilos de vanguardia, como botones tridimensionales y paneles flotantes, como el estilo a continuación.

/shots/524593-Soft Interface-Black

Pero en el proceso de escribir el marco de forma intermitente, gradualmente encontré la dirección. El estilo en la imagen de arriba es solo una apariencia, y probablemente no le prestaría mucha atención cuando escribí el marco por primera vez. Por supuesto, un buen diseño de la interfaz de usuario también es parte del éxito del marco.

División de módulos

El primer paso al escribir un marco es determinar qué módulos debe contener el marco. Debido a que es un marco liviano, los módulos definitivamente no son tan completos como el marco pesado, con solo algunos componentes centrales. Al comparar algunos marcos livianos y resúmenes de trabajo, los módulos de uso común incluyen cuadrículas, medios, botones, diseños, tablas, paneles y herramientas auxiliares.

Entre estos componentes comunes, las cuadrículas, los formularios y los paneles también deben centrarse en los componentes multimedia, pero no hay mucho espacio para el juego libre. Utilizo el componente multimedia de Bootstrap directamente.

Estrategia de nomenclatura

La primera es la jerarquía y estructura de la denominación de clases. Los nombres de las clases siempre han sido un problema para mí. Cuando comencé a trabajar, siempre me rascaba la cabeza para encontrar un nombre de clase simple. Cuando escribí el marco, intenté evitar la superposición de nombres de clases con Bootstrap, pero no pude evitarlo por completo. En comparación con otros marcos, esta situación ocurrirá inevitablemente. Después de todo, los nombres de las clases tendrán cierta regularidad y jerarquía. En este punto prefiero el estilo de Bootstrap. Comparémoslo con la forma de Bootstrap.

Estructura del formulario de Bootstrap y nombre de clase

-Format-Horizontal

- div.form-group

-Label.Control- Tag

-Input.Form-Control

Estructura morfológica del snack y nombre de clasificación

-Formato-Horizontal

- div.form -group

-label.control-label

-input.form-control

La estructura general de este formulario no es mala, pero es necesario modificar algunos lugares . Algunos marcos no dan nombres de clase a elementos como la entrada, pero dan un nombre de clase al elemento padre. Personalmente soy escéptico ante este enfoque. No dar nombres de clases reducirá la flexibilidad de escribir y usar el marco.

La segunda estrategia consiste en modificar componentes como botones y paneles con múltiples contextos (color, tamaño, etc.). ). En este punto, hice algunas simplificaciones al escribir el marco y hay algunas sombras semánticas en el estilo.

& ltbutton class="btn primario " >Principal& lt/button & gt;& lttable class = " tabla con borde rayado " >...& lt/table & gt;& ltdiv class = " cuadros primarios " >...& lt/div & gt;

La estrategia de modificar clases es una cuestión de opinión. En cuanto a qué método es mejor, es necesario explorarlo durante el proceso de redacción del marco.

Sistema grid

Ejemplo de demostración: https://nzbin.github.io/snack/#grid

Cualquier framework debe construirse en el grid Solo en Sobre esta base, el diseño puede ser flexible.

Mencioné anteriormente que la esencia de Bootstrap es un sistema de cuadrícula. La compilación del sistema grid requiere el uso de la función de bucle del preprocesador; de lo contrario, no es necesario repetir el trabajo. Me encontré con algunos marcos livianos escritos en Less cuyos sistemas ráster no usan bucles. Este código fuente es un poco abrupto, probablemente porque el autor no está familiarizado con la función de bucle de Less. Por supuesto, Less tiene un bucle débil, que es un poco incómodo de usar. Con respecto al bucle del preprocesador, puede consultar el bucle en el preprocesador CSS que traduje antes y comparar en detalle las funciones de bucle de tres preprocesadores populares. En pocas palabras, Less no tiene bucles, pero se puede implementar de forma recursiva, mientras que Sass y Stylus tienen bucles verdaderos.

El sistema de cuadrícula que escribí también tiene por defecto 12 columnas, pero luego descubrí que la cuadrícula de 12 columnas carecía de los anchos de columna más utilizados (como 10%, 20%, 30%, etc.) Por ejemplo, el siguiente CodePen En el ejemplo que se muestra, no se pueden completar 12 columnas, por lo que agregué 10 columnas.

Ver vista previa de clics en la cuadrícula de refrigerios del lápiz.

El uso de cuadrículas es el mismo que en Bootstrap, excepto que se debe agregar una cuadrícula de 12 columnas, una cuadrícula de 10 columnas y una cuadrícula igualmente dividida. nivel de columnas.

<! -El valor predeterminado es una cuadrícula de 12 columnas, por lo que COLS-12-> & lt;div class="row "

& ltdiv class="col-5 " >& lt/div >< / p>

& ltdiv class="col-7 " >& lt/div & gt;& lt/div & gt;& lt! - Cuadrícula de 10 columnas ->& ltdiv class="row cols-10 " >>p>

& ltdiv class="col-3 " >& lt/div >

& ltdiv class ="col-7 " >& lt/div & gt; Se muestra la línea superior. Por un lado, este diseño está en línea con la intención original de la mayoría de los marcos livianos; por otro lado, planeo escribir otro marco para terminales móviles; Después de todo, los estilos de la web y los terminales móviles son muy diferentes y sería mejor separarlos según las necesidades comerciales. Sin embargo, recientemente cambié el archivo fuente y mantuve un método de extensión para la respuesta.

Formulario/Tabla

Ejemplo de demostración: https://nzbin.github.io/snack/#forms

En la estrategia de nomenclatura anterior, el formulario snack The Se ha mostrado la estructura básica y no hay mucha discusión sobre el estilo de la forma básica excepto la estructura. Primero hablemos del ajuste estructural de la casilla de verificación en el formulario. Primero echemos un vistazo a la estructura de casillas de verificación de Bootstrap.

<! - casilla de verificación -><div class = " casilla de verificación " >

<tag>

<input type = " casilla de verificación " valor = " " > casilla de verificación</label></div><! -checkbox-inline-><label class="checkbox-inline">

<input type="checkbox" id="inline checkbox 1" value="option 1">Cuadro de selección compleja</label>

No debe haber ninguna desviación entre las dos estructuras anteriores. Si hay una ligera desviación, el estilo quedará desordenado y la flexibilidad será pobre. En segundo lugar, me gustaría saber si es posible combinar estas dos estructuras para aumentar la flexibilidad. Después de pensar durante mucho tiempo, encontré una manera.

La estructura del dim sum es la siguiente:

& lt! - casilla de verificación -><div class = " casilla de verificación " >

<tag>

<input type = " casilla de verificación " valor = " " > casilla de verificación</label></div><! -checkbox-inline-><div class="checkbox inline" >>p>

<tag>

<input type = " checkbox " value = " " >checkbox</label></div>

También puedes añadir estilos directamente a la etiqueta. Además, no hay problema si la entrada se mueve fuera de la etiqueta, como se muestra a continuación:

& lt! - casilla de verificación ->& ltdiv class = " casilla de verificación " & gt

& ltinput type = " casilla de verificación " id = " casilla de verificación 1 " valor = " " & gt;

<label para ="casilla de verificación1" >casilla de verificación</label></div><! -checkbox-inline->& ltdiv class="checkbox inline" >>p>

& ltinput type = " checkbox " id = " checkbox en línea 1 " valor = " " >

p>

<label for="inlineCheckbox1">Casilla de verificación</label></div>

Un beneficio de esta estructura es que el estilo de entrada se puede personalizar, como se muestra en el archivo scss de CodePen a continuación. La configuración de radio es la misma que las casillas de verificación.

Ver vista previa de clic en forma de bocadillo de lápiz.

Clases auxiliares

Las clases auxiliares son una combinación de clases, como tamaño de fuente, valor de color, relleno, márgenes y flotación izquierda y derecha. Es especialmente común en algunos sistemas de gestión en segundo plano creados con Bootstrap, por lo que el diseño será más flexible. A continuación se muestra una clase auxiliar para un borde.

. borde-izquierda-derecha { borde-izquierda:1px sólido # eee; borde-derecha:1px sólido # eee;

}.border-top-bottom { borde-superior:1px sólido # eee; abajo:1px sólido # eee;

}.border-left { borde-izquierda:1px sólido # eee;

}.border-right { borde-derecho:1px sólido # eee ;

}.border-top { borde-top:1px sólido # eee;

}.border-bottom { borde-bottom:1px sólido # eee;

}

Para obtener más información sobre las clases auxiliares, lea este artículo "Cómo escribir una clase auxiliar genérica".

Componente Box

Ejemplo de demostración: https://nzbin.github.io/snack/#boxes

En todo mi marco, el componente Box es A módulo satisfactorio.

La razón principal para crear este componente es que el componente de lista y el componente de panel de Bootstrap se pueden integrar juntos. Por supuesto, este enfoque tiene ventajas y desventajas. El componente Box es particularmente destacado en el diseño del sistema de gestión backend. Sus nombres también son variados, como panel, widget, portlet, ibox, tarjeta, etc. Cada marco de sistema de gestión en segundo plano desarrollará este componente en profundidad, lo que demuestra su importancia en el diseño. También es muy importante darle a un componente un nombre de clase apropiado. Después de pensarlo durante mucho tiempo, finalmente usé el nombre de clase box. Por supuesto, trato de no usar box porque el nombre de la clase es relativamente amplio. El siguiente lápiz de código simula la lista y los componentes del panel de Bootstrap.

Haz clic para obtener una vista previa cuando veas la caja de bocadillos del bolígrafo.

Temas

Es divertido agregar un tema al marco. El tema predeterminado para los snacks es el blanco porque me gusta el negro. Finalmente, se agregó un tema de noche oscura. Para escribir un tema, sólo necesito cambiar el color del componente. La página del documento de presentación utiliza un tema de noche oscura. Haga clic en el botón rojo de arriba para cambiar de tema.