This repository has been archived by the owner. It is now read-only.
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
65 lines (52 sloc) 1.97 KB
<!doctype html>
<!--[if lt IE 9]><html class="ie"><![endif]-->
<!--[if gte IE 9]><!--><html><!--<![endif]-->
The comment jumble above is handy for targeting old IE with CSS.
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Golden Grid System Demo</title>
<!-- Please don't add "maximum-scale=1" here. It's bad for accessibility. -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Feel free to split the CSS into separate files, if you like. -->
<link rel="stylesheet" href="GGS.css"/>
<!-- Here's Golden Gridlet, the grid overlay script. -->
<script src="GGS.js"></script>
This script enables structural HTML5 elements in old IE.
<!--[if lt IE 9]>
<script src="//"></script>
<body lang="en">
<!-- Demo code begins -->
<div class="wrapper">
<h1>A Golden Demonstration</h1>
Try resizing your browser or viewing this page on different devices. Use the icon in the upper right corner to see an overlay of the grid.
<article id="twoway">
<section class="wrapper">
<h3>A two-way split</h3>
These two blocks of text will float side by side with some empty columns on the sides on large screens. On medium-sized screens the empty columns will disappear, and on small screens the blocks will be stacked vertically.
<section class="wrapper">
<h3>By the way</h3>
If you're viewing this page on an iOS device, it might zoom in wonkily when you rotate your device. This is because of <a href="">a Mobile Safari bug</a>.
<!-- Demo code ends -->