W3.CSS es un framework CSS que podemos encontrar y descargar en el sitio oficial de W3Schools, según el propio sitio “Inspired by Google Material Design” nos ayuda a crear sitios web más ligeros y accesibles, está construido especialmente para HTML5, CSS3 y los nuevos estandares de diseño “Responsive”. La primera versión estable se publicó el 8 de Junio.

Ventajas

Estas son algunas de las ventajas que aporta W3.CSS

  • Diseño “first-mobile”
  • Responsive
  • CSS estándar
  • Fácil de aprender
  • No requiere jQuery
  • No requiere librerías JS
  • Compatible con todas las plataformas
  • Compatible con todos los dispositivos

Si habeis usado el framework CSS de Bootstrap, esto es muy similar, incluso más sencillo, aunque no tan completo, entre sus principales ventajas de las que hemos mencionado antes destacan el diseño “Responsive” y la respuesta “firt-mobile”, es un framework construido para todos los dispositivos y muy ligero.

En la web de W3Schools aparece una mención a una frase de Albert Einstein.

Make it as simple as possible, but not simpler.

Que vendría a ser algo como “Que sea lo más simple posible, pero no lo más simple.”

Como funciona

La última versión estable para proyectos en producción es la 1.8 (Diciembre-2015), aunque disponemos de un enlace para acceder a la última versión publicada, accede al enlace y guardala para enlazarla desde un archivo HTML5.

Descargar w3.css

<!DOCTYPE html><html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="w3.css">
</head>
<body>
	...
</body>
</html>

Si lo prefieres puedes llamar a un cdn desde tu plantilla

<!DOCTYPE html><html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
	...
</body>
</html>

A partir de aquí podemos añadir clases, W3.CSS dispone de clases por defecto para todos los elementos HTML.


<table class="w3-table w3-striped w3-bordered">
	<thead>
	<tr>
	  <th>Archivo</th>
	  <th>Peso</th>
	  <th>Nº de líneas</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	  <td>site.css </td>
	  <td>2.72KB</td>
	  <td>56</td>
	</tr>
	<tr>
	  <td>w3.css</td>
	  <td>22.00KB</td>
	  <td>393</td>
	</tr>
	<tr>
	  <td>w3full.css</td>
	  <td>24.70KB</td>
	  <td>449</td>
	</tr>
	<tr>
	  <td>html5.css</td>
	  <td>15.20KB</td>
	  <td>293</td>
	</tr>
	</tbody>
</table>

“Cards”, Cajas con sombra por defecto

<div class="w3-card-8"><p>w3-card-16</p></div>

Botones

<a class="w3-btn blue">Botón</a>
<a class="w3-btn teal w3-disabled">Botón</a>

Estilos para encabezados, pié de página y otros elementos

<header class="w3-container teal">
  <h2>Didesweb</h2>
</header>

En la web de W3Schools podeis encontrar toda la información y recursos para comenzar a trabajar con este framework, modales, recursos para la navegación, contenedores, Tooltips, formularios, en definitiva, una colección de recursos CSS estándar a tener muy en cuenta.

<div class="w3-card-4" style="width:50%;">
	<header class="w3-container blue">
	  <h1>Y muchas cosas más</h1>
	</header>
	<div class="w3-container">
		<p>En la web de W3Schools podeis encontrar ...</p>
	</div>
</div>

Referencia

La referencia y el tutorial completo podeis verlo en el siguiente enlace:
W3.CSS W3Schools

(Actualizado el 04-12-2015)

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias necesarias para el correcto funcionamiento de la web y personalizar el contenido. No utilizamos cookies de terceros ni guardamos información personal sobre ti. Puedes encontrar más información en nuestra Política de cookies.

ACEPTAR
Aviso de cookies