gel-grid
Version:
A flexible code implementation of the GEL Grid
635 lines (590 loc) • 34 kB
HTML
<html class="no-js b-pw-1280" dir="ltr">
<head>
<meta charset="utf-8" />
<title>GEL Grid Demo | BBC GEL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script>var GEL = { mustard: false };</script>
<script>
GEL.mustard = (function () {
return (
'addEventListener' in window &&
'querySelector' in window.document &&
'localStorage' in window
);
})();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script>
if (GEL.mustard) {
document.write('<link rel="stylesheet" id="stylesheet" href="assets/css/gel-demo-enhanced.css" />');
} else {
document.write('<link rel="stylesheet" id="stylesheet" href="assets/css/gel-demo-base.css" />');
}
</script>
<noscript>
<link rel="stylesheet" href="assets/css/gel-demo-base.css" />
</noscript>
</head>
<body>
<!-- GEL Demos Header -->
<div class="gel-demo">
<header role="banner" class="gel-c-demo-header">
<div class="gel-c-demo-header__banner">
<div class="gel-wrap gs-u-clearfix">
<div class="gel-c-demo-header__brand">
<a class="gel-c-demo-header__brand-logo" href="https://www.bbc.co.uk/gel">
<svg aria-label="BBC GEL Logo" width="164" height="39">
<title>BBC GEL Logo</title>
<image xlink:href="assets/images/bbc-gel-logo.svg" src="assets/images/bbc-gel-logo.png" width="100%" height="100%"></image>
</svg>
</a>
<i class="gel-c-demo-header__brand-beta gel-minion-bold">Beta</i>
</div>
<a class="gel-c-demo-header__banner-button gel-o-button gel-long-primer-bold" href="https://www.bbc.co.uk/gel/guidelines/typography">
Go to BBC GEL
</a>
</div>
</div>
<div class="gel-c-demo-header__intro">
<div class="gel-wrap">
<div class="gel-layout">
<div class="gel-layout__item gel-3/4@l">
<h1 class="gs-u-mb gel-canon-bold">Grid</h1>
<p>This is a working demo of the <a href="https://www.bbc.co.uk/gel/guidelines/grid">GEL Grid Guidelines</a>. The demo shows how our flexible, percentage-based grid works and how you can use it to create a BBC website.</p>
</div>
</div>
</div>
</div>
</header>
<main role="main" class="gs-u-pb++">
<div class="gel-wrap">
<div class="gel-layout gel-layout--center">
<div class="gel-layout__item gel-10/12@xxl">
<div class="gel-c-demo-controls gel-grid-controls">
<p class="gel-double-pica gs-u-mb">Your device is currently using:</p>
<p class="gel-c-grid-controls__group-name gel-great-primer gs-u-mb-"></p>
<p class="gel-c-grid-controls__margin-gutter-size gel-brevier"></p>
<div class="gel-c-demo-controls__options gel-brevier-bold">
<button class="gel-c-demo-controls__option gel-c-grid-controls__option-toggle" id="rtl-toggle">Toggle RTL On</button>
<button class="gel-c-demo-controls__option gel-c-grid-controls__option-toggle" id="overlay-toggle">Toggle Grid Overlay On</button>
</div>
</div>
</div>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Nested Grid Examples</h2>
<div class="gel-c-grid-demo-promo">
<div class="gel-layout gel-layout--no-flex">
<div class="gel-layout__item gel-3/4@l gel-3/5@xxl gs-u-fl@l">
<div class="gel-c-grid-demo-promo__image">
<div class="gs-o-responsive-image gs-o-responsive-image--16by9">
<img src="http://ichef.bbci.co.uk/news/976/cpsprodpb/71B2/production/_89960192_epa_tributes.jpg" alt="Promo Image Placeholder" />
</div>
</div>
</div><!--
--><div class="gel-layout__item gel-2/3@m gel-1/4@l gel-2/5@xxl">
<div class="gel-c-grid-demo-promo__body gs-u-mt+@m gs-u-pt gs-u-pt0@m">
<div>
<h2 class="gel-pica-bold">Orlando gunman 'had grudge in his heart'</h2>
<p class="gel-long-primer gs-u-mt gs-u-display-none gs-u-display-block@m">The father of the gunman who killed 50 people in an Orlando gay club says his son had a "grudge in his heart".</p>
</div>
<ul class="gs-o-list-inline gs-o-list-inline--divided gel-brevier gs-u-mt+">
<li class="qa-timestamp">
<span class="gs-o-bullet gs-o-bullet-">
<span class="gs-o-bullet__icon gel-icon">
<svg viewBox="0 0 32 32">
<path d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"></path>
<circle id="pulse" cx="16" cy="16" r="8.5"></circle>
</svg>
</span><!--
--><span class="gs-o-bullet__text">1m</span>
</span>
</li><!--
--><li class="qa-section-tag">
<span class="gs-o-section-tag gel-brevier">
<span class="gs-u-vh">From the section </span>
<a href="/sport/tennis">US & Canada</a>
</span>
</li>
</ul>
</div>
</div><!--
--><div class="gel-layout__item gel-1/3@m gel-1/4@l gel-1/5@xxl gs-u-fr@xxl">
<div class="live_promo promo__item gs-u-mt+">
<ol class="lx-c-key-points">
<li class="lx-c-key-points__item lead_key-points_headline">
<a class="lx-c-key-points__link gs-o-media" href="#">
<div class="gs-o-media__img">
<span class="gs-o-bullet gs-o-bullet-">
<span class="gs-o-bullet__icon gel-icon">
<svg viewBox="0 0 32 32">
<path d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"></path>
<circle id="pulse" cx="16" cy="16" r="8.5"></circle>
</svg>
</span><!--
--><span class="gs-o-bullet__text">Live</span>
</span>
</div>
<div class="gs-o-media__body">
<span class="lx-c-key-points__text gel-pica-bold">Orlando nightclub shooting</span>
</div>
</a>
</li>
<li class="lx-c-key-points__item">
<a class="lx-c-key-points__link gs-o-media" href="#">
<div class="gs-o-media__img">
<div class="icon icon--type icon--keypoints">
</div>
</div>
<div class="gs-o-media__body">
<span class="lx-c-key-points__text gel-brevier">
<time timestamp="{insert-time-stamp}" class="lx-c-key-points__timestamp">12m</time> Forty-nine people killed in attack on gay nightclub
</span>
</div>
</a>
</li>
<li class="lx-c-key-points__item">
<a class="lx-c-key-points__link gs-o-media" href="#">
<div class="gs-o-media__img">
<div class="icon icon--type icon--keypoints">
</div>
</div>
<div class="gs-o-media__body">
<span class="lx-c-key-points__text gel-brevier">
<time timestamp="{insert-time-stamp}" class="lx-c-key-points__timestamp">22m</time> Suspect took hostages and died in gunfight with Swat officers
</span>
</div>
</a>
</li>
</ol>
</div>
</div><!--
--><div class="gel-layout__item gel-1/5@xxl">
<ul class="see-also promo__item gs-u-mt+ gel-layout">
<li class="bullets see-also__item gel-layout__item gel-1/2 gel-1/3@m gel-1/1@xxl gs-u-mb">
<a class="title-link" href="#">
<span class="title-link__title-text gel-brevier-bold">Gunman's father's grief</span>
</a>
</li><!--
--><li class="bullets see-also__item gel-layout__item gel-1/2 gel-1/3@m gel-1/1@xxl gs-u-mb">
<a class="title-link" href="#">
<span class="title-link__title-text gel-brevier-bold">Killer's ex-wife speaks out</span>
</a>
</li><!--
--><li class="bullets see-also__item gel-layout__item gel-1/2 gel-1/3@m gel-1/1@xxl gs-u-mb">
<a class="title-link" href="#">
<span class="title-link__title-text gel-brevier-bold">Who was Omar Mateen?</span>
</a>
</li><!--
--><li class="bullets see-also__item gel-layout__item gel-1/2 gel-1/3@m gel-1/1@xxl gs-u-mb">
<a class="title-link" href="#">
<span class="title-link__title-text gel-brevier-bold">US gun companies see share price rise</span>
</a>
</li><!--
--><li class="bullets see-also__item gel-layout__item gel-1/2 gel-1/3@m gel-1/1@xxl gs-u-mb">
<a class="title-link" href="#">
<span class="title-link__title-text gel-brevier-bold">Orlando shooting: Full report</span>
</a>
</li><!--
--><li class="bullets see-also__item gel-layout__item gel-1/2 gel-1/3@m gel-1/1@xxl gs-u-mb">
<a class="title-link" href="#">
<span class="title-link__title-text gel-brevier-bold">Eyewitness accounts in Orlando shooting</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Sizes</h2>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">100% (Whole)</p>
</div><!--
--><div class="gel-layout__item">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">50% (Halves)</p>
</div><!--
--><div class="gel-layout__item gel-1/2">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/2">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">33.333% (Thirds)</p>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">25% (Quarters)</p>
</div><!--
--><div class="gel-layout__item gel-1/4">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">20% (Fifths)</p>
</div><!--
--><div class="gel-layout__item gel-1/5">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/5">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/5">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/5">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/5">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">12.5% (Eighths)</p>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Example grid combinations</h2>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">Quarter / Three Quarters</p>
</div><!--
--><div class="gel-layout__item gel-1/4@xs">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-3/4@xs">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied at extra small (240px) devices and above.</p>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">Half / Quarter / Two Eighths</p>
</div><!--
--><div class="gel-layout__item gel-1/2@s">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4@s">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8@s">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/8@s">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied at small (400px) devices and above.</p>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">Two Thirds / Third</p>
</div><!--
--><div class="gel-layout__item gel-2/3@m">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3@m">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied at medium (600px) devices and above.</p>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb">Half / Three Sixths</p>
</div><!--
--><div class="gel-layout__item gel-1/2@l">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/2@l">
<div class="gel-layout gs-u-mt+ gs-u-mt0@l">
<div class="gel-layout__item gel-1/3@s">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3@s">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3@s">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied at large (900px) devices and above.</p>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Equal Height</h2>
<div class="gel-layout gel-layout--equal gs-u-mt+">
<div class="gel-layout__item gel-1/2">
<div class="gel-c-grid-demo-item gel-c-grid-demo-item--auto"></div>
</div><!--
--><div class="gel-layout__item gel-1/2">
<div class="gel-c-grid-demo-item gel-c-grid-demo-item--large"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--equal</code>. This option only works for browsers which support <code>flexbox</code></p>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Horizontal Alignment</h2>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item gel-1/2">
<p class="gel-pica gs-u-mb-">Left</p>
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gel-layout--center gs-u-mt+">
<div class="gel-layout__item gel-1/2">
<p class="gel-pica gs-u-mb-">Centre</p>
<div class="gel-c-grid-demo-item"></div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--center</code></p>
</div>
</div>
<div class="gel-layout gel-layout--right gs-u-mt+">
<div class="gel-layout__item gel-1/2">
<p class="gel-pica gs-u-mb-">Right</p>
<div class="gel-c-grid-demo-item"></div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--right</code></p>
</div>
</div>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Top Alignment</h2>
<div class="gel-layout gs-u-mt+">
<div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item gel-c-grid-demo-item--large"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Middle Alignment</h2>
<div class="gel-layout gel-layout--middle gs-u-mt+">
<div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item gel-c-grid-demo-item--large"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--middle</code></p>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Bottom Alignment</h2>
<div class="gel-layout gel-layout--bottom gs-u-mt+">
<div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item gel-c-grid-demo-item--large"></div>
</div><!--
--><div class="gel-layout__item gel-1/3">
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--bottom</code></p>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Reversed</h2>
<div class="gel-layout gel-layout--rev gs-u-mt+">
<div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">1</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">2</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">3</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">4</p>
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--rev</code></p>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Flush</h2>
<div class="gel-layout gel-layout--flush gs-u-mt+">
<div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">1</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">2</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">3</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item gel-1/4">
<p class="gel-pica gs-u-mb-">4</p>
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--flush</code></p>
</div>
<div class="gel-c-grid-demo-section">
<h2 class="gel-double-pica-bold">Fit</h2>
<div class="gel-layout gel-layout--fit gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb-">1</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item">
<p class="gel-pica gs-u-mb-">2</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item">
<p class="gel-pica gs-u-mb-">3</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item">
<p class="gel-pica gs-u-mb-">4</p>
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<div class="gel-layout gel-layout--fit gs-u-mt+">
<div class="gel-layout__item">
<p class="gel-pica gs-u-mb-">1</p>
<div class="gel-c-grid-demo-item"></div>
</div><!--
--><div class="gel-layout__item">
<p class="gel-pica gs-u-mb-">2</p>
<div class="gel-c-grid-demo-item"></div>
</div>
</div>
<p class="gel-c-grid-demo__summary gel-brevier">Applied with the class: <code>gel-layout--fit</code>. This option only works for browsers which support <code>flexbox</code></p>
</div>
</div>
</main>
</div>
<script>
function overlayTextToggle() {
var overlayToggle = document.getElementById('overlay-toggle');
overlayToggle.innerHTML === 'Toggle Grid Overlay On' ?
overlayToggle.innerHTML = 'Toggle Grid Overlay Off' : overlayToggle.innerHTML = 'Toggle Grid Overlay On';
}
function gridOverlay() {
if (document.getElementsByClassName("gel-grid-overlay").length) {
document.getElementsByClassName("gel-grid-overlay")[0].remove()
}
var e = "<div class=\"gel-grid-overlay__grid\"><div class=\"gel-grid-overlay__margin\" style=\"left: 0;\"></div>";
for (i = 0; i < 12; i++) {
e += "<div class=\"gel-grid-overlay__column\"><div class=\"gel-grid-overlay__column-fill\"></div></div>"
}
e += "<div class=\"gel-grid-overlay__margin\" style=\"right: 0;\"></div>";
e += "</div>";
var t = document.createElement("div");
t.className = "gel-grid-overlay";
t.innerHTML = e;
var n = document.createElement("style");
n.innerHTML = ".gel-grid-overlay * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;);}.gel-grid-overlay {z-index: 2147483647; position: fixed; height: 100%; width: 100%; left: 0; top: 0;}.gel-grid-overlay__grid {position: relative; width: 100%; height: 100%; max-width: 1008px; margin: 0 auto; padding: 0 4px;}.gel-grid-overlay__column {display: inline-block; height: 100%; width: 8.33333%; padding: 0 4px;}.gel-grid-overlay__column-fill {background: rgba(255,0,0,0.1); height: 100%;}.gel-grid-overlay__margin {display: inline-block; height: 100%; width: 8px; position: absolute; top: 0; background: rgba(0,255,0,0.1);}@media screen and (min-width: 400px) {.gel-grid-overlay__grid {padding: 0 12px;}.gel-grid-overlay__margin {width: 16px;}@media screen and (min-width: 600px) {.gel-grid-overlay__grid {padding: 0 8px;}.gel-grid-overlay__column {padding: 0 8px;}}@media screen and (min-width: 1280px) {.gel-grid-overlay__grid {max-width: 1280px;}}";
document.getElementsByTagName("head")[0].appendChild(n);
document.getElementsByTagName("body")[0].appendChild(t);
t.addEventListener("click", function() {
document.getElementsByClassName("gel-grid-overlay")[0].remove();
overlayTextToggle();
});
}
function toggleStyles() {
var html = document.querySelector('html');
var stylesheet = document.getElementById('stylesheet');
var rtlToggle = document.getElementById('rtl-toggle');
rtlToggle.innerHTML = (rtlToggle.innerHTML === 'Toggle RTL On') ?
'Toggle RTL Off' : 'Toggle RTL On';
if (stylesheet.getAttribute('href').indexOf('-rtl') > -1) {
if (GEL.mustard) {
stylesheet.setAttribute('href', 'assets/css/gel-demo-enhanced.css');
} else {
stylesheet.setAttribute('href', 'assets/css/gel-demo-base.css');
}
html.setAttribute('dir', 'ltr');
} else {
if (GEL.mustard) {
stylesheet.setAttribute('href', 'assets/css/gel-demo-enhanced-rtl.css');
} else {
stylesheet.setAttribute('href', 'assets/css/gel-demo-base-rtl.css');
}
html.setAttribute('dir', 'rtl');
}
}
(function() {
var overlayToggle = document.getElementById('overlay-toggle');
overlayToggle.addEventListener('click', function() {
gridOverlay();
overlayTextToggle();
});
var rtlToggle = document.getElementById('rtl-toggle');
rtlToggle.addEventListener('click', function() {
toggleStyles();
});
}());
</script>
</body>
</html>