Warning 1

X

Warning 2

Objects

CSS components library
HiperCSS framework
pages styles skins objects
effects icons anime get

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

Tooltips in links & buttons

Tips on hover

Demo
.tip-top .tip-bottom .tip-left .tip-right
Tips in buttons and dark tips
.tip-top .tip-bottom .tip-left .tip-right
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

Show data-link (attr) on hover

.button-slide[Direction][Effect]

Demo
.button-slideCenter .button-slideTop .button-slideBottom .button-slideLeft .button-slideRight
Custom sizes and colors
.button-slideCenter .button-slideTop .button-slideBottom .button-slideLeft .button-slideRight
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
Tab One Tab Two Tab Three

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

Description
.dropmenu list
.popmenu list
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

Description
.dropmenu list
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
  • picture
  • picture
  • picture

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

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

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

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

Article title

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

picture

July, 14, 1789

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>
HiperCSS framework
pages styles skins objects
effects icons anime get