Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Se requieren márgenes para establecer la posición de cada etiqueta. Primer CSS tiene clases especiales definidas para aplicar márgenes adecuados. Cada clase tiene un nombre especial definido. Veamos todos los nombres y su significado:
m : Para proporcionar margen a una etiqueta, usamos la clase «m».
Clases de dirección:
t : Para establecer el margen superior usamos la clase «t».
r : Para establecer el margen derecho usamos la clase «r».
b : Para establecer el margen inferior usamos la clase «b».
l : Para establecer el margen izquierdo usamos la clase «l».
x : Para establecer propiedades horizontales, izquierda y derecha a través de esta clase.
y : Para establecer propiedades verticales, superiores e inferiores a través de esta clase.
Clases de tamaño:
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 0px | 4 píxeles | 8px | 16 píxeles | 24 píxeles | 32px | 40px | 48px | 64px | 80px | 96px | 112px | 128px |
Sintaxis:
<div class= "m *direction - *scaling">
. . .UI elements
</div>
Veamos la aplicación de estas clases en los siguientes ejemplos:
Ejemplo 1: Este ejemplo demuestra el margen de la convención de nomenclatura CSS del cebador.
- Margen superior: 24 px a través de la clase mt-4
- Margen izquierdo: 40 px a través de la clase ml-6
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Naming Convention Margin</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body class="mx-6"> <div class="color-bg-attention"> <h1 class="color-bg-subtle mt-4 ml-6 mb-4 color-fg-success"> GeeksforGeeks </h1> </div> </body> </html>
Salida : puede ver el margen aplicado a la cabeza en la imagen. GeeksforGeeks se desplaza «24-px» desde la parte superior y «40-px» hacia la izquierda, al igual que el texto que muestra el CSS en la página web.
Encabezado desplazado
Ejemplo 2: Este ejemplo demuestra el margen de la convención de nomenclatura CSS del cebador.
HTML
<!DOCTYPE html> <html> <head> <title>Naming convention margin</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Naming convention margin</u></h3> <br/> </div> <div class="d-flex flex-justify-center"> <div class="color-bg-subtle"> <div class="mt-6 color-bg-attention"> Margin top </div> </div> <div class="color-bg-subtle"> <div class="ml-6 color-bg-attention"> Margin left </div> </div> <div class="color-bg-subtle"> <div class="mr-6 color-bg-attention"> Margin right </div> </div> <div class="color-bg-subtle"> <div class="mb-6 color-bg-attention"> Margin bottom </div> </div> </div> </body> </html>
Salida :
Primer margen CSS
Referencia : https://primer.style/css/utilities/margin#naming-convention
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA