Skip to content

Instantly share code, notes, and snippets.

@quintonwall

quintonwall/baseGE.page

Created November 6, 2013 17:10
Show Gist options
  • Save quintonwall/7340112 to your computer and use it in GitHub Desktop.
Save quintonwall/7340112 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
baseGE.page
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>IIDS: Multipage Boilerplate: Page 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../components/brandkit/favicon/favicon-144px.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../components/brandkit/favicon/favicon-114px.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../components/brandkit/favicon/favicon-72px.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="../../components/brandkit/favicon/favicon.png">
<link rel="icon" href="../../components/brandkit/favicon/favicon.ico">
<link href="../../css/iids.css" rel="stylesheet" type="text/css">
<link href="../../css/responsive.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<link id="theme-ie" href="../../css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
<script src="../../components/modernizr/modernizr.js"></script>
</head>
<body>
<!--
The navbar is where you place your primary page navigation.
By including the iids/js/iids.js file in your page and
adhering to this DOM/class structure your navbar becomes
collapsable. This improves the experience for users on
smaller screens.
-->
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#"><span class="ge-logo"></span> <span>My Application <small><i>powered by</i> GE Business</small></span></a>
<div class="pull-right">
<div class="btn-toolbar pull-left">
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" rel="tooltip" data-title="Alerts" data-placement="bottom" data-toggle="dropdown"><i class="icon-warning-sign"></i> 5</button>
<ul class="dropdown-menu pull-right message-list">
<li class="message-item">
<a href="#">
<span class="label label-important pull-left">Urgent</span>
<h4 class="message-title">Alert Type and Title</h4>
<p>This is a brief description or summary of the associated event that occured&hellip;<br/><time datetime="MM:DD:YYTHH:MM:SS" class="message-time">MM/DD/YY 12:05</time></p>
</a>
</li>
<li class="message-item">
<a href="#">
<span class="label label-warning pull-left">Moderate</span>
<h4 class="message-title">Alert Type and Title</h4>
<p>This is a brief description or summary of the associated event that occured&hellip;<br/><time datetime="MM:DD:YYTHH:MM:SS" class="message-time">MM/DD/YY 12:05</time></p>
</a>
</li>
<li class="message-item"><a href="#">View all alerts</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" rel="tooltip" data-title="Messages" data-placement="bottom" data-toggle="dropdown"><i class="icon-envelope-alt"></i></button>
<ul class="dropdown-menu pull-right message-list">
<li class="message-item empty">No unread messages</li>
<li class="message-item"><a href="#">View all messages</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><span class="user-name">Tom Edison</span> <i class="icon-chevron-down"></i></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>
<form class="navbar-search pull-left">
<div class="input-append">
<input type="search" class="input-medium search-query" data-toggle="dropdown" data-target=".navbar-search" /><button type="submit" class="btn btn-icon"><i class="icon-search"></i></button>
</div>
<div class="typeahead typeahead-faceted dropdown-menu pull-right">
<ul class="unstyled">
<li class="facet">
<div class="facet-name">Top Result</div>
<ul class="facet-results unstyled">
<li><a href="#"><strong>Ma</strong>ine</a></li>
</ul>
</li>
<li class="facet">
<div class="facet-name">States</div>
<ul class="facet-results unstyled">
<li><a href="#"><strong>Ma</strong>ine</a></li>
<li><a href="#"><strong>Ma</strong>ryland</a></li>
<li><a href="#"><strong>Ma</strong>ssachusetts</a></li>
<li><a href="#">Alaba<strong>ma</strong></a></li>
</ul>
</li>
<li class="facet">
<div class="facet-name">Cities</div>
<ul class="facet-results unstyled">
<li><a href="#"><strong>Ma</strong>bleton, GA</a></li>
<li><a href="#"><strong>Ma</strong>cedon, NY</a></li>
<li><a href="#"><strong>Ma</strong>cedonia, OH</a></li>
<li><a href="#"><strong>Ma</strong>chesney Park, IL</a></li>
<li><a href="#"><strong>Ma</strong>comb, IL</a></li>
</ul>
</li>
<li><a href="#">View All Results</a></li>
</ul>
</div>
</form>
<button class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</button>
</div>
</div>
</div>
<!--
<div class="primary-navbar nav-collapse">
<div class="container">
<ul class="nav">
<li class="active"><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
</ul>
</div>
</div>
-->
</div>
<!-- This container will hold our primary page content. -->
<div class="container">
<!--
<div class="page-header">
<h1 class="voice voice-brand pull-left"></h1>
</div>
-->
<!--
To demonstrate the responsive grid we've split the page into
two parts, a sidebar and a primary content area. To create
vertical separation you use .row classes. To create horizontal
separation you use .span* classes inside of .row classes.
-->
<div class="row">
<div class="span4">
<!--
Modules are unique to the IIDS. They offer a prestylized,
modular container. Good for sections and widgets.
-->
<section class="module sidebar"> <!-- Our sidebar -->
<header class="module-header">
<h3>Hello there!</h3>
</header>
<div class="module-body" id="modulebodymsg">
<p>
I don't look like a Visualforce page, but I am. It's really just a container to run anything.
</p>
<div class="progress progress-success">
<div class="bar"></div>
</div>
</div>
</section>
</div>
<div class="span8">
<section class="module primary-content"> <!-- Our primary content -->
<header class="module-header">
<h2>Time to update with JavaScript</h2>
</header>
<div class="module-body">
<apex:form>
<label>Project Details</label>
<input type="text" id="projectdetails"/>
<label>Discussions</label>
<input type="text" id="discussion"/>
<label>Please select the Rig Type</label>
<apex:inputField value="{!Rig__c.Rig_Type__c}" id="rigtype"/>
</apex:form>
<a href="#" class="btn btn-primary" onclick="saveRig();">Save Rig</a>
</div>
</section>
</div>
</div>
</div>
<!--
Scripts, with the exception of modernizr, go at the bottom of the page
to improve load time.
-->
<script src="../../components/requirejs/require.js"></script>
<script src="../../js/require.config.js"></script>
<script type="text/javascript">
require.config({
baseUrl: '../../'
});
require(['iids', './js/app/main2.js']);
</script>
<script src="../../components/respond/respond.src.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment