Responsive Web Design with jQuery Grids
Responsive Web Design page with Ignite UI jQuery Hierarchical Grid and Twitter Bootstrap
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://cdn-na.infragistics.com/jquery/20131/latest/js/infragistics.loader.js"></script>
<a href="#main" id="A_3">Skip to main content</a>
<div id="DIV_4">
</div>
<header id="HEADER_5">
<nav id="NAV_6">
<div id="DIV_7">
<div id="DIV_8">
<a href="https://slack.com/" id="A_9"></a>
<svg id="svg_10">
<g id="g_11">
<path id="path_12">
</path>
<g id="g_13">
<path id="path_14">
</path>
<path id="path_15">
</path>
<path id="path_16">
</path>
</g>
</g>
</svg>
<svg id="svg_17">
<path id="path_18">
</path>
<path id="path_19">
</path>
<path id="path_20">
</path>
<path id="path_21">
</path>
<path id="path_22">
</path>
<path id="path_23">
</path>
<path id="path_24">
</path>
<path id="path_25">
</path>
<path id="path_26">
</path>
</svg>
</div>
<ul id="UL_27">
<li id="LI_28">
<span id="SPAN_29">Why Slack?</span>
<nav id="NAV_30">
<small id="SMALL_31">About the Product</small>
<div id="DIV_32">
<a href="https://slack.com/features" id="A_33">How it works</a> <a href="https://slack.com/security" id="A_34">Security</a> <a href="https://slack.com/customer-stories" id="A_35">Customers</a> <a href="https://slack.com/enterprise" id="A_36">Enterprise</a>
</div>
</nav>
</li>
<li id="LI_37">
<span id="SPAN_38">Solutions</span>
<nav id="NAV_39">
<small id="SMALL_40">Slack for every team</small>
<div id="DIV_41">
<a href="https://slack.com/solutions/engineering" id="A_42">Engineering</a> <a href="https://slack.com/solutions/sales" id="A_43">Sales</a> <a href="https://slack.com/solutions/information-technology" id="A_44">IT</a> <a href="https://slack.com/solutions/marketing"...
CSS
#BODY_1 {
box-sizing: border-box;
color: rgb(50, 54, 72);
display: flex;
height: 5803.44px;
max-width: 100%;
min-height: 546px;
text-decoration: none solid rgb(50, 54, 72);
text-size-adjust: 100%;
width: 1905px;
column-rule-color: rgb(50, 54, 72);
perspective-origin: 952.5px 2901.72px;
transform-origin: 952.5px 2901.72px;
caret-color: rgb(50, 54, 72);
border: 0px none rgb(50, 54, 72);
flex-flow: column nowrap;
font: normal normal 400 normal 16px / normal Slack-Averta, appleLogo, sans-serif;
margin: 0px;
outline: rgb(50, 54, 72) none 0px;
overflow: hidden auto;
}/*#BODY_1*/
#BODY_1:after {
box-sizing: border-box;
color: rgb(50, 54, 72);
display: block;
text-decoration: none solid rgb(50, 54, 72);
text-size-adjust: 100%;
column-rule-color: rgb(50, 54, 72);
caret-color: rgb(50, 54, 72);
border: 0px none rgb(50, 54, 72);
font: normal normal 400 normal 16px / normal Slack-Averta, appleLogo, sans-serif;
outline: rgb(50, 54, 72) none 0px;
}/*#BODY_1:after*/
#BODY_1:before {
box-sizing: border-box;
color: rgb(50, 54, 72);
display: block;
text-decoration: none solid rgb(50, 54, 72);
text-size-adjust: 100%;
column-rule-color: rgb(50, 54, 72);
caret-color: rgb(50, 54, 72);
border: 0px none rgb(50, 54, 72);
font: normal normal 400 normal 16px / normal Slack-Averta, appleLogo, sans-serif;
outline: rgb(50, 54, 72) none 0px;
}/*#BODY_1:before*/
#IFRAME_2 {
bottom: 546px;
box-sizing: border-box;
color: rgb(50, 54, 72);
display: block;
height: 0px;
left: -2000px;
position: absolute;
right: 3905px;
text-decoration: none solid rgb(50, 54, 72);
text-size-adjust: 100%;
top: 0px;
width: 0px;
column-rule-color: rgb(50, 54, 72);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(50, 54, 72);
border: 0px none rgb(50, 54, 72);
font: normal...