Pure.css es solo otro marco de CSS, lo que lo separa es su pequeño tamaño. Son solo 3.7kb, por lo que es un buen contendiente para competir contra Bootstrap .
Características:
- En primer lugar, es GRATIS .
- Tiene varios elementos comunes prediseñados importantes de la siguiente manera
- Base: elementos como <p> , <h1…h6> , topografía, etc.
- Cuadrículas: Cuadrículas receptivas.
- Formularios: columnas múltiples, formularios apilados, formularios alineados, entradas agrupadas, etc.
- Mesas: Mesas base con cenefas, decapado, etc.
- Botones : efectos de botón como enfoque, desplazamiento, activo, etc.
- Menús: menús desplegables, menús desplazables, menús verticales, menús receptivos, etc.
- Es ridículamente pequeño como se dijo anteriormente. ¡Módulos registrados a menos de 4kb!
- Perfecto para principiantes. fácil e intuitivo. Simplemente copie el enlace de la hoja de estilo de su sitio web purecss.io y agréguelo a su documento HTML.
- El pure.css está diseñado teniendo en cuenta el diseño receptivo. Por lo tanto, obtenemos estilos receptivos preconstruidos que se mantienen iguales en todas las plataformas.
- Sin dependencia de JavaScript y su biblioteca.
- También admite sombras y colores.
- Una gran alternativa a Bootstrap.
- En esencia, es solo una colección de diferentes módulos CSS que son receptivos, pequeños y fáciles de usar.
Implementación de Pure.CSS: Hay principalmente dos formas de usar este marco. Puede descargar desde purecss.io o puede usar CDN. Entendamos ambos usando la forma apilada.
Forma apilada : agregue la clase » pure-form-stacked » a cualquier elemento <form> para crear una forma apilada.
Nota: Cree un formulario predeterminado agregando » forma pura » a la clase <form>, luego puede crear cualquier tipo particular de formulario como apilado, alineado, etc.
Adición manual del enlace: ahora que ha descargado el archivo zip pure.css en su máquina. Extráigalo y colóquelo en el directorio de su sitio web. Puede adjuntarlo a su documento HTML principal usando la etiqueta <link> .
Sintaxis:
<link rel = "stylesheet" href: "downloaded_pure_css_file"/>
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<!-- Linking the Pure.CSS file that
we've downloaded-->
<link rel="stylesheet" href="pure-min.css" />
<style>
form {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<form class="pure-form pure-form-stacked">
<!-- To create an stacked form, add
the pure-form-stacked classname
to a form element alongside
pure-form -->
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email"
placeholder="Email" />
<span class="pure-form-message">
This is a required field.
</span>
<label for="stacked-password">Password</label>
<input type="password" id="stacked-password"
placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember" class="pure-checkbox">
<input type="checkbox" id="stacked-remember" />
Remember me
</label>
<button type="submit" class=
"pure-button pure-button-primary">
Sign in
</button>
</fieldset>
</form>
</body>
</html>
Producción:
Formulario apilado usando Pure.CSS (vinculando el archivo css descargado)
Si eliminamos el archivo pure.css , es decir, si eliminamos la etiqueta <link>, obtenemos el siguiente resultado.
Sin Pure.CSS
Uso de CDN (red de entrega de contenido): aunque ambos pasos hacen lo mismo, la mayoría de las personas prefieren CDN en lugar de vincular manualmente el archivo pure.css porque cuando usa CDN, siempre obtiene el archivo más reciente. Por lo tanto, no tiene que preocuparse por actualizar su archivo pure.css cada vez.
Sintaxis:
<link rel = “stylesheet” href: “https://unpkg.com/purecss@2.0.6/build/pure-min.css”/>
/* Copie la URL del sitio web pure.css para obtener la última versión */
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1" />
<!-- The only difference is that you have
to copy the link from pure.css website
instead of linking the downloaded
file -->
<link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.6/build/pure-min.css" />
<style>
form {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
</style>
</head>
<body>
<form class="pure-form pure-form-stacked">
<!-- To create an stacked form, add the
pure-form-stacked classname to a
<form> element alongside pure-form -->
<fieldset>
<legend>A Stacked Form</legend>
<label for="stacked-email">Email</label>
<input type="email" id="stacked-email"
placeholder="Email" />
<span class="pure-form-message">
This is a required field.
</span>
<label for="stacked-password">Password</label>
<input type="password" id="stacked-password"
placeholder="Password" />
<label for="stacked-state">State</label>
<select id="stacked-state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
<label for="stacked-remember" class="pure-checkbox">
<input type="checkbox" id="stacked-remember" />
Remember me
</label>
<button type="submit" class=
"pure-button pure-button-primary">
Sign in
</button>
</fieldset>
</form>
</body>
</html>
Producción:
Formulario apilado usando Pure.CSS (CDN: agregar la URL del archivo css puro)
Publicación traducida automáticamente
Artículo escrito por srijanarya04 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA