Warning 1

X

Warning 2

Objects

CSS components library


Table of content

Components without dependencies

Simple components on pure CSS or with a bit of jquery.

	<link href="http://hipertextos.github.io/src/css/styles.css" rel="stylesheet" media="screen">
							
http://hipertextos.github.io/src/css/styles.css

Responsive menu: collapse on small screens

Pure CSS using checkboxes

Sample

Resize the window to see the effect

Markup
	<nav> 
		<input class="toggletrigger" type="checkbox" id="mob-nav" name="mob-nav" aria-hidden="true" hidden> 
		<label for="mob-nav" class="toggle">Menú <span class="caret"></span></label> 
		<div class="togglecollapsed"> 
			<a href="url" title="title">Item</a> 
			...
		 </div> 
	</nav>
								

With a bit of jQuery

Sample
Markup
<nav>
	<label class="toggle">Menú <span class="caret"></span></label>
	<div id="nav-collapse">
		<a href="url" title="title">Item</a>
		<a href="url" title="title">Item</a>
		<a href="url" title="title">Item</a>
		<a href="url" title="title">Item</a>
		<a href="url" title="title">Item</a>
	</div>
</nav>
<script>
	// Collapse horizontal nav in small devices
	$('#nav-collapse').toggleClass('nav-collapsed');
	$('nav .toggle').click(function(){
		$('#nav-collapse').toggleClass('nav-collapsed');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Tips on hover

Markup
<a href="#" class="tip-top" data-tooltip="Pure CSS tooltips">.tip-top</a>
<a href="#" class="tip-bottom" data-tooltip="Pure CSS tooltips">.tip-bottom</a>
<a href="#" class="tip-left" data-tooltip="Pure CSS tooltips">.tip-left</a>
<a href="#" class="tip-right" data-tooltip="Pure CSS tooltips">.tip-right</a>
<!-- Tips in buttons and dark tips -->
<a href="#" class="button tip-dark tip-top" data-tooltip="Pure CSS tooltips">.tip-top</a>
<a href="#" class="button tip-dark tip-bottom" data-tooltip="Pure CSS tooltips">.tip-bottom</a>
<a href="#" class="button tip-dark tip-left" data-tooltip="Pure CSS tooltips">.tip-left</a>
<a href="#" class="button tip-dark tip-right" data-tooltip="Pure CSS tooltips">.tip-right</a>
								

Tips on hover with a bit of jQuery

Demo
jQuery .tip
jQuery tooltips in buttons
jQuery .tip
Markup
<a href="#" class="tip" title="jQuery tooltips">jQuery .tip</a>
<a href="#" class="button tip" title="jQuery tooltips">jQuery .tip</a>
<script>
	// Tooltip
	$('.tip').hover(function(){
		var title = $(this).attr('title');
		$(this).data('tipText', title).removeAttr('title');
		$('<p class="tooltip"></p>').text(title).appendTo('body').fadeIn('slow');
	}, function() {
		$(this).attr('title', $(this).data('tipText'));
		$('.tooltip').remove();
	}).mousemove(function(e) {
		var mousex = e.pageX + 4; //Get X coordinates
		var mousey = e.pageY - 24; //Get Y coordinates
		$('.tooltip').css({ top: mousey, left: mousex })
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

.button-slide[Direction][Effect]

Markup
<a href="#" data-link="This is a title" class="button button-slideCenter">.button-slideCenter</a>
<a href="#" data-link="This is a title" class="button button-slideTop">.button-slideTop</a>
<a href="#" data-link="This is a title" class="button button-slideBottom">.button-slideBottom</a>
<a href="#" data-link="This is a title" class="button button button-slideLeft">.button-slideLeft</a>
<a href="#" data-link="This is a title" class="button button-slideRight">.button-slideRight</a>
<!-- Custom sizes and colors -->
<a href="#" data-link="This is a title" class="button button-slideCenter flat violet l">.button-slideCenter</a>
<a href="#" data-link="This is a title" class="button button-slideTop flat orange l">.button-slideTop</a>
<a href="#" data-link="This is a title" class="button button-slideBottom flat blue l">.button-slideBottom</a>
<a href="#" data-link="This is a title" class="button button button-slideLeft flat red l">.button-slideLeft</a>
<a href="#" data-link="This is a title" class="button button-slideRight flat green l">.button-slideRight</a>
								

http://hipertextos.github.io/src/css/styles.css

Collapser

Pure CSS using checkboxes

Sample
Content collapsed
Markup
	<div class="ccollapser">
		<input class="ctrigger" type="checkbox" id="a-2" name="a" aria-hidden="true" hidden>
		<label class="button block" for="a-2">Clic<span class="caret"></span></label>
		<div class="ccollapsed">
			Content collapsed
		</div>
	</div>	
								

With a bit of jQuery

Sample
Content collapsed
Markup
<div class="jcollapser">
	<label class="button block jtrigger">Clic<span class="caret"></span></label>
	<div class="jcollapsed">
	Content collapsed
	</div>
</div>	
<script>
	// Collapse & accordion
	$('.jcollapser .jcollapsed').toggleClass('closed');
	$('.jcollapser .jtrigger').click(function(e){
		$(this).next('.jcollapsed').toggleClass('closed anime anm-fadeIn').siblings('.jcollapsed:visible').toggleClass('closed anime anm-fadeIn');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Accordion

Pure CSS using checkboxes

Sample
Markup
	<ul class="list-unlisted">
		<li>
			<label class="button block" for="v-1">Clic</label>
			<input class="ctrigger" type="radio" id="v-1" name="v" aria-hidden="true" hidden>
			<div class="ccollapsed">
				content collapsed 2
			</div>
		</li>
		<li>
			<label class="button block" for="v-2">Clic</label>
			<input class="ctrigger" type="radio" id="v-2" name="v" aria-hidden="true" hidden>
			<div class="ccollapsed">
				content collapsed 2
			</div>
		</li>
		<li>
			<label class="button block" for="v-3">Clic</label>
			<input class="ctrigger" type="radio" id="v-3" name="v" aria-hidden="true" hidden>
			<div class="ccollapsed">
				content collapsed 2
			</div>
		</li>
	</ul>
								

With a bit of jQuery

Sample
Content collapsed
Content collapsed
Content collapsed
Markup
<div class="jcollapser">
	<label class="button block jtrigger">Clic</label>
	<div class="jcollapsed">
	Content collapsed
	</div>
	<label class="button block jtrigger">Clic</label>
	<div class="jcollapsed">
	Content collapsed
	</div>
	<label class="button block jtrigger">Clic</label>
	<div class="jcollapsed">
	Content collapsed
	</div>
</div>
<script>
	// Collapse & accordion
	$('.jcollapser .jcollapsed').toggleClass('closed');
	$('.jcollapser .jtrigger').click(function(e){
		$(this).next('.jcollapsed').toggleClass('closed anime anm-fadeIn').siblings('.jcollapsed:visible').toggleClass('closed anime anm-fadeIn');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Tabs

Pure CSS using checkboxes

Sample
  • Stuff for Tab One

  • Stuff for Tab Two

  • Stuff for Tab Three

Markup
<div class="tabs">
	<div class="tabs-control">
		<label for="tab-1">Tab 1</label>
		<label for="tab-2">Tab 2</label>
		<label for="tab-3">Tab 3</label>
	</div>
	<ul class="tabs-box">
		<li>
			<input class="tabs-check" type="radio" id="tab-1" name="tab-group" aria-hidden="true" hidden checked>
			<div class="tabs-panel anm-fadeIn">
				<p>Stuff for Tab One</p>
			</div>
		</li>
		<li>
			<input class="tabs-check" type="radio" id="tab-2" name="tab-group" aria-hidden="true" hidden>
			<div class="tabs-panel anm-scaleUp">
				<p>Stuff for Tab Two</p>
			</div>
		</li>
		<li>
			<input class="tabs-check" type="radio" id="tab-3" name="tab-group" aria-hidden="true" hidden>
			<div class="tabs-panel anm-scaleUpDown">
				<p>Stuff for Tab Three</p>
			</div>
		</li>
	</ul>
</div>
								

With a bit of jQuery

Sample

Stuff for Tab One

Stuff for Tab Two

Stuff for Tab Three

Markup
<div class="tabs">
	<div class="tabs-control">
		<a class="idtrigger tab-active" href="#one">Tab One</a>
		<a class="idtrigger" href="#two">Tab Two</a>
		<a class="idtrigger" href="#three">Tab Three</a>
	</div>
	<div class="container">
		<div class="panel idpanel closed" id="one">
		   <p>Stuff for Tab One</p>
		</div> 
		<div class="panel idpanel" id="two">
		   <p>Stuff for Tab Two</p>
	</div> 
		<div class="panel idpanel" id="three">
		   <p>Stuff for Tab Three</p>
		</div>
	</div>
</div>
<script>
	// Tabs & sliders
	$('.idpanel').toggleClass('closed');
	$('.idtrigger').click(function(e){
		e.preventDefault(); 
		var currentPanel = $(this).attr('href');
		$(this).toggleClass('tab-active').siblings('.idtrigger').removeClass('tab-active');
		$(currentPanel).toggleClass('closed anime anm-fadeIn').siblings('.idpanel:visible').toggleClass('closed anime anm-fadeIn');
		if ($('.idpanel:visible').length) {
		} else {
		}
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Dialogs

Pure CSS with checkboxes

Sample

Markup
<input class="open-dialog" id="modal-one" type="checkbox" hidden>
<section class="dialog" id="warning2"><h4>Warning 2</h4><label class="button-close" for="modal-one" aria-hidden="true">×</label></section>

<label class="button" for="modal-one">Open dialog</label>
								

With a bit of jQuery

Sample
Open dialog
Markup
<section class="jdialog" id="warning1"><h4>Warning 1</h4><a class="button-close" href="#warning1">X</a></section>

<a class="button button-modal" href="#warning1">Open dialog</a>

<script>
	$('.jdialog').toggleClass('closed');
	$('.button-modal, .jdialog .button-close').click(function(){
		var currentDialog = $(this).attr('href');
		$(currentDialog).toggleClass('closed anime anm-moveFromTop');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Alerts and notifications

Pure CSS with checkboxes

Sample

Alert: works with checkboxes

This is a notification/alert with footer


Markup
<input type="checkbox" class="alert-check" id="alert-1" name="alert-1" hidden>
<section class="alert lines red">
	<label class="button-close" for="alert-1">X</label>
	<header>
		<h3 class="symbol-warning">Alert: works with checkboxes</h3>
	</header>
	<div class="panel">
		<p>This is a notification/alert with footer</p>
	</div>
	<footer class="reverse">
		<label class="button alert-check lines red" for="alert-1">Accept</label>
	</footer>
</section>
								

With a bit of jQuery

Sample

Notification: alert clone without checkboxes

This is a notification/alert, without footer


Markup
<section class="notification flat green">
	<label class="button-close">X</label>
	<header>
		<h3 class="symbol-ok">Notification: alert clone without checkboxes</h3>
	</header>
	<div class="panel"><p>This is a notification/alert, without footer</p></div>
</section>
<script>
	// Notification
	$('.notification .button-close').click(function(){
		$(this).closest('.notification').toggleClass('closed');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Dropmenu and Popmenu

On hover

Markup
<div class="collapser">
	<a href="#">.dropmenu list</a>
	<ul class="collapsed dropmenu">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</div>
								

On click with checkboxes

Description

Note: it's easy to add animations with anime.css as you can see in the popmenu example

Markup
<div class="button-group">
	<input class="ctrigger" type="checkbox" id="d-1" name="d" aria-hidden="true" hidden>
	<label class="button" for="d-1">Clic<span class="caret"></span></label>
	<ul class="dropmenu ccollapsed">
		<li><a>OOO</a></li>
		<li><a>OOO</a></li>
		<li><a>OOO</a></li>
	</ul>
</div>

<div class="button-group">
	<input class="ctrigger" type="checkbox" id="p-1" name="p" aria-hidden="true" hidden>
	<label class="button" for="p-1">P<span class="caret up"></span></label>
	<ul class="popmenu ccollapsed anm-fadeIn delay-200">
		<li><a>OOO</a></li>
		<li><a>OOO</a></li>
		<li><a>OOO</a></li>
	</ul>
</div>
								

With jQuery

Markup
<div class="button-group">
	<a class="droptrigger">.dropmenu list</a>
	<ul class="dropmenu">
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	</ul>
</div>
<script>
	// Dropmenu	
	$(".button-group .droptrigger").click(function(e) {
		var others = $(".dropmenu").not($(this).next('.dropmenu'));
		$(this).next('.dropmenu').toggleClass('opened anime anm-fadeIn');
		$(others).removeClass('opened anime anm-fadeIn');
		e.stopPropagation(); //stops click event from reaching document
	});
	$(document).click(function() {
	  $(".dropmenu").removeClass('opened anime anm-fadeIn');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Figures

Basic figures

Sample
picture
Basic figure and captionfigure
picture
Basic figure and captionfigure
picture
Basic figure and captionfigure
picture
Basic figure and captionfigure

Markup
<figure class="">
	<img src="http://hipertextos.github.io/src/img/picture-3.jpg">
	<figcaption class="">Basic figure and captionfigure</figcaption>
</figure>
								

Height fixed figure with .level-[value]

Sample
picture
picture
picture
Height fixed figure and captionfigure
picture
Height fixed figure and captionfigure

Markup
<figure class="level-10">
	<img src="http://hipertextos.github.io/src/img/picture-3.jpg">
	<figcaption class="">Basic figure and captionfigure</figcaption>
</figure>
								

Height regularized figure with .level-blocked

Sample
picture
picture
picture
Height fixed figure and captionfigure
picture
Height fixed figure and captionfigure

Markup
<figure class="level-12 level-blocked">
	<img src="http://hipertextos.github.io/src/img/picture-3.jpg">
	<figcaption class="">Basic figure and captionfigure</figcaption>
</figure>
								

Caption on hover

Sample
picture
caption-onhover (default) + flat + black
picture
caption-onhover + caption-center + flat + red
picture
caption-onhover + caption-top + flat + violet
picture
caption-onhover + caption-bottom + flat + violet
picture
caption-onhover + caption-left + flat + orange
picture
caption-onhover + caption-right + flat + green

Markup
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-onhover caption-center flat red section-title">caption-onhover + caption-center + flat + red</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-onhover caption-top flat magenta section-title">caption-onhover + caption-top + flat + violet</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-onhover caption-bottom flat violet section-title">caption-onhover + caption-bottom + flat + violet</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-onhover caption-left flat orange section-title">caption-onhover + caption-left + flat + orange</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-onhover caption-right flat green section-title">caption-onhover + caption-right + flat + green</figcaption>
	</figure>
</div>
<hr>
								

Caption inside

Sample
picture
caption-inside (default) + flat + black
picture
caption-inside + caption-center + flat + red
picture
caption-inside + caption-top + flat + violet
picture
caption-inside + caption-bottom + flat + violet
picture
caption-inside + caption-left + flat + orange
picture
caption-inside + caption-right + flat + green

Markup
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-inside caption-center flat red section-title">caption-inside + caption-center + flat + red</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-inside caption-top flat magenta section-title">caption-inside + caption-top + flat + violet</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-inside caption-bottom flat violet section-title">caption-inside + caption-bottom + flat + violet</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-inside caption-left flat orange section-title">caption-inside + caption-left + flat + orange</figcaption>
	</figure>
</div>
<div class="cell-4">
	<figure class="">
		<img src="http://hipertextos.github.io/src/img/picture.jpg">
		<figcaption class="caption-inside caption-right flat green section-title">caption-inside + caption-right + flat + green</figcaption>
	</figure>
</div>
<hr>
								

Sliders

Description

A

B

from left

A

B

from bottom

A

B

from top

A

B

from right

Markup
<div class="thumb-3 blocked-half">
	<figure class="figure-slide-left l din-scaleUpDown">
		<div class="first"><h1 class="universe">A</h1></div>
		<div class="second"><h1 class="universe">B</h1></div>
		<figcaption>from left</figcaption>
	</figure>
</div>
<div class="thumb-3 blocked-half">
	<figure class="figure-slide l din-scaleUpDown">
		<div class="first"><h1 class="universe">A</h1></div>
		<div class="second"><h1 class="universe">B</h1></div>
		<figcaption>from bottom</figcaption>
	</figure>
</div>
<hr class="visible-phone">
<div class="thumb-3 blocked-half">
	<figure class="figure-slide-bottom l din-scaleUpDown">
		<div class="first"><h1 class="universe">A</h1></div>
		<div class="second"><h1 class="universe">B</h1></div>
		<figcaption>from top</figcaption>
	</figure>
</div>
<div class="thumb-3 blocked-half">
	<figure class="figure-slide-right l din-scaleUpDown">
		<div class="first"><h1 class="universe">A</h1></div>
		<div class="second"><h1 class="universe">B</h1></div>
		<figcaption>from right</figcaption>
	</figure>
</div>
<hr>
								

http://hipertextos.github.io/src/css/styles.css

Flip panels

On hover

Demo

Front of my panel

Back

Front of my panel

Back

Front of my panel

Back


Markup
<div class="panel-flip-onhover">
	<div class="front flat red">
		<h3>Front of my panel</h3>
	</div>
	<div class="back flat green">
		<h3>Back</h3>
	</div>
</div>
								

On click with checkboxes

Demo

Front of my panel


Back


Front of my panel


Back


Front of my panel


Back



Markup
<div class="panel-flip">
	<input class="fliptrigger" type="checkbox" id="flip-1" name="flip" aria-hidden="true" hidden>
	<div class="front flat red">
		<h3>Front of my panel</h3><hr>
		<label class="button button-flip flat soft-red" for="flip-1">+</label>
	</div>
	<div class="back flat green">
		<h3>Back</h3><hr>
		<label class="button button-flip flat soft-green" for="flip-1">-</label>
	</div>
</div>
								

On click with jquery

Demo

Front of my panel


Back


Front of my panel


Back


Front of my panel


Back



You can add some margin with the .panel class.

Markup
<div class="cell-4">
	<div class="panel-flip">
		<div class="panel front line-top red">
			<h3>Front of my panel</h3><hr>
			<label class="button button-flip flat soft-red jfliptrigger">+</label>
		</div>
		<div class="panel back line-top green">
			<h3>Back</h3><hr>
			<label class="button button-flip flat soft-green jfliptrigger">-</label>
		</div>
	</div>
</div>

<script>		
// Flip
	$('.jfliptrigger').click(function(){
		$(this).closest('.panel-flip').toggleClass('turned');
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Responsive image carousel

On click with checkboxes

Demo

You can add animations with classes determined in anime.css.

Also you can add next and previous buttons as in the second slide.

Markup
<div class="carousel">
	<ul class="carousel-box">
		<li>
			<input class="carousel-check" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden checked>
			<div class="carousel-slide anm-fadeIn">
				<img src="http://hipertextos.github.io/src/img/picture-1.jpg">
			</div>
		</li>
		<li>
			<input class="carousel-check" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden>
			<div class="carousel-slide anm-scaleUp">
				<img src="http://hipertextos.github.io/src/img/picture-2.jpg">
				<label for="carousel-1" class="prev"></label>
				<label for="carousel-3" class="next"></label>
			</div>
		</li>
		<li>
			<input class="carousel-check" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden>
			<div class="carousel-slide anm-scaleUpDown">
				<img src="http://hipertextos.github.io/src/img/picture-3.jpg">
			</div>
		</li>
	</ul>
	<div class="carousel-control">
		<label for="carousel-1"></label>
		<label for="carousel-2"></label>
		<label for="carousel-3"></label>
	</div>
</div>
								

On click with jquery

Demo

Markup
<div class="carousel">
	<div class="carousel-box">
		<div class="carousel-jslide anm-fadeIn idpanel closed" id="slide-4">
			<img src="http://hipertextos.github.io/src/img/picture-1.jpg">
		</div>
		<div class="carousel-jslide anm-scaleUp idpanel" id="slide-5">
			<img src="http://hipertextos.github.io/src/img/picture-2.jpg">
			<a href="#slide-4" class="prev idtrigger"></a>
			<a href="#slide-6" class="next idtrigger"></a>
		</div>
		<div class="carousel-jslide anm-scaleUpDown idpanel" id="slide-6">
			<img src="http://hipertextos.github.io/src/img/picture-3.jpg">
		</div>
	</div>
	<div class="carousel-control">
		<a href="#slide-4" class="idtrigger"></a>
		<a href="#slide-5" class="idtrigger"></a>
		<a href="#slide-6" class="idtrigger"></a>
	</div>
</div>
<script>
	// Tabs & sliders
	$('.idpanel').toggleClass('closed');
	$('.idtrigger').click(function(e){
		e.preventDefault(); 
		var currentPanel = $(this).attr('href');
		$(this).toggleClass('tab-active').siblings('.idtrigger').removeClass('tab-active');
		$(currentPanel).toggleClass('closed anime anm-fadeIn').siblings('.idpanel:visible').toggleClass('closed anime anm-fadeIn');
		if ($('.idpanel:visible').length) {
		} else {
		}
	});
</script>
								

http://hipertextos.github.io/src/css/styles.css

Responsive iframes for media

YouTube 16:9 (default)

Demo

Markup
<div class="youtube"><iframe width="560" height="315" src="//www.youtube.com/embed/tRS4X-kVQ1M" frameborder="0" allowfullscreen></iframe></div>
								

YouTube 4:3 (.4by3)

Demo

Markup
<div class="youtube ratio-4by3"><iframe width="420" height="315" src="//www.youtube.com/embed/_QkKFEpNiLM" frameborder="0" allowfullscreen></iframe></div>
								

http://hipertextos.github.io/src/css/styles.css

Viewer

View settings with checkboxes

Demo


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.




Markup
<div class="button-tools">
	<label class="button" for="view-full">Full</label>
	<label class="button" for="view-listed">Listed</label>
	<label class="button" for="view-gallery">Gallery</label>
	<label class="button" for="view-mosaic">Mosaic</label>
	<label class="button" for="view-resume">Resume</label>
</div>

<input class="view-check" type="radio" id="view-full" name="view" aria-hidden="true" hidden>
<input class="view-check" type="radio" id="view-listed" name="view" aria-hidden="true" hidden checked>
<input class="view-check" type="radio" id="view-gallery" name="view" aria-hidden="true" hidden>
<input class="view-check" type="radio" id="view-mosaic" name="view" aria-hidden="true" hidden>
<input class="view-check" type="radio" id="view-resume" name="view" aria-hidden="true" hidden>

<div id="views" class="">
									
	<article>
	<a href="http://hipertextos.github.io/src/ics/hipertextos.png" class="article-thumb" title="Picture"><img src="http://hipertextos.github.io/src/img/picture.jpg"></a> 
	<p class="article-date">July, 14, 1789</p> 
	<h4 class="article-title"><a href="@url">Article title</a></h4> 
	<p class="article-lead">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
	<hr />
	</article>

	<article>
		...
	</article>
	
	...
	<hr />
</div>
								

Tips on hover with a bit of jQuery

Demo


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.


picture

Article title

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.



May use cookies to set viewer preferences using views.js. The file includes Klaus Hartl Cookies Jquery plugin. Released under the MIT license.


Markup
<nav class="nav-inline">
<a id="view-full" href="#controller" title="Full view">Full</a>
<a id="view-listed" href="#controller" title="Listed view">Listed</a>
<a id="view-gallery" href="#controller" title="Gallery view">Gallery</a>
<a id="view-mosaic" href="#controller" title="Mosaic view">Mosaic</a>
<a id="view-resume" href="#controller" title="Resume view">Resume</a>
</nav>

<div id="viewer" class="">

	<article>
		<a href="http://hipertextos.github.io/src/ics/hipertextos.png" class="article-thumb" title="Picture"><img src="http://hipertextos.github.io/src/img/picture.jpg"></a> 
		<p class="article-date">July, 14, 1789</p> 
		<h4 class="article-title"><a href="@url">Article title</a></h4> 
		<p class="article-lead">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p> 
		<hr />
	</article>

	<article>
		...
	</article>
	...
<hr />
</div>
<script>
	// Viewer
	$('#viewer-resume').click(function(){
		$('#viewer').removeClass();
		$('#viewer').addClass('resume');
	});
	$('#viewer-listed').click(function(){
		$('#viewer').removeClass();
		$('#viewer').addClass('listed');
	});
	$('#viewer-gallery').click(function(){
		$('#viewer').removeClass();
		$('#viewer').addClass('gallery');
	});
	$('#viewer-mosaic').click(function(){
		$('#viewer').removeClass();
		$('#viewer').addClass('mosaic');
	});
	$('#viewer-full').click(function(){
		$('#viewer').removeClass();
		$('#viewer').addClass('full');
	});
</script>