Me.css v4 beta + sass Variables, Mixins and conditionals xxl optional xxxl optional Optional mixins Optional media query styles...
W3 CSS Framework
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.
<!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)
Quizás te interese ...
Google Fonts se ha convertido es una herramienta de referencia para los diseñadores web, pero por cada fuente que agregamos a nuestro sitio...
me.css v4 beta ya disponible! https://didesweb.com/css/me-css-sass/ 35.4kb unminified Me.css es una librería css basada en Emmet muy...
CSS3 nos aporta entre otras novedades la propiedad gradient, que nos permite mostrar transiciones suaves entre dos o más colores. Antes,...
Valoraciones
Sé el primero en valorar