<div id="page" class="site relative z-10 bg-black">
<header id="site-header" class="c-header absolute pin-t z-50 pin-l w-full md:py-0 md:flex md:items-center md:justify-end" data-bg-item>
<a href="/" class="c-header__logo text-black absolute pin-l z-50 px-1-5 md:px-2 lg:px-3">
<span class="u-vh">Our Name is Mud</span>
<i class="icon icon--ui-logo">
<svg>
<use class="no-barba pointer-events-none" xlink:href="#ui-logo"></use>
</svg>
</i>
</a>
<a id="nav-btn" href="#site-menu" data-menu-opener class="o-burger block md:hidden absolute pin-r mr-1-25 z-20 c-nav__btn lg:hidden">
<span class="u-vh">Open Menu</span>
<span class="o-burger__slice o-burger__slice--top absolute h-px bg-white"></span>
<span class="o-burger__slice o-burger__slice--bot absolute h-px bg-white"></span>
</a>
<nav id="site-menu" role="navigation" aria-label="Main menu" class="z-10 px-1-5 pt-7 pin-l pin-t w-full fixed min-h-screen invisible opacity-0 pointer-events-none md:px-2 md:my-0 md:p-0 md:min-h-px md:relative md:pin-r md:opacity-100 md:visible md:pointer-events-auto lg:px-3">
<div id="site-menu-inner" class="w-full md:flex md:items-center md:flex-row md:p-0 md:justify-end">
<ul class="list-reset mb-5 md:mb-0 md:flex">
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 md:mr-1-25 mb-1 md:mb-0">
<a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/listing"><span class="">Projects</span></a>
</li>
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 mb-1 md:mb-0">
<a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/about"><span class="">About</span></a>
</li>
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 mb-1 md:mb-0">
<a class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/journal"><span class="">Journal</span></a>
</li>
<li role="menuitem" class="c-nav__item text-ms6 md:text-ms1 mb-1 md:mb-0">
<a id="contact-link" data-contact-link class="c-nav__link linkee block no-underline md:py-1 md:px-1 md:relative text-white font-bold leading-none" href="/components/preview/contact"><span class="">Contact</span></a>
</li>
</ul>
<div class="md:hidden">
<a class="block text-white no-underline font-light text-sm" href="tel:01225 471 465">01225 471 465</a>
<a class="block text-white no-underline font-light text-sm" href="mailto:hello@ournameismud.co.uk">hello@ournameismud.co.uk</a>
<a class="block text-white no-underline font-light text-sm" href="{ twitter }}">@asclearasmud</a>
</div>
</div>
</nav>
</header>
<div id="container" class="trans">
<main id="barba-wrapper" class="w-full bg-white trans overflow-hidden">
<div class="barba-container">
<div class="c-hero relative mb-2">
<div class="absolute pin c-hero__clip bg-black c-hero__clip--post bg-gradient overflow-hidden bg-black">
<svg class="absolute pin" style="overflow: visible" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 792.478" data-lines data-spon-track="true">
<linearGradient id='grad1'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
<linearGradient id='grad2'>
<stop stop-color='#28BBDE'/>
<stop data-stop-color offset='90%' stop-color='#1C1E4B'/>
</linearGradient>
<linearGradient id='grad3'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='70%' stop-color='#ffffff'/>
</linearGradient>
<linearGradient id='grad4'>
<stop stop-color='#671EB8'/>
<stop data-stop-color offset='70%' stop-color='#1C1E4B'/>
</linearGradient>
<path data-speed="-0.11" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M-98.445 775.219L498.527 641.47S315.03 329.936 307.692 325.043l-348.834-82.68" />
<path data-speed="-0.23" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M482.056-40.886l187.645 176L1118.879-46.19"/>
<path data-speed="-0.21" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad3)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M766.701 898.364c3-3 393-701.005 396-699.005s284 362.005 284 362.005l233-48.003" />
<path data-speed="-0.11" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#grad4)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1707.701 319.364l-405 173-45 386"/>
</svg>
</div>
<div class="relative z-10">
<div class="px-1-5 md:px-2 lg:px-3 lg:w-su-18/24 max-w-post mx-auto">
<h1 class="text-h2 font-light mb-1-5 xl:mb-2 text-white">Super-powered layouts with CSS Variables + CSS Grid</h1>
<div class="w-full relative image-container" style="padding-top: 60%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w" alt="Dyoung Header 1" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w"
alt="Dyoung Header 1" />
</div>
</div>
</div>
</div>
<article class="px-1-5 md:px-2 lg:px-3 mx-auto lg:w-su-18/24 mb-5 lg:mb-8 xl:mb-12 max-w-post">
<header class="mb-2 xl:mb-3 md:flex md:justify-between">
<div class="c-author flex items-center">
<div class="hidden md:block md:mr-1">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="lazyload " data-src="https://mud-assets.imgix.net/team//michelle.jpg?auto=format%2Ccompress&fit=max&q=93&w=60" alt="Michelle" width="60" height="60" />
</div>
<dl class="p-0 m-0">
<dt class="hidden">Author:</dt>
<dd class="m-0 mb-0-25 p-0 text-sm leading-none text-blue font-bold">Michelle Barker</dd>
<dt class="hidden">Job Title:</dt>
<dd class="m-0 p-0 text-sm leading-none text-black font-light">Front-end developer</dd>
</dl>
</div>
<div class="c-meta flex items-center mb-1">
<time class="text-black font-regular text-sm mr-auto md:mr-1">11th April, 2018</time>
<a href="https://www.facebook.com/sharer.php?u=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid" class="c-meta__item block text-blue mr-1">
<span class="u-vh">Share on facebook</span>
<i class="icon icon--ui-facebook">
<svg>
<use class="no-barba pointer-events-none" xlink:href="#ui-facebook"></use>
</svg>
</i>
</a>
<a href="https://twitter.com/intent/tweet?url=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid&text=Super-powered layouts with CSS Variables + CSS Grid" class="c-meta__item block text-blue">
<span class="u-vh">Share on twitter</span>
<i class="icon icon--ui-twitter">
<svg>
<use class="no-barba pointer-events-none" xlink:href="#ui-twitter"></use>
</svg>
</i>
</a>
</div>
</header>
<div class="s-content overflow-hidden" data-behaviour="CodeSnippet">
<div class="text-intro font-light mb-1 md:mb-2">
<p>We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout solution for the web - hacking it
with floats and flexbox was just how we did things. But now, I honestly cannot imagine life without Grid!</p>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<p>One thing that’s only come to my full attention more recently is <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS Variables</a> (or Custom Properties). CSS Variables work a bit like variables
in Sass and other preprocessors. The main difference is they’re compiled in the browser, unlike preprocessor variables, which are compiled into fixed CSS values before they hit the browser. CSS Variables are true dynamic
variables that can be updated on the fly, either in your stylesheet or with JavaScript, which makes them super versatile. If you’re familiar with Javascript, I like to think of the difference between preprocessor variables
and CSS Variables as similar to the difference between <code>const</code> and <code>let</code> - they both serve different purposes.</p>
<p>CSS Variables can have a whole host of useful applications (such as theming, for one). One way I’ve been looking at making use of CSS Variables recently is in layouts using CSS Grid where I need to redefine my <code>grid-template-rows</code> and <code>grid-template-columns</code> properties
at different breakpoints. Here’s an example in the following pen, where I’ve used Sass variables to define my small and large column widths, which I’m passing into the <code>grid-template-rows</code> property. I’m doing
the same with the <code>grid-gap</code> property, so that my gutters increase in size for each breakpoint:<br /></p>
</div>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<p>As you can see, I basically have to write out the entire block of code again within the media query in order to pass in the second variable, as the variable is fixed once defined. (I could of course use a mixin, but the
net effect is the same - a bigger chunk of code.)</p>
<p>With CSS Variables I can down on the amount of code, as I can simply update my variable inside the media query and the browser recalculates my grid. Ten lines of (Sass) code may not seem like a huge saving, but the code
is so much more readable - instead of having to add media queries in several places to deal with our new variables I can just declare them at the beginning of the code for that component and not have to worry about
making sure I’ve replaced every value where it’s being used:</p>
</div>
</div>
<div class="mb-1-5 md:mb-2">
<figure>
<div class="mb-1-5">
<div class="w-full relative image-container" style="padding-top: 44.2647058824%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w" alt="Screen Shot 2018 04 11 At 09 57 52" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w"
alt="Screen Shot 2018 04 11 At 09 57 52" />
</div>
</div>
</figure>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<p>One thing I’ve found with using CSS Grid is the syntax is quite verbose and it’s not always simple to see exactly what’s going on quickly and easily, especially with a complex grid. But using CSS Variables in this example
I can set variables for the size and co-ordinates of Grid items and only write out the grid-column and grid-row properties once. This to me is a lot clearer than writing the full properties out every time, and very
easy to see at a glance where we’re placing any grid item.</p>
</div>
</div>
<div class="mb-1-5 md:mb-2">
<figure>
<div class="mb-1-5">
<div class="w-full relative image-container" style="padding-top: 44.2647058824%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w" alt="Screen Shot 2018 04 11 At 09 57 52" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w"
alt="Screen Shot 2018 04 11 At 09 57 52" />
</div>
</div>
</figure>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<p>Things get even more interesting when we add JavaScript into the mix! In the example above I’m using JavaScript to loop over the grid items and update the variables with a random value (within our grid parameters) each
time the button is clicked. No added classes or extra CSS needed! (Please note, this is a work-in-progress proof-of-concept, don’t judge my JS ;) )</p>
<p>In the example below I’m using user inputs to dynamically change our grid items. All that's getting updated here are the three variables for the x and y coordinates and the size of the grid item.</p>
</div>
</div>
<div class="mb-1-5 md:mb-2">
<figure>
<div class="mb-1-5">
<div class="w-full relative image-container" style="padding-top: 44.2647058824%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w" alt="Screen Shot 2018 04 11 At 09 57 52" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w"
alt="Screen Shot 2018 04 11 At 09 57 52" />
</div>
</div>
</figure>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<h2>Browser support</h2>
<p>At the moment CSS Variables are supported in 88% of browsers worldwide – Internet Explorer 11 and below being the obvious exception. That’s roughly the same as support for Grid Layout, which means it’s fairly simple to
test for support using feature queries.</p>
<p>You can use an <code>@supports</code> declaration like this to test for support for CSS Variables:</p>
</div>
</div>
<div class="mb-1-5 md:mb-2">
<figure>
<div class="mb-1-5">
<div class="w-full relative image-container" style="padding-top: 44.2647058824%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w" alt="Screen Shot 2018 04 11 At 09 57 52" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w"
alt="Screen Shot 2018 04 11 At 09 57 52" />
</div>
</div>
</figure>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<p>Things get even more interesting when we add JavaScript into the mix! In the example above I’m using JavaScript to loop over the grid items and update the variables with a random value (within our grid parameters) each
time the button is clicked. No added classes or extra CSS needed! (Please note, this is a work-in-progress proof-of-concept, don’t judge my JS ;) )<br /></p>
<p>In the example below I’m using user inputs to dynamically change our grid items. All that's getting updated here are the three variables for the x and y coordinates and the size of the grid item.</p>
</div>
</div>
<div class="mb-1-5 md:mb-2">
<figure>
<div class="mb-1-5">
<div class="w-full relative image-container" style="padding-top: 34.4165435746%">
<noscript>
<img class="absolute pin object-fit w-full h-full" src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=768" srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1354w" alt="Screen Shot 2018 04 11 At 10 17 46" />
</noscript>
<img class="lazyload absolute pin object-fit w-full h-full " src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=768"
data-srcset="https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1354w"
alt="Screen Shot 2018 04 11 At 10 17 46" />
</div>
</div>
<figcaption class="border-b border-grey pb-1">
<h5 class="text-lg mb-1"></h5>
<p class="font-light text-sm">(See this example pen by SitePoint)
</p>
</figcaption>
</figure>
</div>
<div class="mb-1-5 md:mb-2">
<iframe height='265' scrolling='no' title='CSS Variables + CSS Grid experiment (in progress)' src='//codepen.io/michellebarker/embed/xWPyWj/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true'
style='width: 100%;'>See the Pen <a href='https://codepen.io/michellebarker/pen/xWPyWj/'>CSS Variables + CSS Grid experiment (in progress)</a> by Michelle Barker (<a href='https://codepen.io/michellebarker'>@michellebarker</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
</div>
<div class="mb-1-5 md:mb-2">
<pre data-snippet data-language="">
<code class="language-">.grid {
display: grid;
grid-template-columns: repeat(var(--gridSize), 1fr);
grid-template-rows: repeat(var(--gridSize), 1fr);
border: 1px solid grey;
width: 90vw;
height: 90vw;
margin: 100px auto;
@media (min-width: 960px) {
width: 33vw;
height: 33vw;
}
}</code>
</pre>
<div class="font-light text-sm">CSS Snippet</div>
</div>
<div class="mb-1-5 md:mb-2">
<div class="text-lg font-light">
<p>I hope this gives you a little taste of what's possible with CSS Variables!<br /></p>
</div>
</div>
</div>
</article>
</div>
</main>
</div>
<footer class="c-footer pt-6 pb-0 md:pt-8 xl:pt-14 bg-black text-white text-h4 font-light relative overflow-hidden z-100">
<svg class="absolute pin z-0" style="overflow: visible" data-lines xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1622.963 571.563">
<linearGradient id='cta-grad1'>
<stop stop-color='#0e0f26'/>
<stop data-stop-color offset='30%' stop-color='#671eb8'/>
</linearGradient>
<linearGradient id='cta-grad2'>
<stop stop-color='#28BBDE'/>
<stop data-stop-color offset='50%' stop-color='#1C1E4B'/>
<stop data-stop-color offset='90%' stop-color='#28BBDE'/>
</linearGradient>
<path data-speed="-0.29" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#cta-grad1)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1042.044 1.971l227.612 334.075 515.797-310.067"/>
<path data-speed="-0.67" class="opacity-0" data-spon-track data-path fill="none" stroke="url(#cta-grad2)" stroke-opacity="0.7" stroke-miterlimit="10" stroke-width="9" d="M1669.292 21.926L913.734 237.454 3.211 2336.1"/>
</svg>
<div class="px-1-5 md:px-2 lg:px-3 xl:wrapper relative z-10">
<div class="lg:w-su-17/24 xl:w-su-13/24 mb-5 lg:mb-7 c-cta">
<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, drop us a line. We’re always happy to chat.</p>
</div>
<div class="pb-4 md:flex md:items-start">
<address class="text-white font-light text-xs whitespace-pre-line mb-2 md:mb-0 md:mr-2 lg:mr-4">5 Princes Buildings
Bath
BA1 2ED</address>
<dl class="flex flex-col items-start justify-start mb-2 md:mb-0">
<dt class="u-vh">Tel</dt>
<dd>
<a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="tel:01225 471 465"><span>01225 471 465</span></a>
</dd>
<dt class="u-vh">Email</dt>
<dd>
<a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="mailto:hello@ournameismud.co.uk"><span>hello@ournameismud.co.uk</span></a>
</dd>
<dt class="u-vh"></dt>
<dd>
<a class="block text-white linkee linkee--sm no-underline font-light text-xs" href="https://twitter.com/intent/tweet?url=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid&text=Super-powered layouts with CSS Variables + CSS Grid"><span>@asclearasmud</span></a>
</dd>
</dl>
<p class="text-white text-xs font-light md:ml-auto text-right">© 2018 Our Name is Mud <br /><span class="opacity-50">Company No. 8589415</span></p>
</div>
</div>
</footer>
</div>
<div class="c-draw hidden fixed pin-t pin-r h-screen w-full max-w-md bg-black z-0 p-1 md:p-3 xl:p-3 overflow-auto">
<h2 class="text-h3 text-white mb-1-5 font-light">Super-powered layouts with CSS Variables + CSS Grid</h2>
<div class="text-white text-body mb-3"></div>
<ul class="list-reset">
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Call us</h2>
<a href="tel:01225 471 465" class="inline-flex font-bold text-body text-blue linkee"><span>01225 471 465</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">General enquiries</h2>
<a href="mailto:hello@ournameismud.co.uk" class="inline-flex font-bold text-body text-blue linkee"><span>hello@ournameismud.co.uk</span></a>
</li>
<li class="mb-1">
<h2 class="text-h6 mb-0-5 text-white">Follow</h2>
<a target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?url=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid&text=Super-powered layouts with CSS Variables + CSS Grid" class="inline-flex font-bold text-body text-blue linkee"><span>@asclearasmud</span></a>
</li>
<li>
<h2 class="text-h6 mb-0-5 text-white">Visit us</h2>
<address class="block font-light text-body text-white mb-1-5">5 Princes Buildings
Bath
BA1 2ED</address>
<a href="https://goo.gl/maps/S6RQRy8kSQT2" class="o-btn text-sm flex flex-no-wrap justify-end relative items-center text-white" target="_blank">
<span class="o-btn__line h-px flex-1 mr-0-5 w-full bg-currentColor opacity-25 block"></span>
<span class="block ml-auto mr-0 whitespace-no-wrap">View on Google Maps</span>
</a>
</li>
</ul>
</div>
<div id="cursor">
<div id="c1"></div>
</div>
{% import '@helpers' as h %}
{% extends craft.app.config.general.custom.wrapper ~ '_layout.twig' %}
{% block critical_css %}
<!-- build:critical-->
<!-- endbuild -->
{% endblock %}
{% block content %}
<div class="barba-container">
{% if related|length %}
{% include '@related--posts' with { posts: related } %}
{% endif %}
{% include '@hero--post' with hero %}
<article class="px-1-5 md:px-2 lg:px-3 mx-auto lg:w-su-18/24 mb-5 lg:mb-8 xl:mb-12 max-w-post">
<header class="mb-2 xl:mb-3 md:flex md:justify-between">
{% include '@author' with author %}
{% include '@meta' with { date: date, url: url, facebook: facebook, twitter: twitter } %}
</header>
<div class="s-content overflow-hidden" {{ h.codesnippet(blocks) }}>
<div class="text-intro font-light mb-1 md:mb-2">{{ intro|raw }}</div>
{% for block in blocks %}
<div class="mb-1-5 md:mb-2">
{% if block.type == 'text' %}
<div class="text-lg font-light">{{ block.body|raw }}</div>
{% endif %}
{% if block.type == 'quote' %}
<blockquote class="py-1 text-h4 font-bold">{{ block.body|raw }}</blockquote>
{% endif %}
{% if block.type == 'figure' and block.style == 'full' %}
<figure>
<div class="mb-1-5">
{{ h.srcset(block.image) }}
</div>
{% if block.heading|length or block.caption|length %}
<figcaption class="border-b border-grey pb-1">
<h5 class="text-lg mb-1">{{ block.heading }}</h5>
<p class="font-light text-sm">{{ block.caption|raw }}</p>
</figcaption>
{% endif %}
</figure>
{% endif %}
{% if block.type == 'figure' and block.style == 'split' %}
<figure class="pb-1 lg:flex lg:justify-between lg:items-start">
<div class="mb-1 lg:mb-0 lg:w-su-12/24">
{{ h.srcset(block.image) }}
</div>
{% if block.heading|length or block.caption|length %}
<figcaption class="border-b border-grey pb-1 lg:w-su-10/24">
<h5 class="text-lg mb-1">{{ block.heading }}</h5>
<p class="font-light text-sm">{{ block.caption|raw }}</p>
</figcaption>
{% endif %}
</figure>
{% endif %}
{% if block.type == 'embed' %}
{{ block.code|raw }}
{% endif %}
{% if block.type == 'snippet' %}
<pre data-snippet data-language="{{ block.language }}">
<code class="language-{{ block.language }}">{{ block.snippet }}</code>
</pre>
{% if block.caption %}
<div class="font-light text-sm">{{ block.caption|raw }}</div>
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
</article>
</div>
{% endblock %}
{
"siteTitle": "Mudstone Component Library",
"craft": {
"app": {
"config": {
"general": {
"custom": {
"wrapper": "/wrapper/"
}
}
}
}
},
"tel": "01225 471 465",
"phone": "01225 471 465",
"email": "hello@ournameismud.co.uk",
"twitter": "https://twitter.com/intent/tweet?url=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid&text=Super-powered layouts with CSS Variables + CSS Grid",
"copyright": "© 2018 Our Name is Mud",
"siteUrl": "/components/preview/home",
"address": "5 Princes Buildings \nBath \nBA1 2ED",
"cta": "<p>We love to talk digital. So if there’s a project that you’re itching to start or you just want to introduce yourself, drop us a line. We’re always happy to chat.</p>",
"entries": [
{
"title": "Projects",
"url": "/components/preview/listing"
},
{
"title": "About",
"url": "/components/preview/about"
},
{
"title": "Journal",
"url": "/components/preview/journal"
},
{
"title": "Contact",
"url": "/components/preview/contact"
}
],
"related": [],
"hero": {
"image": {
"url": "https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 60,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/hero//dyoung_header_1.jpg?auto=format%2Ccompress&fit=max&q=93&w=1600 1600w",
"alt": "Dyoung Header 1"
},
"facebook": "https://www.facebook.com/sharer.php?u=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid",
"twitter": "https://twitter.com/intent/tweet?url=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid&text=Super-powered layouts with CSS Variables + CSS Grid",
"url": "#",
"heading": "Super-powered layouts with CSS Variables + CSS Grid"
},
"author": {
"name": "Michelle Barker",
"position": "Front-end developer",
"image": {
"url": "https://mud-assets.imgix.net/team//michelle.jpg?auto=format%2Ccompress&fit=max&q=93&w=60",
"aspect": 100,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/team//michelle.jpg?auto=format%2Ccompress&fit=max&q=93&w=60 60w, https://mud-assets.imgix.net/team//michelle.jpg?auto=format%2Ccompress&fit=max&q=93&w=120 120w",
"alt": "Michelle"
}
},
"intro": "<p>We’ve been using CSS Grid in production at Mud for a few months now and I absolutely love the flexibility it’s giving me when coding layout. For so long we've got along without a true layout solution for the web - hacking it with floats and flexbox was just how we did things. But now, I honestly cannot imagine life without Grid!</p>",
"blocks": [
{
"type": "text",
"body": "<p>One thing that’s only come to my full attention more recently is <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables\">CSS Variables</a> (or Custom Properties). CSS Variables work a bit like variables in Sass and other preprocessors. The main difference is they’re compiled in the browser, unlike preprocessor variables, which are compiled into fixed CSS values before they hit the browser. CSS Variables are true dynamic variables that can be updated on the fly, either in your stylesheet or with JavaScript, which makes them super versatile. If you’re familiar with Javascript, I like to think of the difference between preprocessor variables and CSS Variables as similar to the difference between <code>const</code> and <code>let</code> - they both serve different purposes.</p>\n<p>CSS Variables can have a whole host of useful applications (such as theming, for one). One way I’ve been looking at making use of CSS Variables recently is in layouts using CSS Grid where I need to redefine my <code>grid-template-rows</code> and <code>grid-template-columns</code> properties at different breakpoints. Here’s an example in the following pen, where I’ve used Sass variables to define my small and large column widths, which I’m passing into the <code>grid-template-rows</code> property. I’m doing the same with the <code>grid-gap</code> property, so that my gutters increase in size for each breakpoint:<br /></p>"
},
{
"type": "text",
"body": "<p>As you can see, I basically have to write out the entire block of code again within the media query in order to pass in the second variable, as the variable is fixed once defined. (I could of course use a mixin, but the net effect is the same - a bigger chunk of code.)</p>\n<p>With CSS Variables I can down on the amount of code, as I can simply update my variable inside the media query and the browser recalculates my grid. Ten lines of (Sass) code may not seem like a huge saving, but the code is so much more readable - instead of having to add media queries in several places to deal with our new variables I can just declare them at the beginning of the code for that component and not have to worry about making sure I’ve replaced every value where it’s being used:</p>"
},
{
"type": "figure",
"style": "full",
"image": {
"url": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 44.2647058824,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w",
"alt": "Screen Shot 2018 04 11 At 09 57 52"
},
"heading": null,
"caption": null
},
{
"type": "text",
"body": "<p>One thing I’ve found with using CSS Grid is the syntax is quite verbose and it’s not always simple to see exactly what’s going on quickly and easily, especially with a complex grid. But using CSS Variables in this example I can set variables for the size and co-ordinates of Grid items and only write out the grid-column and grid-row properties once. This to me is a lot clearer than writing the full properties out every time, and very easy to see at a glance where we’re placing any grid item.</p>"
},
{
"type": "figure",
"style": "full",
"image": {
"url": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 44.2647058824,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w",
"alt": "Screen Shot 2018 04 11 At 09 57 52"
},
"heading": null,
"caption": null
},
{
"type": "text",
"body": "<p>Things get even more interesting when we add JavaScript into the mix! In the example above I’m using JavaScript to loop over the grid items and update the variables with a random value (within our grid parameters) each time the button is clicked. No added classes or extra CSS needed! (Please note, this is a work-in-progress proof-of-concept, don’t judge my JS ;) )</p>\n<p>In the example below I’m using user inputs to dynamically change our grid items. All that's getting updated here are the three variables for the x and y coordinates and the size of the grid item.</p>"
},
{
"type": "figure",
"style": "full",
"image": {
"url": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 44.2647058824,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w",
"alt": "Screen Shot 2018 04 11 At 09 57 52"
},
"heading": null,
"caption": null
},
{
"type": "text",
"body": "<h2>Browser support</h2>\n<p>At the moment CSS Variables are supported in 88% of browsers worldwide – Internet Explorer 11 and below being the obvious exception. That’s roughly the same as support for Grid Layout, which means it’s fairly simple to test for support using feature queries.</p>\n<p>You can use an <code>@supports</code> declaration like this to test for support for CSS Variables:</p>"
},
{
"type": "figure",
"style": "full",
"image": {
"url": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 44.2647058824,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-09.57.52.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1360w",
"alt": "Screen Shot 2018 04 11 At 09 57 52"
},
"heading": null,
"caption": null
},
{
"type": "text",
"body": "<p>Things get even more interesting when we add JavaScript into the mix! In the example above I’m using JavaScript to loop over the grid items and update the variables with a random value (within our grid parameters) each time the button is clicked. No added classes or extra CSS needed! (Please note, this is a work-in-progress proof-of-concept, don’t judge my JS ;) )<br /></p>\n<p>In the example below I’m using user inputs to dynamically change our grid items. All that's getting updated here are the three variables for the x and y coordinates and the size of the grid item.</p>"
},
{
"type": "figure",
"style": "full",
"image": {
"url": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=768",
"aspect": 34.4165435746,
"src": "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271%27%20height%3D%271%27%20style%3D%27background%3Atransparent%27%2F%3E",
"srcset": "https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=768 768w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=1024 1024w, https://mud-assets.imgix.net/media/Screen-Shot-2018-04-11-at-10.17.46.png?auto=format%2Ccompress&fit=max&q=93&w=1600 1354w",
"alt": "Screen Shot 2018 04 11 At 10 17 46"
},
"heading": null,
"caption": "(See this example pen by SitePoint)\n"
},
{
"type": "embed",
"code": "<iframe height='265' scrolling='no' title='CSS Variables + CSS Grid experiment (in progress)' src='//codepen.io/michellebarker/embed/xWPyWj/?height=265&theme-id=0&default-tab=js,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/michellebarker/pen/xWPyWj/'>CSS Variables + CSS Grid experiment (in progress)</a> by Michelle Barker (<a href='https://codepen.io/michellebarker'>@michellebarker</a>) on <a href='https://codepen.io'>CodePen</a>.\n</iframe>"
},
{
"type": "snippet",
"snippet": ".grid {\n display: grid;\n grid-template-columns: repeat(var(--gridSize), 1fr);\n grid-template-rows: repeat(var(--gridSize), 1fr);\n border: 1px solid grey;\n width: 90vw;\n height: 90vw;\n margin: 100px auto;\n \n @media (min-width: 960px) {\n width: 33vw;\n height: 33vw;\n }\n}",
"language": null,
"caption": "CSS Snippet"
},
{
"type": "text",
"body": "<p>I hope this gives you a little taste of what's possible with CSS Variables!<br /></p>"
}
],
"date": "11th April, 2018",
"url": "#",
"facebook": "https://www.facebook.com/sharer.php?u=http://localhost:3000/journal/super-powered-layouts-with-css-variables-css-grid"
}
There are no notes for this item.