Pure.CSS - Guía rápida
Pure es una hoja de estilo en cascada (CSS) desarrollada por YAHOO. Ayuda a crear sitios web más rápidos, hermosos y receptivos.
Algunas de sus características destacadas son las siguientes:
- Diseño receptivo incorporado
- CSS estándar con una huella mínima
- Conjunto de módulos CSS pequeños y receptivos
- De uso gratuito
Diseño de respuesta
Pure tiene un diseño receptivo incorporado, de modo que el sitio web creado con Pure se rediseñará según el tamaño del dispositivo. Pure tiene una cuadrícula fluida móvil de 12 columnas que admite clases receptivas para tamaños de pantalla pequeños, grandes y medianos.
Las clases puras se crean de tal manera que el sitio web puede adaptarse a cualquier tamaño de pantalla. Los sitios web creados con Pure son totalmente compatibles con PC, tabletas y dispositivos móviles.
CSS estándar
Pure usa solo CSS estándar y es muy fácil de aprender. No hay dependencia de ninguna biblioteca JavaScript externa como jQuery.
Extensible
Pure es por diseño muy minimalista y plano. Está diseñado teniendo en cuenta el hecho de que es mucho más fácil agregar nuevas reglas CSS que sobrescribir las reglas CSS existentes. Al agregar algunas líneas de CSS, la apariencia de Pure se puede personalizar para que funcione con un proyecto web existente.
Admite sombras y colores llamativos. Los colores y sombras permanecen uniformes en varias plataformas y dispositivos. Y lo más importante de todo, es de uso absolutamente gratuito.
Hay dos formas de usar Pure:
Local Installation - Puede descargar el archivo pure.css en su máquina local e incluirlo en su código HTML.
CDN Based Version - Puede incluir el archivo pure.css en su código HTML directamente desde Content Delivery Network (CDN).
Instalación local
Ir https://purecss.io/start/ para descargar la última versión disponible.
Coloque el archivo pure-min.css descargado en un directorio de su sitio web, por ejemplo, / css.
Ejemplo
Puede incluir el css archivo en su archivo HTML de la siguiente manera:
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-3"><p>First Column</p></div>
<div class="pure-u-1-3"><p>Second Column</p></div>
<div class="pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>Producirá el siguiente resultado:
Versión basada en CDN
Puede incluir el archivo pure.css en su código HTML directamente desde Content Delivery Network (CDN). yui.yahooapis.com proporciona contenido para la última versión.
Estamos usando la versión CDN de la biblioteca yui.yahooapis.com a lo largo de este tutorial.
Ejemplo
Ahora reescribamos el ejemplo anterior usando pure.css de PureCSS.io CDN.
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3"><p>First Column</p></div>
<div class = "pure-u-1-3"><p>Second Column</p></div>
<div class = "pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>Producirá el siguiente resultado:
Pure.CSS tiene varias clases especiales para crear un diseño receptivo.
| No Señor. | Nombre y descripción de la clase |
|---|---|
| 1 | .pure-u-* Configura el contenedor para que ocupe el espacio requerido en cualquier dispositivo. |
| 2 | .pure-u-sm-* Configura el contenedor para que ocupe el espacio requerido en un dispositivo con un ancho ≥ 568px. |
| 3 | .pure-u-md-* Configura el contenedor para que ocupe el espacio requerido en un dispositivo con un ancho ≥ 768px. |
| 4 | .pure-u-lg-* Configura el contenedor para que ocupe el espacio requerido en un dispositivo con un ancho ≥ 1024px. |
| 5 | .pure-u-xl-* Configura el contenedor para que ocupe el espacio requerido en un dispositivo con un ancho ≥ 1280px. |
En el siguiente ejemplo, crearemos una cuadrícula receptiva con una fila que tiene cuatro columnas. Las columnas deben apilarse en pantallas pequeñas, deben ocupar un ancho: 50% en pantallas medianas y deben ocupar un ancho: 25% en pantallas grandes.
Esto se hace agregando .pure-u-1 clase para pantallas pequeñas, .pure-u-md-1-2 para pantallas de tamaño medio, y .pure-u-lg-1-4para pantallas grandes. Cambie el tamaño de la página para ver la respuesta de la cuadrícula al tamaño de la pantalla.
Ejemplo
purecss_responsive_design.htm
<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.graybox {
background: rgb(240, 240, 240);
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-1">
<div class = "graybox">
<p>These four columns should stack on small screens,
should take up width: 50% on medium-sized screens, and should
take up width: 25% on large screens.</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>First Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Second Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Third Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>Fourth Column</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1">
<div class = "graybox">
<p>This column is to occupy the complete space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-2-5">
<div class = "graybox">
<p>This column is to occupy the two-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-3-5">
<div class = "graybox">
<p>This column is to occupy the three-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 1: This column is to occupy the one-third of the
space of a row on all devices.</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 2: This column is to occupy the one-third of the space
of a row on all devices.</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 3: This column is to occupy the one-third of the space of a
row on all devices.</p>
</div>
</div>
</div>
</div>
</body>
</html>Resultado
Verifica el resultado.
Pure.CSS proporciona el concepto de Pure Grid con dos tipos de clases, pure-g, una clase de cuadrícula y clases de unidad, pure-u-*. Las siguientes son las reglas para usar Pure Grids.
Los anchos de las unidades están en fracciones. Por ejemplo, pure-u-1-2 representa 1/2 o 50% de ancho, pure-u-2-5 representa 2/5 o 40% de ancho y así sucesivamente.
Los hijos de Pure Grid (elemento con clase pure-g) deben usar pure-u o pure-u-* nombres de clases.
Todo el contenido debe ser parte de una unidad de cuadrícula para que se renderice correctamente.
Tamaños de unidad de cuadrícula
Pure Grid viene con tamaños de unidad 5º y 24º. Las siguientes ilustraciones muestran ejemplos de algunas de las unidades disponibles, que se pueden adjuntar apure-ui-. Por ejemplo, para crear una celda de 50% de ancho, puede usar un estilo CSSpure-ui-1-2.
5 ° Unidades basadas
purecss_5th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">2-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-2-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">3-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-3-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">4-5</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-4-5"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
</div>
</body>
</html>Resultado
Verifica el resultado.
24 º Unidades Basado
purecss_24th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.grid-unit {
margin: 0.25em 0;
padding-left: 4.5em;
}
.grid-unit .grid-unit-width {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
}
.grid-unit-bar {
height: 2em;
background: #eee;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-12</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-12"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">2-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-2-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">3-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-3-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-8</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-8"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">4-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-4-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-6</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-6"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">5-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-5-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-4</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-4"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">6-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-6-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">7-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-7-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1-3</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-1-3"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">22-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-22-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">23-24</div>
<div class = "grid-unit-details pure-u-1">
<div class = "pure-g">
<div class = "grid-unit-bar pure-u-23-24"></div>
</div>
</div>
</div>
<div class = "grid-unit pure-g">
<div class = "grid-unit-width pure-u">1</div>
<div class ="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">1-1</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-1-1"></div>
</div>
</div>
</div>
<div class="grid-unit pure-g">
<div class="grid-unit-width pure-u">24-24</div>
<div class="grid-unit-details pure-u-1">
<div class="pure-g">
<div class="grid-unit-bar pure-u-24-24"></div>
</div>
</div>
</div>
</div>
</body>
</html>Resultado
Verifica el resultado.
Pure.CSS tiene un CSS muy hermoso y receptivo para diseños de formularios. Se utilizan los siguientes CSS:
| No Señor. | Nombre y descripción de la clase |
|---|---|
| 1 | pure-form Representa un formulario en línea compacto. |
| 2 | pure-form-stacked Representa un formulario apilado con elementos de entrada debajo de las etiquetas. Para usar con forma pura. |
| 3 | pure-form-aligned Representa un formulario alineado con elementos de entrada debajo de las etiquetas. Para usar con forma pura. |
| 4 | pure-input-rounded Muestra un control de formulario con esquinas redondeadas |
| 5 | pure-button Embellece un botón. |
| 6 | pure-checkbox Embellece una casilla de verificación. |
| 7 | pure-radio Embellece una radio. |
Ejemplo
purecss_forms.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form class = "pure-form pure-form-aligned">
<fieldset>
<div class = "pure-control-group">
<label for = "name">Username</label>
<input id = "name" type = "text" placeholder = "Username" required>
</div>
<div class = "pure-control-group">
<label for = "email">Email</label>
<input id = "email" type = "text" placeholder = "Email Address" required>
</div>
<div class = "pure-control-group">
<label for = "comments">Comments</label>
<input id = "comments" type="text" placeholder = "Comments">
</div>
<div class = "pure-controls">
<label for = "married" class = "pure-checkbox">
<input id = "married" type = "checkbox" checked = "checked">
Married
</label>
<br>
<label for = "single" class = "pure-checkbox">
<input id = "single" type = "checkbox">
Single
</label>
<br>
<label for = "dontknow" class = "pure-checkbox">
<input id = "dontknow" type = "checkbox" disabled>
Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class = "pure-controls">
<label for = "male" class = "pure-radio">
<input id = "male" type = "radio" name = "gender" value = "male" checked>
Male
</label>
<br>
<label for = "female" class= "pure-radio">
<input id = "female" type = "radio" name = "gender" value = "female">
Female
</label>
<br>
<label for = "dontknow1" class = "pure-radio">
<input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
Don't know (Disabled)
</label>
<button type = "submit" class = "pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html>Resultado
Verifica el resultado.
Pure.CSS tiene un CSS muy hermoso y sensible para personalizar el aspecto de un botón. Se utilizan los siguientes CSS:
| No Señor. | Nombre y descripción de la clase |
|---|---|
| 1 | pure-button Representa un botón estándar. También se puede usar para diseñar un enlace y un botón. |
| 2 | pure-button-disabled Representa un botón desactivado. Para usar junto con pure-button. |
| 3 | pure-button-active Representa un botón presionado. Para usar junto con pure-button. |
Ejemplo
purecss_buttons.htm
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<style>
.success,
.error,
.warning,
.secondary {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.success {
background: rgb(28, 184, 65); /* green */
}
.error {
background: rgb(202, 60, 60); /* maroon */
}
.warning {
background: rgb(223, 117, 20); /* orange */
}
.secondary {
background: rgb(66, 184, 221); /* light blue */
}
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<h2>Standard Buttons</h2>
<button class = "pure-button">Click Me</button>
<button class = "pure-button pure-button-active">Click Me</button>
<button class = "pure-button pure-button-disabled">I am disabled</button>
<h2>Links as Buttons</h2>
<a class = "pure-button">Link</a>
<a class = "pure-button pure-button-active">Link</a>
<a class = "pure-button pure-button-disabled">Disabled Link</a>
<h2>Primary Button</h2>
<a class = "pure-button pure-button-primary">Submit</a>
<h2>Customized button</h2>
<button class = "pure-button success">Success</button>
<button class = "pure-button error">Error</button>
<button class = "pure-button warning">Warning</button>
<button class = "pure-button secondary">Secondary</button>
<h2>Different Sized button</h2>
<button class = "pure-button xsmall">Extra Small</button>
<button class = "pure-button small">Small</button>
<button class = "pure-button large">Large</button>
<button class = "pure-button xlarge">Extra Large</button>
</body>
</html>Resultado
Verifica el resultado.
Pure.CSS se puede usar para mostrar diferentes tipos de tablas usando varios estilos sobre pure-table
| No Señor. | Nombre y descripción de la clase |
|---|---|
| 1 | pure-table Representa una tabla básica con un relleno predeterminado, un borde y un encabezado enfatizado. |
| 2 | pure-table-bordered Dibuja una tabla con un borde entre filas. |
| 3 | pure-table-horizontal Dibuja una tabla con líneas horizontales. |
| 4 | pure-table-striped Muestra una tabla despojada. |
| 5 | pure-table-odd Si se aplica en cada otro tr, cambia el fondo de la fila y crea un efecto de estilo cebra. |
Ejemplo
purecss_tables.htm
<html>
<head>
<title>The PURE.CSS Tables</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table class = "pure-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Bordered Table</h3>
<table class="pure-table pure-table-bordered">
<thead>
<tr><
th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Table with Horizontal Borders</h3>
<table class="pure-table pure-table-horizontal">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table</h3>
<table class = "pure-table pure-table-striped">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>Resultado
Verifica el resultado.
Pure.CSS proporciona opciones para mostrar las imágenes de forma receptiva utilizando pure-image como clase principal.
| No Señor. | Nombre y descripción de la clase |
|---|---|
| 1 | pure-img Representa una imagen de estilo básico sin ningún borde. La imagen crece y se encoge con el contenido manteniendo la proporción correcta. |
Ejemplo
purecss_images.htm
<html>
<head>
<title>The W3.CSS Images</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Images Demo</h2>
<hr/>
<div class = "pure-g">
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</div>
<div class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</div>
</div>
</body>
</html>Resultado
Verifica el resultado.
Pure.CSS admite las siguientes bibliotecas de iconos populares:
- Iconos impresionantes de fuente
- Iconos de material de Google
- Iconos de Bootstrap
Uso
Para usar un icono, coloque el nombre del icono en la clase de un elemento HTML <i>.
Ejemplo
purecss_icons.htm
<html>
<head>
<title>The PURE.CSS Icons</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<style>
.xsmall {
font-size: 70%;
}
.small {
font-size: 85%;
}
.large {
font-size: 110%;
}
.xlarge {
font-size: 125%;
}
</style>
</head>
<body>
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud xsmall"></i>
<i class = "fa fa-cloud small"></i>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud large"></i>
<i class = "fa fa-cloud xlarge"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons xsmall">cloud</i>
<i class = "material-icons small">cloud</i>
<i class = "material-icons large">cloud</i>
<i class = "material-icons xlarge">cloud</i>
<i class = "material-icons">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud xsmall"></i>
<i class = "glyphicon glyphicon-cloud small"></i>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "glyphicon glyphicon-cloud large"></i>
<i class = "glyphicon glyphicon-cloud xlarge"></i>
<h3>Button with Icon Demo</h3>
<button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
<a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
</body>
</html>Resultado
Verifica el resultado.