Primer CSS es un framework CSS gratuito y de código abierto. Se basa en los sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Creado con el sistema de diseño de GitHub, es altamente reutilizable y flexible.
Primer CSS Layout se utiliza para cambiar el diseño del documento con la ayuda de clases que proporcionan líneas, bloques, tablas, etc., que pueden personalizar el documento. Incluso podemos cambiar el diseño y la dirección del flotador.
Primer clases de diseño CSS:
- Visualización : se utiliza para cambiar la visualización del elemento.
- Visibilidad : se utiliza para cambiar la visibilidad de los elementos de diseño.
- Desbordamiento : las clases se pueden utilizar para controlar el desbordamiento de los elementos.
- Flotante : flotante establece la dirección del elemento que se deja por defecto.
- Alineación : ajusta la alineación de los elementos con las siguientes clases:
- Ancho y alto : podemos establecer el ancho y el alto usando las siguientes clases:
- Posición: Establece la posición de los elementos.
- Objeto de medios : crea un contenedor de objetos de medios para contener utilidades de diseño.
Sintaxis: asigne las clases de diseño a un contenedor de la siguiente manera:
<div class="d-inline border">
<div class="d-inline-block border">
Data Structures
</div>
<div class="d-inline-block border">
Algorithms
</div>
</div>
Ejemplo 1: En el siguiente ejemplo, tenemos diferentes elementos de diseño de pantalla.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>GeeksforGeeks | Primer CSS</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <div> <h1 style="color: green;"> GeeksforGeeks </h1> </div> <strong>Primer CSS Layout</strong> <br /> <br /> </center> <div> <div class="d-inline border border-dashed"> <div class="d-inline-block border border"> Data Structures </div> <div class="d-inline-block border"> Algorithms </div> </div> </div> <br /> <div> Programming Languages Table <div class="d-table"> <div class="d-table-cell border"> 1 </div> <div class="d-table-cell border"> Java </div> </div> <div class="d-table"> <div class="d-table-cell border"> 2 </div> <div class="d-table-cell border"> C++ </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, alternamos la visibilidad de un contenedor con las clases de visibilidad.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>GeeksforGeeks | Primer CSS</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong>Primer CSS Layout</strong>
<br />
<br />
</center>
<div id="gfg" class="v-visible">
<div class="p-4 color-shadow-medium border">
Welcome to GeeksforGeeks
</div>
</div>
<button onclick="toggleVisibility()"
class="btn btn-danger">
Toggle Visibility
</button>
</div>
<script>
function toggleVisibility() {
$('#gfg').toggleClass('v-visible')
$('#gfg').toggleClass('v-hidden')
}
</script>
</body>
</html>
Producción:
Referencia: https://primer.style/css/utilities/layout
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA