Pages

an HTML5 starter
HiperCSS framework
pages styles skins objects
effects icons anime get

Table of content

HTML5 starter template

For all your needs.

http://hipertextos.github.io/docs/starter.html

Recommended helpers

HTML5Shiv

Description

The starter file includes HTML5shiv.js. HTML5Shiv is a JavaScript workaround, invented by Sjoerd Visscher, to enable styling of HTML5 elements in versions of Internet Explorer prior to version 9, which do not allow unknown elements to be styled without JavaScript.

Noscript stylesheet

Description

The <noscript> tag defines an alternate stylesheet for users that have disabled scripts in their browser or have a browser that doesn't support script: noscript.css

Print stylesheet

Description

The <link href="http://hipertextos.github.io/src/css/print.css" rel="stylesheet" media="print"> code defines an alternate stylesheet for printers.

http://hipertextos.github.io/docs/starter.html

Head structure

Inside the head tag

Description

The starter file includes calls to CSS libraries and scripts from the hipertextos framework.

Inside the Head tag:

  • Basic metadata
  • Geolocation metada
  • Screen styles
  • Print styles
  • No script styles
  • Old iExplorer hack
  • Site feed
  • Page icons

We recommend this interesting tools:

http://hipertextos.github.io/docs/starter.html

HTML5 Starter

Markup
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8">
			<!-- Metadata: Basic -->
			<title>PageTitle</title>
			<meta name="viewport" content="width=device-width, initial-scale=1.0">
			<meta name="description" content="PageDescription">
			<meta name="keys" content="PageKeys">
			<meta name="author" content="PageAuthor">
			<!-- Metadata: GeoTags -->
			<meta name="geo.region" content="PageRegion">
			<meta name="geo.placename" content="PagePlacename">
			<meta name="geo.position" content="PageLangitudeLongitude">
			<meta name="ICBM" content="PageLangitudeLongitude">
			<!-- Screen styles -->
			<link href="http://hipertextos.github.io/src/css/styles.css" rel="stylesheet" media="screen">
			<link href="http://hipertextos.github.io/src/css/anime.css" rel="stylesheet" media="screen">
			<link href="http://hipertextos.github.io/src/css/effects.css" rel="stylesheet" media="screen">
			<!-- Print styles -->
			<link href="http://hipertextos.github.io/src/css/print.css" rel="stylesheet" media="print">
			<!-- If iexplorer :( -->
			<!--[if lt IE 9]><script src="http://hipertextos.github.io/src/js/html5shiv.js"></script><![endif]-->
			<!--[if IE]><link rel="stylesheet" type="text/css" href="http://hipertextos.github.io/src/css/iexplorer.css" /><![endif]-->
			<!-- If JS disabled -->
			<noscript><link href="http://hipertextos.github.io/src/css/noscript.css" rel="stylesheet" media="screen"></noscript>
			<!-- Site Feed -->
			<link rel="alternate" type="application/rss+xml" title="rss" href="SiteFeedLink">
			<!-- Page Icons -->
			<link rel="shortcut icon" href="http://hipertextos.github.io/src/ics/favicon.ico">
			<link rel="apple-touch-icon" sizes="57x57" href="http://hipertextos.github.io/src/ics/apple-touch-icon-57x57.png">
			<link rel="apple-touch-icon" sizes="114x114" href="http://hipertextos.github.io/src/ics/apple-touch-icon-114x114.png">
			<link rel="apple-touch-icon" sizes="72x72" href="http://hipertextos.github.io/src/ics/apple-touch-icon-72x72.png">
			<link rel="apple-touch-icon" sizes="144x144" href="http://hipertextos.github.io/src/ics/apple-touch-icon-144x144.png">
			<link rel="apple-touch-icon" sizes="60x60" href="http://hipertextos.github.io/src/ics/apple-touch-icon-60x60.png">
			<link rel="apple-touch-icon" sizes="120x120" href="http://hipertextos.github.io/src/ics/apple-touch-icon-120x120.png">
			<link rel="apple-touch-icon" sizes="76x76" href="http://hipertextos.github.io/src/ics/apple-touch-icon-76x76.png">
			<link rel="apple-touch-icon" sizes="152x152" href="http://hipertextos.github.io/src/ics/apple-touch-icon-152x152.png">
			<link rel="icon" type="image/png" href="http://hipertextos.github.io/src/ics/favicon-196x196.png" sizes="196x196">
			<link rel="icon" type="image/png" href="http://hipertextos.github.io/src/ics/favicon-160x160.png" sizes="160x160">
			<link rel="icon" type="image/png" href="http://hipertextos.github.io/src/ics/favicon-96x96.png" sizes="96x96">
			<link rel="icon" type="image/png" href="http://hipertextos.github.io/src/ics/favicon-16x16.png" sizes="16x16">
			<link rel="icon" type="image/png" href="http://hipertextos.github.io/src/ics/favicon-32x32.png" sizes="32x32">
			<meta name="msapplication-TileColor" content="#dddddd">
			<meta name="msapplication-TileImage" content="http://hipertextos.github.io/src/ics/mstile-144x144.png">
			<meta name="msapplication-config" content="http://hipertextos.github.io/src/ics/browserconfig.xml">
		</head>
		<body>
  
			<!-- Page content -->
			<div class="page" id="page">
		
				<header>
					<h1>PageTitle</h1>
				</header>
			
				<main id="content">
					<div class="content">
				
						PageMain
				
						<hr>
					</div><!-- /.content -->
				</main>
			
				<footer>
					PageInfo
				</footer>
			
			</div><!-- /#page -->
   
			<!-- Scripts
			================================================== -->
			<script type="text/javascript">
	
			</script>
		</body>
	</html>
HiperCSS framework
pages styles skins objects
effects icons anime get