Skip to content

Instantly share code, notes, and snippets.

@thedannywahl

thedannywahl/index.html

Created March 16, 2013 02:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thedannywahl/5174598 to your computer and use it in GitHub Desktop.
Save thedannywahl/5174598 to your computer and use it in GitHub Desktop.
Download ZIP
A bootstrap for moodle demo with header, custommenu, navbar, content, and footer for 5 layouts
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>content first in bootstrap (em)</title>
<meta charset=utf-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name=viewport content="width=device-width">
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
<style type="text/css">
/* 1 Column View (Default) */
body {
/* override bootstrap for consistency */
font-size: 100%;
line-height: 100%;
margin: 2.5em;
}
#page-content {
overflow: hidden;
}
#region-main-box,
#region-post-box {
clear: both;
float: none;
position: relative;
width: 100%;
}
#region-main,
#region-pre,
#region-post {
position: relative;
}
#region-main {
background: #DDD;
}
#region-pre {
background: #CCC;
}
#region-post {
background: #EEE;
}
.region-content {
padding: 1em;
}
.side-pre-only #region-post,
.side-post-only #region-pre,
.content-only #region-pre,
.content-only #region-post {
width: 0;
height: 0;
visibility: hidden;
display: none;
}
.content-only #region-main {
margin-left: 0;
margin-right: 0;
}
/* 2 Column View */
@media screen and (min-width:30.063em) {
#page-content {
background: #DDD;
}
#region-main-box {
left: 0;
width: 200%;
}
#region-post-box {
left: 50%;
margin-left: 0;
width: 100%;
}
#region-main-wrap {
float: right;
position: relative;
right: 100%;
width: 50%;
}
#region-main {
margin-left: 12.5em;
margin-right: 0;
}
#region-pre {
float: left;
left: 0;
margin-left: -50%;
width: 12.5em;
}
#region-post {
clear: left;
float: left;
left: 0;
margin-left: -50%;
width: 12.5em;
}
}
/* 3 Column View */
@media screen and (min-width:48.063em) {
#page-content {
background: #CCC;
}
#region-main-box {
left: 12.5em;
float: left;
background: #DDD;
}
#region-post-box {
float: left;
margin-left: -25em;
background: #CCC;
}
#region-main-wrap {
background: transparent;
}
#region-main {
margin-left: 25em;
}
#region-pre {
left: 12.5em;
}
#region-post {
clear: none;
margin-left: 0;
}
.side-pre-only #region-post-box {
margin-left: -12.5em;
}
.side-pre-only #region-main {
margin-left: 12.5em;
}
.side-pre-only #region-pre {
left: 0;
}
.side-post-only #region-main-box {
left: 0;
}
.side-post-only #region-post-box {
margin-left: -12.5em;
}
.side-post-only #region-main {
margin-left: 12.5em;
}
.content-only #region-main-box {
left: 0;
}
.content-only #region-post-box {
margin-left: 0;
}
}
.dir-rtl {
direction: ltr;
}
.dir-rtl .region-content {
direction: rtl;
}
/* Only need this for this demo */
#page-content {
margin-bottom: 20px;
}
</style>
</head>
<body>
<header class="hero-unit">
<h1>content first in bootstrap (em)</h1>
<h2>sample moodle layouts with content first</h2>
<p>Resize the screen, and the sections will always be before the aside.</p>
<p>Every <code>section</code> represents a moodle page rendering, with 5 page styles in total</p>
</header>
<main id="page">
<section>
<header id="page-header" class="clearfix">
<h3 class="headermain pull-left">side-pre and side-post</h3>
<div class="headermenu pull-right">You are not logged in.</div>
</header>
<nav id="custommenu" class="navbar clearfix">
<div class="navbar-inner">
<a class="brand" href="#">Project name</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li><a href="#">Library</a> <span class="divider">/</span></li>
<li class="active">Data</li>
</ul>
<div id="page-content">
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap"><!-- Column 1 start -->
<section id="region-main">
<div class="region-content">
section
</div>
</section>
</div><!-- Column 1 end -->
<aside id="region-pre"><!-- Column 2 start -->
<div class="region-content">
aside (left)
</div>
</aside><!-- Column 2 end -->
<aside id="region-post"><!-- Column 3 start -->
<div class="region-content">
aside (right)
</div>
</aside><!-- Column 3 end -->
</div><!-- region-post-box end -->
</div><!-- region-main-box end -->
</div><!-- page-content end -->
<footer id="page-footer" class="well well-small">
<p class="helplink">Help link</p>
</footer>
</section>
<hr>
<section class="side-pre-only">
<h3>side-pre-only</h3>
<div id="page-content">
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap"><!-- Column 1 start -->
<section id="region-main">
<div class="region-content">
section
</div>
</section>
</div><!-- Column 1 end -->
<aside id="region-pre"><!-- Column 2 start -->
<div class="region-content">
aside (left)
</div>
</aside><!-- Column 2 end -->
<aside id="region-post"><!-- Column 3 start -->
<div class="region-content">
aside (right)
</div>
</aside><!-- Column 3 end -->
</div><!-- region-post-box end -->
</div><!-- region-main-box end -->
</div><!-- page-content end -->
</section>
<hr>
<section class="side-post-only">
<h3>side-post-only</h3>
<div id="page-content">
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap"><!-- Column 1 start -->
<section id="region-main">
<div class="region-content">
section
</div>
</section>
</div><!-- Column 1 end -->
<aside id="region-pre"><!-- Column 2 start -->
<div class="region-content">
aside (left)
</div>
</aside><!-- Column 2 end -->
<aside id="region-post"><!-- Column 3 start -->
<div class="region-content">
aside (right)
</div>
</aside><!-- Column 3 end -->
</div><!-- region-post-box end -->
</div><!-- region-main-box end -->
</div><!-- page-content end -->
</section>
<hr>
<section class="content-only">
<h3>content-only</h3>
<div id="page-content">
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap"><!-- Column 1 start -->
<section id="region-main">
<div class="region-content">
section
</div>
</section>
</div><!-- Column 1 end -->
<aside id="region-pre"><!-- Column 2 start -->
<div class="region-content">
aside (left)
</div>
</aside><!-- Column 2 end -->
<aside id="region-post"><!-- Column 3 start -->
<div class="region-content">
aside (right)
</div>
</aside><!-- Column 3 end -->
</div><!-- region-post-box end -->
</div><!-- region-main-box end -->
</div><!-- page-content end -->
</section>
<hr>
<section class="dir-rtl">
<h3>rtl</h3>
<div id="page-content">
<div id="region-main-box">
<div id="region-post-box">
<div id="region-main-wrap"><!-- Column 1 start -->
<section id="region-main">
<div class="region-content">
section
</div>
</section>
</div><!-- Column 1 end -->
<aside id="region-pre"><!-- Column 2 start -->
<div class="region-content">
aside (left)
</div>
</aside><!-- Column 2 end -->
<aside id="region-post"><!-- Column 3 start -->
<div class="region-content">
aside (right)
</div>
</aside><!-- Column 3 end -->
</div><!-- region-post-box end -->
</div><!-- region-main-box end -->
</div><!-- page-content end -->
</section>
<hr>
</main>
<footer>
view the source, its pretty simple.
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment