<p>Published on <a href="https://blog.prototypr.io/draw-skeleton-backgrounds-with-sass-2c1b1017d2d0?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Raphael </p>
<p>Empty State Skeletons are basically placeholders giving an immediately visible idea for content that is not present at the moment.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/963/1*uixC3UBaVdCBKXITShDaQg.png">Skeleton view of Slack while loading.</p>
<p>This technique is used by a companies like <a href="https://slack.com">Slack</a>, Medium or Facebook to give an illusion of time. While the content is not loaded, the user sees the content already and its not a <a href="https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/">passive waiting time</a>.</p>
<p>A good article about this topic is <a href="https://www.smashingmagazine.com/2015/11/why-performance-matters-part-2-perception-management/">Perception Management via Smashing Magazine</a>.</p>
<h3>How can this done?</h3>
<p>A detailed example how to <a href="https://css-tricks.com/building-skeleton-screens-css-custom-properties/">build skeleton screens is available on css-tricks</a>. There are multiple possibilities to draw skeletons with CSS:</p>
<ul>
<li>Use inline <em>SVG background image or multiple backgrounds</em>. While its important to be inlined, otherwise a network delay will destroy the effect.</li>
<li>Use <em>::before</em> and <em>::after-pseudo</em> elements with css-shapes<br />(Gallery with a lot of examples: <a href="http://enjoycss.com/gallery/#box">http://enjoycss.com/gallery/</a>)</li>
<li>Use <em>multiple background gradients</em> that simulates blocks and circles</li>
</ul>
<p>I’m sure there are tons of other methods to achieve this,<strong> and I am more than curious finding other methods in the comments section below. </strong>In this article we will focus on the third method using multiple background gradients simulating blocks and circles.</p>
<h3>Why background gradients?</h3>
<p>Gradients can be used to define multiple backgrounds while simple colors can’t. Using gradients as backgrounds gives you limited shapes <em>— basically rectangles with</em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient"><em> linear-gradient</em></a><em> and circles with </em><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient"><em>radial-gradient</em></a><em> —</em> together they can be combined to a powerful outcome.</p>
<p>This method also is pretty lightweight and can be compressed easily because of repeating patterns. (<a href="http://www.infinitepartitions.com/art001.html">How gzip algorithm works</a>)</p>
<p>GPU accelerated animations are possible as well when using background gradients.</p>
<p>Although all the pros — there is at least one downside. Manually creating and orchestrating multiple backgrounds can be painful. If we look at a simple example like:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/311/1*4S_eCGwI9aJRxS-dWqoFxw.png">Skeleton for a simple “Profile” element<img alt="" src="https://cdn-images-1.medium.com/max/935/1*cZk55-t3IrgEZHrJ69emUQ.png">Managing all these magic numbers could be quite hard</p>
<h3>Automize and simplify with Sass</h3>
<p>Luckily there is a helper available to<a href="https://github.com/wildhaber/empty-state"> draw and manage multiple backgrounds using Sass</a>.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/600/1*U24T84r08Oqp2UVEea4-Ng.png"><a href="https://github.com/wildhaber/empty-state">https://github.com/wildhaber/empty-state</a></p>
<blockquote><p><a href="https://www.npmjs.com/package/empty-state">empty-state</a> is a collection of Sass mixins and functions to simplify the process drawing empty state skeleton backgrounds. These states are often used to provide an indication how the content that is loading is looking and it will be replaced when content is loaded.</p></blockquote>
<p>To install this empty-state skeleton builder you you can run:</p>
<pre>npm install empty-state --save</pre>
<p>Then import the mixins in your Sass file like:</p>
<pre>@import '~empty-state/skeleton';</pre>
<p>The base concept of empty-state can be seen as:</p>
<ol>
<li>Create a list of shapes<br /><em>circle, circle-outline, rect, rect-outline, lines</em></li>
<li>Pass the list of shapes in a mixin called <em>skeleton($shapes…)</em></li>
<li>skeleton() generates the background-properties</li>
</ol>
<h3>Drawing functions and mixins</h3>
<p>Empty-state provided the following shapes to draw:</p>
<h4><strong>A simple rectangle with rect</strong></h4>
<pre>rect(<br>    $color,<br>    $width,<br>    $height,<br>    $x,<br>    $y<br>)</pre>
<p>Example:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/476/1*_oLbc9hNKA_ANseifCHVfA.png">rect(yellowgreen, 100%, 12px, 0px, 0px)<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/6f908c9a2fbc889029028dd9cb5a91ba/href">https://medium.com/media/6f908c9a2fbc889029028dd9cb5a91ba/href</a></iframe></p>
<h4><strong>An outlined rectangle with rect-outline</strong></h4>
<pre>rect-outline(<br>    $color,<br>    $width,<br>    $height,<br>    $x,<br>    $y,<br><strong>$outline: 1px,<br>    $fill: #ffffff</strong><br>)</pre>
<p>Please note that the return of rect-outline is a list of two shapes, one for the outline and another one for the inner rectangle that simulates an inner empty.</p>
<p>Example:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/477/1*FHksqnqpsaWfQgiBESpkcQ.png">rect-outline(orange, 100%, 20px, 0px, 0px, 2px, white)<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/92d941c89273a741a7df215c518a89bd/href">https://medium.com/media/92d941c89273a741a7df215c518a89bd/href</a></iframe></p>
<h4>Drawing a circle</h4>
<pre>circle(<br>    $color,<br>    $diameter,<br>    $x,<br>    $y<br>)</pre>
<p>Example:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/78/1*W6ObpjEVYHZV3U7NrtuiHw.png">circle(deeppink, 60px, 0, 0)<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/1c0c302b92e7c767ca63fc35d9e4619a/href">https://medium.com/media/1c0c302b92e7c767ca63fc35d9e4619a/href</a></iframe></p>
<blockquote><p>Note: The diameter is de-facto just a radius, since the radial gradient will just be draw until 50% and change to transparent color then.</p></blockquote>
<h4>Drawing an outlined circle</h4>
<pre>circle-outline(<br>    $color,<br>    $diameter,<br>    $x,<br>    $y,<br>    $outline: 1px,<br>    $fill : #ffffff<br>)</pre>
<p>Example:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/98/1*IS6JoQ39ghRutcpQXXJChg.png">circle-outline(darkblue, 60px, center, 20px, 4px)<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/c9c20ff4f477978b74a7369382b3f015/href">https://medium.com/media/c9c20ff4f477978b74a7369382b3f015/href</a></iframe></p>
<blockquote><p>Note: Here we use the three-dots at the end to destruct the list to an argslist in Sass.</p></blockquote>
<h4>Multiple lines interface</h4>
<pre>lines(<br>    $count: 3,<br>    $color: #fcfcfc,<br>    $width: 100%,<br>    $height: 10px,<br>    $gutter: 10px,<br>    $x: 0,<br>    $y: 0,<br>    $lastWidth: 100%,<br>    $outline: false,<br>    $outline-width: 1px,<br>    $outline-fill: #ffffff<br>)</pre>
<p>Example:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/477/1*eDIEBi4VMsHBsHsNWKn81A.png">lines(15, #D8D8D8, 100%, 12px, 7px, 0px, 0px);<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/4b39e56f758a32925cd35a4213e1cc63/href">https://medium.com/media/4b39e56f758a32925cd35a4213e1cc63/href</a></iframe></p>
<p>Example when last line is not a full block:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/478/1*sB0HQjgrjugO05aDN3lyWA.png">lines(4, #444444, 100%, 12px, 7px, 0px, 0px, 70%)<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/000863eecb2437875ef26cbdb2a957f6/href">https://medium.com/media/000863eecb2437875ef26cbdb2a957f6/href</a></iframe></p>
<p>Set outlines:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/482/1*Lbfzm_FR4Yx2R05ibetrZg.png">lines(3, #123456, 100%, 30px, 10px, center, 0px, 90%, true, 4px, #ffffff)<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/fb9f19bea31b0e053ef31b54cc3f5737/href">https://medium.com/media/fb9f19bea31b0e053ef31b54cc3f5737/href</a></iframe></p>
<blockquote><p>Note: In this last example we have used <strong>center</strong> as x-parameter this way we simply center the shapes.</p></blockquote>
<h4>Include custom background shapes</h4>
<p>You can create custom backgrounds simply by using the <strong>shape</strong>-Function</p>
<pre>shape(<br>    $background,<br>    $background-size,<br>    $background-position<br>)</pre>
<p>Example:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/397/1*HpBiGD7QqP4nxdOPfdXczg.png">the red star is added by a custom shape: shape(url(‘https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg&#8217;), (40px 40px), (center 0))<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/3d0f3f029588d35cda437bd617f1e5d3/href">https://medium.com/media/3d0f3f029588d35cda437bd617f1e5d3/href</a></iframe></p>
<blockquote><p>Note: In the example we have used an external reference as a background. In a real usage we recommend to use a Data-URI having a delay free rendering.</p></blockquote>
<h3>Lets go a bit fancier drawing a skeleton for a video</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/681/1*zTUuVYrjgFmiAZUQ55-F9Q.png">To illustrate that you can go much fancier than just simple lines 🙂<iframe width="0" height="0" frameborder="0"><a href="https://medium.com/media/b73e6bb225243d06c0e93b9f5aae8e31/href">https://medium.com/media/b73e6bb225243d06c0e93b9f5aae8e31/href</a></iframe><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fwildhaber%2Fembed%2Fpreview%2FdVpgmG%3Fheight%3D600%26slug-hash%3DdVpgmG%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2Fwildhaber%2Fpen%2FdVpgmG&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F1491855.dVpgmG.small.eb4dd0b8-b4d4-43f9-85b0-0a53fe7c8bc9.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/dd4c719906fb9334b657725a9159f502/href">https://medium.com/media/dd4c719906fb9334b657725a9159f502/href</a></iframe></p>
<h3>Good to know</h3>
<ul>
<li>Backgrounds are stacked in the reversed direction of z-index. So the second background is behind the first background.</li>
<li>Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:empty"><strong>:empty</strong>-selector</a> for skeletons when you inject content to the element</li>
<li>Since these are backgrounds, you will have to ensure the element has a given width (if not a block-element) and height.</li>
<li>Use media-queries to make the backgrounds responsive</li>
</ul>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=2c1b1017d2d0" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/draw-skeleton-backgrounds-with-sass-2c1b1017d2d0">Draw Skeleton Backgrounds with Sass</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Draw Skeleton Backgrounds with Sass

Top Stories