Pure CSS es un marco CSS gratuito y de código abierto. Es un conjunto de instrumentos para desarrollar sitios web receptivos y aplicaciones en línea. Esto fue creado por Yahoo y se utiliza para crear sitios web que son más rápidos, estéticamente más hermosos y más fáciles de usar. Reemplaza efectivamente a Bootstrap . El diseño receptivo se consideró al crear Pure CSS. Como consecuencia, obtenemos diseños receptivos consistentes y prediseñados para todas las plataformas.
Las cuadrículas CSS puras se utilizan para crear diseños y hacer diseños receptivos agregando la clase pure-g a un contenedor. No hay clases específicas para agregar que agreguen relleno o bordes a las unidades de cuadrícula, pero podemos usar CSS tradicional para que eso suceda. Hay dos formas de implementar esto, que se indican a continuación.
Clases básicas de Pure CSS Grid utilizadas:
- pure-g: esta clase se utiliza para crear un sistema de cuadrícula Pure CSS.
- pure-umn: Esta clase se utiliza para sumar las unidades del sistema grid.
Sintaxis:
<div class="pure-g">...</div>
Ejemplo 1: este ejemplo describe una forma de agregar relleno y borde que consiste en anidar un elemento <div> dentro de una unidad de cuadrícula y debe agregar estilo a ese contenedor secundario.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
<link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
<script src=
"https://purecss.io/js/ui.js">
</script>
<style>
.l-box {
padding: 8rem;
border: 1rem solid darkcyan;
background-color: beige;
font-size: 2rem;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
Pure CSS applying Padding and
Borders to Grid Units
</h2>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box">
1st Column
</div>
</div>
<div class="pure-u-1-2">
<div class="l-box">
2nd Column
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe otro enfoque para agregar relleno y borde a las unidades de la cuadrícula, es aplicar estilo a esas unidades de la cuadrícula de inmediato. Este enfoque podría distorsionar el diseño, solo necesitamos agregar la propiedad border-sizing: border-box a las unidades de cuadrícula.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/pure-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-min.css">
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css">
<link rel="stylesheet" href=
"https://purecss.io/layouts/side-menu/styles.css">
<script src=
"https://purecss.io/js/ui.js">
</script>
<style>
.pure-g > div {
box-sizing: border-box;
padding: 8rem;
border: 1rem solid darkgrey;
background-color: lightcyan;
font-size: 1rem;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>
Pure CSS applying Padding
and Borders to Grid Units
</h2>
</div>
<div class="pure-g">
<div class="pure-u-1-4">
1st Column
</div>
<div class="pure-u-1-4">
2nd Column
</div>
<div class="pure-u-1-4 o-box">
3rd Column
</div>
<div class="pure-u-1-4">
4th Column
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://purecss.io/grids/#applying-padding-and-borders-to-grid-units
Publicación traducida automáticamente
Artículo escrito por triashabiswas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA