gel-grid
Version:
A flexible code implementation of the GEL Grid
858 lines (815 loc) • 34.7 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>