Mick Redman: template

Showing posts with label template. Show all posts

Tuesday, 4 December 2012

Fullscreen presentations using twitter bootstrap and the HTML5 API

I can't take all the credit for this. I have to acknowledge the great work done by HTML5 Demos. What I did was, simplify some of the JavaScript and CSS. I then used Twitter Bootstrap as a template, so to make this work, you'll have to make that download. I also made use of the carousel library which came with Twitter Bootstrap. You'll also have to download jQuery and refer to it as I have.

Here's how it works. You load put the page in your browser. When loaded, you press the 'f' jey to make the page full screen. Press the 'enter' key to move forward through the slideshow. Press the backspace key to move back. Press the 'Esc' key when you've done.

I've tested it on Chrome and Firefox. I believe there's another popular browser, but it's not installed on my computer.

Anyway. Here's the code.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fullscreen demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">

<style>
::-webkit-scrollbar
{
width:15px;
background:white;
}
::-webkit-scrollbar-thumb
{
box-shadow:inset 0 0 99px rgba(0,0,0,.2);
border:solid transparent;
border-width:6px 4px;
}
html, body
{
height:100%;
background:white;
overflow-y:auto;
overflow-x:hidden;
}
:-webkit-full-screen-document
{

}
:-webkit-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
:-moz-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
#fs:-webkit-full-screen
{
width:98%;
height:98%;
background-color:white;
}
.carousel-inner .item
{
margin-left:80px;
}
</style>


</head>
<body>
<div id="fs">
<div class="container">
<div class="page-header">
<h1>f for full screen, Esc for quit.</h1>
</div>
<div id="myCarousel" class="carousel slide">

<div class="carousel-inner">
<div class="active item">
<ul>
<li>First bullet</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="item">
<ul>
<li>Fourth bullet</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
<div class="item">
<ul>
<li>Seventh bullet</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</div>
</div>

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
</div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).keyup(function(event)
{
$('.carousel').carousel('pause');
if (event.keyCode === 13)
{
$('a.carousel-control.right').trigger('click');
}
if (event.keyCode === 8)
{
$('a.carousel-control.left').trigger('click');
}
});

var elem = document.querySelector(document.webkitExitFullscreen ? '#fs' : 'body');
document.addEventListener('keydown', function(e)
{
switch (e.keyCode)
{
case 70:
enterFullscreen();
break;
}
}, false);

function enterFullscreen()
{
if (elem.webkitRequestFullscreen)
{
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
else
{
if (elem.mozRequestFullScreen)
{
elem.mozRequestFullScreen();
}
else
{
elem.requestFullscreen();
}
}
}
</script>
</body>
</html>

Wednesday, 1 June 2011

Simple layout #33

I haven't done a simple design layout in a while. Haven't had much time to be honest. This one is very simple. Two fonts, 1 colour, but there is an idea how very small.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Design Template 33</title>

<link rel="stylesheet" href="http://meyerweb.com/eric/tools/css/reset/reset.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<style>
body
{
font:0.9em/1.5em Sans-serif;
}
.contentHolder
{
margin:0 auto;
width:60em;
}
#topPart, #bottomPart
{
color:#FFFFFF;
}
#topPart
{
height:6em;
background:#00A6F2;
padding:0.5em 0 0.5em 0;
}
#middlePart
{
min-height:2em;
}
#bottomPart
{
min-height:2em;
}
#pictureHolder, #wordedContent
{
float:left;
width:48%;
}
h1, h2, h3
{
font-family:'Arvo', arial, serif;
}
h1
{
font-size:4em;
line-height:1em;
}
h2
{
font-size:2em;
}
h3
{
margin:1.5em 0 1.5em 0;
font-size:1.5em;
color:#00A6F2;
}
p
{
font-family: 'Muli', arial, serif;
text-align:justify;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<section id="topPart">
<header class="contentHolder">
<h1>Hello</h1>
<h2>And welcome to my website...</h2>
</header>
</section>
<section id="middlePart">
<section class="contentContainer">
<article id="pictureHolder">
<a href="http://www.ourecohouse.info/"><img src="http://www.publicdomainpictures.net/pictures/1000/nahled/1-1203254406i5t0.jpg" alt="An Egg by Petr Kratochvil" /></a>
</article>
<aside id="wordedContent">
<h3>Let's create something beautiful<br />
From something simple</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</aside>
</section>
</section>
</body>
</html>

Wednesday, 11 May 2011

Lessons from the coal face

I've been having a few problems with css3pie lately, but it's not their fault. I really should have read the issues page. All I can say is, despite sizing using em everywhere else, use pixels with items using css3pie.

And on to improving my HTML template. There is an excellent template at http://html5boilerplate.com, but it's a bit too big for me and I also like to get as many updates as I can without physically going to get them.

It does however, contain this line of code.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

It forces Internet Explorer to get the latest rendering engine, thus make your pages work more reliably in the terrible browser. Of course, if you asked most people which browser they use, they'll say Google or Facebook. That's where we are, so there's no point in being upset about them not using Chrome or Firefox.

And so here is my new standard HTML page. As soon as Google start hosting version 3 of Yui, I'll include that, but I can't be bothered to chase the version numbers at this stage.

<!DOCTYPE html>

<head>

<title>Sharing data from the Facebook API</title>

<!--[if IE]>

<![endif]-->

<style>

body

{

font-family:Sans-serif;

line-height:1.5em;

}

</style>

google.load("jquery", "1");

google.load("jqueryui", "1");

</script>

$(document).ready(function()

{

});

</script>

</head>

<body>

<header><h1>Header 1</h1></header>

<p>Hello World!</p>

</section>

<footer>Footer</footer>

</body>

</html>

Wednesday, 25 August 2010

Simple layout #2

Here is the second design template. There is no real content area. I've left it down to you how you want the main content to display.

See demo.

Well, here goes:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky footer</title>
<style type="text/css">
html, body
{
font-family:Sans-serif;
height:100%;
margin: 0 auto;
color:#000000;
}
#container
{
height:70%;
}
#background
{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
h1
{
margin-left:120px;
font-size:4em;
font-weight:lighter;
color:#FFFFFF;
}
#footer
{
height:30%;
clear:both;
background:#A3A3A3;
color:#FFFFFF;
opacity:0.6;
filter:alpha(opacity=60);
}
#nav
{
text-align: center;
background:#000000;
height:40px;
width:100%;
opacity:0.9;
filter:alpha(opacity=90);
}
#nav ul
{
margin:0 auto;
width:920px;
}
#nav ul li
{
float:left;
list-style:none;
}
#nav ul li a
{
width: 100px;
   height:28px;
   padding-top:8px;
   padding-bottom:4px;
   padding-left:30px;
   padding-right:30px;
display: inline-block;
letter-spacing: normal;
white-space: normal;
text-align: normal;
vertical-align: middle;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li a:hover
{
background:#FF0000;
}
</style>
</head>
<body>
<img id="background" src="http://farm5.static.flickr.com/4089/4945221855_b1675bb80a.jpg" alt="Tiffany Camera 2" />
<br /><br />
<div id="container">
<h1>The Header</h1>
</div>
<div id="footer">
<div id="nav">
<ul>
<li><a href="#">First item</a></li>
<li><a href="#">Second item</a></li>
<li><a href="#">Third item</a></li>
</ul>
</div>
</div>
</body>
</html>

Wednesday, 11 August 2010

My HTML5 Template

Here is my HTML5 template. It also contains a few things I like to put in my pages.

See demo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" href="stylesheets/html5reset.css" />
<link rel="stylesheet" href="stylesheets/pageStyle.css" />
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="stylesheets/smalldevice.css" />
<link rel="stylesheet" href="stylesheets/printstyle.css" media="print" />
<link rel="shortcut icon" href="images/favicon.ico" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
WebFont.load(
{
google:
{
families: [ 'Tangerine', 'Cantarell', 'Yanone Kaffeesatz' ]
}
});
</script>
<script src="scripts/jQueryFunctions.js"></script>
<script src="scripts/html5functions.js"></script>
</head>
<body>
<div id="page">
<header>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<hgroup>
<h1>Page Header</h1>
<h2>Page Sub Heading</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<article>First article on left.
</article>
<article>
<canvas id="myDrawing" width="200" height="200">
<p>Your browser doesn't support canvas.</p>
</canvas>
</article>
</section>
<aside>
The stuff aside
<article class="yellowbox">
This is the text in the box.
</article>
</aside>
<footer>
footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
</footer>
</div>
</body>
</html>

Enjoy!