W3 CSS Framework

11 de /junio06 de /2015
4m 46s
css
0 comentarios
12152

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

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies