BaseCss CDN

<!--Colocar entre <head> y </head> -->
<link rel="stylesheet" href="http://datoweb.com/basecss/css/base.css">

<!--Colocar antes del cierre body </body> -->
<script src="http://datoweb.com/basecss/js/base.js"></script>

Barras de progreso

50%
70%
90%
<div class="barra">
			<div class="barra-progreso barra-progreso-azul" style="width:50%">50%</div>
		</div>
		<div class="barra">
			<div class="barra-progreso barra-progreso-verde" style="width:70%">70%</div>
		</div>
		<div class="barra">
			<div class="barra-progreso barra-progreso-rojo" style="width:90%">90%</div>
</div>

Panel

Encabezado
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
<div class="panel">
	<div class="panel-encabezado">Encabezado</div>
	<div class="panel-contenido">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
	</div>
</div>

Acordeon

Encabezado 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
Encabezado 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
<div class="panel panel-acordeon">
	<div class="panel-encabezado">Encabezado 1</div>
	<div class="panel-contenido" style="display:block">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
	</div>
</div>

<div class="panel panel-acordeon">
	<div class="panel-encabezado">Encabezado 2</div>
	<div class="panel-contenido">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat nemo, id expedita at molestias hic odit amet officiis laboriosam vero optio inventore dolorum accusantium fugiat accusamus blanditiis ratione, doloribus voluptates.
	</div>
</div>

Botones

Grande Mediano Pequeño
<a href="#" class="boton boton-azul boton-grande">Grande</a>
<a href="#" class="boton boton-verde">Mediano</a>
<a href="#" class="boton boton-rojo boton-pequenio">Pequeño</a>

Notificaciones

10 Mensajes
<a class="boton boton-verde"><span class="notificacion">10</span> Mensajes</a>

Buscador

<form class="buscador">
	<input type="text" class="buscador-campo" placeholder="Buscar..">
	<input type="submit" class="buscador-boton" value="">		
</form>

Loguin

<form class="formulario">
	<div class="formulario-grupo">
		<label for="usuario">Usuario</label>
		<input type="text" name="usuario" id="usuario" placeholder="Usuario...">
	</div>

	<div class="formulario-grupo">
		<label for="password">Password</label>
		<input type="password" name="password" id="password" placeholder="Password...">
	</div>

	<div class="formulario-grupo">
		<div class="recordarme">
			<input type="checkbox" id="recordar" name="recordar"> <label for="recordar">Recordarme</label>
		</div>
	</div>

	<div class="formulario-grupo">
		<input type="submit" value="Iniciar" class="boton boton-verde derecha">
	</div>
</form>

Bloques

imagen1
imagen2
imagen3
imagen4
<div class="columna columna-m-6 columna-g-3">
	<img src="img/1.png" alt="imagen1">
</div>
<div class="columna columna-m-6 columna-g-3">
	<img src="img/2.png" alt="imagen2">
</div>
<div class="columna columna-m-6 columna-g-3">
	<img src="img/3.png" alt="imagen3">
</div>
<div class="columna columna-m-6 columna-g-3">
	<img src="img/4.png" alt="imagen4">
</div>

Subir top

Subir
<div class="subir"></div>
<div class="subir subir-negro"></div>

Etiquetas

Grande Normal Pequeño
<span class="etiqueta etiqueta-grande etiqueta-azul">Grande</span>
<span class="etiqueta etiqueta-verde">Normal</span>
<span class="etiqueta etiqueta-pequenia etiqueta-rojo">Peque&ntilde;o</span>

Formulario

<form class="formulario">
	
	<div class="formulario-grupo">
		<label for="campo1">Campo1</label>
		<input type="text" name="campo1" id="campo1" placeholder="Campo1...">
	</div>

	<div class="formulario-grupo">
		<label for="campo2">Campo2</label>
		<input type="text" name="campo2" id="campo2" placeholder="Campo2...">
	</div>

	<div class="formulario-grupo">
		<label for="campo3">Campo3</label>
		<input type="text" name="campo3" id="campo3" placeholder="Campo3...">
	</div>

	<div class="formulario-grupo">
		<label for="mensaje">Mensaje</label>
		<textarea name="mensaje" id="mensaje" placeholder="Mensaje..."></textarea>
	</div>

	<div class="formulario-grupo">
		<input type="button" class="boton boton-azul derecha" value="Enviar formulario">
	</div>

</form>

Alertas

Verde
Pequeña
Roja
<div class="alerta alerta-verde">Verde</div>
<div class="alerta alerta-pequenia">Pequeña</div>
<div class="alerta alerta-rojo">Roja</div>

Cookies

<div class="cookies">
	<span>Utilizamos cookies propias y de terceros!</span>
	<a href="#" class="boton boton-pequenio boton-verde derecha">Aceptar</a>
</div>