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