Pure CSS es un marco CSS gratuito y de código abierto. Es un conjunto de recursos para crear sitios web dinámicos y aplicaciones en línea. Esto fue creado por Yahoo y se usa para crear sitios web que se cargan más rápido, tienen una mejor experiencia de usuario y se ven mejor. Efectivamente toma el lugar de Bootstrap. El diseño receptivo se consideró al crear Pure CSS. En consecuencia, obtenemos diseños adaptables consistentes y prefabricados para todas las plataformas.
Al agregar la clase pure-g a un contenedor, Pure CSS Grids se usa para generar diseños y construir diseños receptivos. Las clases específicas no pueden agregar relleno o bordes a las unidades de cuadrícula, pero podemos hacerlo usando CSS tradicional. Hay dos formas de completarlos.
Pure CSS Grids on Mobile significa que desarrollamos sistemas de grillas móviles primero. El sistema de cuadrícula móvil primero significa que solo necesitamos usar la clase pure-u-* para todas las unidades del sistema de cuadrícula. La estrella dada en la clase dada se reemplaza por los tamaños de pantalla predeterminados proporcionados por Pure CSS, que son sm , md , lg , xl y xxl . Primero especificamos el ancho de las unidades del sistema de cuadrícula en el móvil. El uso de una clase permitirá que las unidades de cuadrícula ocupen el mismo espacio para cada tamaño de pantalla. Por ejemplo, si usamos la clase pure-u-1-3 para todas las unidades, las celdas ocuparán ancho: 33.33%,no importa el tamaño de pantalla que sea. Si queremos que estas unidades de cuadrícula respondan y sean apropiadas para cada tamaño de pantalla, debemos agregar las clases de cuadrícula receptivas a las unidades.
Clases usadas de cuadrícula de CSS puro:
- 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. El ( m,n ) puede oscilar entre ( 1-5, 0-5 ) o ( 1-24, 0-24 ). Esta clase se usa principalmente para generar una cuadrícula regular de CSS puro o para expresar tamaños de cuadrícula fijos.
- pure-u-*-mn: Esta clase también se utiliza para sumar las unidades del sistema grid. La característica principal del uso de esta clase es que la estrella que se da en la clase se reemplaza por los tamaños de pantalla predeterminados proporcionados por Pure CSS, que son sm, md, lg, xl y xxl . El espacio que ocuparán las cuadrículas en cada una de estas pantallas está especificado por estos tamaños de pantalla. El objetivo principal de esta clase es construir una cuadrícula de CSS puro receptivo.
Sintaxis:
<div class="pure-g">
<div class="pure-u-1-2"> ... </div>
<div class="pure-u-1-2"> ... </div>
</div>
Ejemplo 1: El siguiente código demuestra la creación de Pure CSS Grids en Mobile . Se desarrolla este sistema de cuadrícula que es adecuado para pantallas móviles primero, hemos utilizado la clase pura-u-1-2 que muestra que las unidades de cuadrícula toman ancho: 50% en todos los tamaños de pantalla.
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">
<script src=
"https://purecss.io/js/ui.js">
</script>
<style>
.l-box{
background-color: aquamarine;
border: 0.5rem salmon solid;
margin-bottom: 0.5rem;
}
.m-box{
background-color: beige;
border: 0.5rem brown solid;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Pure CSS Grids on Mobile</h2>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-2">
<div class="l-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="m-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-2">
<div class="m-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: el siguiente código demuestra la creación de cuadrículas CSS puras en dispositivos móviles. Se desarrolla este sistema de cuadrícula que es adecuado para pantallas móviles primero, hemos utilizado las clases pure-u-1-2 y pure-u-1-3 que muestran que las unidades de cuadrícula toman ancho: 50% y ancho: 33.33% en todos tamaños de pantalla respectivamente.
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">
<script src=
"https://purecss.io/js/ui.js">
</script>
<style>
.l-box{
background-color: aquamarine;
border: 0.5rem salmon solid;
margin-bottom: 0.5rem;
}
.m-box{
background-color: beige;
border: 0.5rem brown solid;
}
</style>
</head>
<body>
<div id="main">
<div class="header">
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Pure CSS Grids on Mobile</h2>
</div>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="l-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-2">
<div class="l-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1-3">
<div class="m-box">
1st Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-3">
<div class="m-box">
2nd Column for Pure CSS Grids on Mobile
</div>
</div>
<div class="pure-u-1-3">
<div class="m-box">
3rd Column for Pure CSS Grids on Mobile
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://purecss.io/grids/#grids-on-mobile
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA