CSS Scroll Snap Slide Deck That Helps Reside Coding

Digital conferences have modified the sport by way of how a presenter is ready to ship content material to an viewers. At a dwell occasion it’s seemingly you simply have your laptop computer, however at dwelling, you will have a number of screens so as to transfer round home windows and make off-screen adjustments when delivering dwell coding demos. Nonetheless, as some occasions return to in-person, chances are you’ll be in the same boat as me questioning learn how to convey an equal expertise to a dwell venue.

With a little bit of creativity utilizing native internet performance and fashionable CSS, like CSS scroll snap, we’ll be constructing a no-JavaScript slide deck that permits dwell modifying of CSS demos. The ultimate deck might be responsive and shareable, due to residing within a CodePen.

To make this slide deck, we’ll study:

CSS scroll snap, counters, and grid layoutThe contenteditable attributeUsing customized properties and HSL for themingGradient textStyling the <fashion> factor

Slide templates

When making a slide deck of a bunch of various slides, it’s seemingly that you simply’ll want totally different varieties of slides. So we’ll create these three important templates:

Textual content: open for any textual content you have to embodyTitle: emphasizing a headline to interrupt up sections of content materialDemo: break up structure with a code block and the preview

HTML templates

Let’s begin creating our HTML. We’ll use an ordered record with the ID of slides and go forward and populate a textual content and title slide.

Every slide is without doubt one of the record parts with the category of slide, in addition to a modifier class to point the template kind. For these text-based slides, we’ve nested a <div> with the category of content material after which added a little bit of boilerplate textual content.

<ol id=”slides”>
<li class=”slide slide–text”>
<div class=”content material”>
<h1>Presentation Title</h1>
<p>Introduced by Your Identify</p>
<p><a goal=”_blank” href=”<https://twitter.com/5t3ph>”>@5t3ph</a></p>
</div>
</li>
<li class=”slide slide–title”>
<div class=”content material”>
<h2>Matter 1</h2>
</div>
</li>
</ol>

We’re utilizing goal=”_blank” on the hyperlink on account of CodePen utilizing iframes for the preview, so it’s essential to “escape” the iframe and cargo the hyperlink.

Base types

Subsequent, we’ll start so as to add some types. In case you are utilizing CodePen, these types assume you’re not loading one of many resets. Our reset wipes out margin and ensures the <physique> factor takes up the full out there peak, which is all we actually want right here. And, we’ll make a primary font stack replace.

* {
margin: 0;
box-sizing: border-box;
}

physique {
min-height: 100vh;
font-family: system-ui, sans-serif;
font-size: 1.5rem;
}

Subsequent, we’ll outline that every one our main structure parts will use a CSS grid, take away record styling from #slides, and make every slide take up the scale of the viewport. Lastly, we’ll use the place-content shorthand to middle the slide–text and slide–title slide content material.

physique,
#slides,
.slide {
show: grid;
}

#slides {
list-style: none;
padding: 0;
margin: 0;
}

.slide {
width: 100vw;
peak: 100vh;
}

.slide–text,
.slide–title {
place-content: middle;
}

Then, we’ll add some light-weight textual content types. Since that is meant to be a presentation with one massive level being made at a time, versus an article-like format, we’ll bump the bottom font-size to 2rem. Make sure you modify this worth as you take a look at out your remaining slides in full display screen. You could determine it feels too small in your content material versus your presentation viewport dimension.

h1, h2 {
line-height: 1.1;
}

a {
colour: inherit;
}

.content material {
padding: 2rem;
font-size: 2rem;
line-height: 1.5;
}

.content material * + * {
margin-top: 0.5em;
}

.slide–text .content material {
max-width: 40ch;
}

At this level, we’ve some giant textual content centered inside a container the scale of the viewport. Let’s add a contact of colour by making a easy theme system.

We’ll be utilizing the hsl colour house for the theme whereas setting a customized property of –theme-hue and –theme-saturation. The hue worth of 230 corresponds to a blue. For ease of use, we’ll then mix these into the –theme-hs worth to drop into cases of hsl.

:root {
–theme-hue: 230;
–theme-saturation: 85%;
–theme-hs: var(–theme-hue), var(–theme-saturation);
}

We are able to modify the lightness values for backgrounds and textual content. The slides will really feel cohesive since they are going to be tints of that base hue.

Again in our most important <physique> fashion, we will apply this concept to create a really gentle model of the colour for a background, and a darkish model for the textual content.

physique {
/* … present types */
background-color: hsl(var(–theme-hs), 95%);
colour: hsl(var(–theme-hs), 25%);
}

Let’s additionally give .slide–title a little bit bit of additional pizazz by including a delicate gradient background.

.slide–title {
background-image:
linear-gradient(125deg,
hsl(var(–theme-hs), 95%),
hsl(var(–theme-hs), 75%)
);
}

Demo slide template

Our demo slide breaks the mould up to now and requires two most important parts:

a .fashion container round an inline <fashion> factor with precise written types that you simply intend to each be seen on display screen and apply to the demoa .demo container to carry the demo preview with no matter markup is acceptable for that

If you happen to’re utilizing CodePen to create this deck, you’ll wish to replace the “Habits” setting to show off “Format on Save.” It’s because we don’t need additional tabs/areas previous to the types block. Precisely why will develop into clear in a second.

Right here’s our demo slide content material:

<li class=”slide slide–demo”>
<div class=”fashion”>
<fashion contenteditable=”true”>
.modern-container {
–container-width: 40ch;

width: min(
var(–container-width), 100% – 3rem
);
margin-inline: auto;
}
</fashion>
</div>
<div class=”demo”>
<div class=”modern-container”>
<div class=”field”>container</div>
</div>
</div>
</li>

Word that additional contenteditable=”true” attribute on the <fashion> block . It is a native HTML function that permits you to mark any factor as editable. It isn’t a alternative for type inputs and textareas and sometimes requires JavaScript for extra full-featured performance. However for our functions, it’s the magic that allows “dwell” coding. In the end, we’ll be capable of make adjustments to the content material in right here and the fashion adjustments will apply instantly. Fairly fancy, maintain tight.

Nonetheless, in case you view this up to now, you gained’t see the fashion block displayed. You will note the end result of the .modern-container demo types are being utilized, although.

One other related observe right here is that HTML5 included validating a <fashion> block anyplace; not simply within the <head>.

What we’re going to do subsequent will really feel unusual, however we will really use show properties on <fashion> to make it seen. We’ve positioned it inside one other container to make use of a little bit additional positioning for it and make it a resizable space. Then, we’ve set the <fashion> factor itself to show: block and utilized properties to provide it a code editor appear and feel.

.fashion {
show: grid;
align-items: middle;
background-color: hsl(var(–theme-hs), 5%);
padding-inline: max(5vw, 2rem) 3rem;
font-size: 1.35rem;
overflow-y: hidden;
resize: horizontal;
}

fashion {
show: block;
define: none;
font-family: Consolas, Monaco, “Andale Mono”, “Ubuntu Mono”, monospace;
colour: hsl(var(–theme-hs), 85%);
background: none;
white-space: pre;
line-height: 1.65;
tab-size: 2;
hyphens: none;
}

Then, we have to create the .slide–demo rule and use CSS grid to show the types and demo, side-by-side. As a reminder, we’ve already arrange the bottom .slide class to make use of grid, so now we’ll create a rule for grid-template-columns only for this template.

.slide–demo {
grid-template-columns: fit-content(85ch) 1fr;
}

If you happen to’re unfamiliar with the grid perform fit-content(), it permits a component to make use of its intrinsic width up till the utmost worth outlined within the perform. So, this rule says the fashion block can develop to a most of 85ch extensive. When your <fashion> content material is slim, the column will solely be as extensive because it must be. That is very nice visually because it gained’t create additional horizontal house whereas nonetheless finally capping the allowed width.

To spherical out this template, we’ll add some padding for the .demo. You might have additionally observed that additional class inside the demo of .field. It is a conference I like to make use of for demos to offer a visible of factor boundaries when the scale and place of one thing are necessary.

.demo {
padding: 2rem;
}

.field {
background-color: hsl(var(–theme-hs), 85%);
border: 2px dashed;
border-radius: .5em;
padding: 1rem;
font-size: 1.35rem;
text-align: middle;
}

Right here’s the results of our code template:

Reside-editing performance

Interacting with the displayed types will really replace the preview! Moreover, since we created the .fashion container as a resizable space, you may seize the resize deal with within the decrease proper to develop and shrink the preview space as wanted.

The one caveat for our live-editing skill is that browsers deal with it in a different way.

Firefox: This supplies the perfect outcome because it permits each altering the loaded types and full performance of including new properties and even new guidelines.Chromium and Safari: These enable altering values in loaded types, however not including new properties or new guidelines.

As a presenter, you’ll seemingly wish to use Firefox. As for viewers using the presentation hyperlink, they’ll nonetheless be capable of get the intention of your slides and shouldn’t have points with the show (until their browser doesn’t help your demoed code). However outdoors of Firefox, they could be unable to govern the demos as absolutely as chances are you’ll present in your presentation.

You could wish to “Fork” your completed presentation pen and really take away the editable conduct on <fashion> blocks and as a substitute show remaining variations of your demos types, as relevant.

Reminder: types you embody in demos can probably have an effect on slide structure and different demos! You could wish to scope demo types beneath a slide-specific class to forestall unintended fashion adjustments throughout your deck.

Code highlighting

Whereas we gained’t be capable of obtain full syntax highlighting with out JavaScript, we will create a way to spotlight sure components of the code block for emphasis.

To do that, we’ll pair up linear-gradient with the -webkit properties that allow utilizing a component’s background because the textual content impact. Then, utilizing customized properties, we will outline what number of “traces” of the fashion block to spotlight.

First, we’ll place the required -webkit properties instantly on the <fashion> factor. This may trigger the seen textual content to vanish, however we’ll make it seen in a second by including a background. Though these are -webkit prefixed, they’re supported cross-browser.

fashion {
/* …present types */
-webkit-text-fill-color: clear;
-webkit-background-clip: textual content;
}

The highlighting impact will work by making a linear-gradient with two colours the place the lighter colour reveals via because the textual content colour for the traces to spotlight. As a default, we’ll bookend the spotlight with a darker colour such that it seems that the primary property is highlighted.

Right here’s a preview of the preliminary impact:

To create this impact, we have to work out learn how to calculate the peak of the spotlight colour. In our <fashion> factor’s guidelines, we’ve already set the line-height to 1.65, which corresponds to a complete computed line peak of 1.65em. So, chances are you’ll assume that we multiply that by the variety of traces and name it a day.

Nonetheless, because of the seen fashion block being rendered utilizing white-space: pre to protect line breaks, there’s technically a sneaky invisible line earlier than the primary line of textual content. That is created from formatting the <fashion> tag on an precise line previous to the primary line of CSS code. That is additionally why I famous that stopping auto-formatting in CodePen is necessary — in any other case, you’ll even have additional left padding.

With these caveats in thoughts, we’ll arrange three customized properties to assist compute the values we want and add them to the start of our .fashion ruleset. The ultimate –lines peak worth first takes under consideration that invisible line and the selector.

fashion {
–line-height: 1.65em;
–highlight-start: calc(2 * var(–line-height));
–lines: calc(var(–highlight-start) + var(–num-lines, 1) * var(–line-height));
}

Now we will apply the values to create the linear-gradient. To create the sharp transitions we want for this impact, we make sure the gradient stops from one colour to the following match.

fashion {
background-image: linear-gradient(
hsl(var(–theme-hs), 75%) 0 var(–highlight-start),
hsl(var(–theme-hs), 90%) var(–highlight-start) var(–lines),
hsl(var(–theme-hs), 75%) var(–lines) 100%
);
}

To assist visualize what’s occurring, I’ve commented out the -webkit traces to disclose the gradient being created.

Inside our –lines calculation, we additionally included a –num-lines property. This may allow you to modify the variety of traces to spotlight per demo by way of an inline fashion. This instance adjusts the spotlight to a few traces:

<fashion contenteditable=”true” fashion=”–num-lines: 3″>

We are able to additionally go a recalculated –highlight-start to alter the preliminary line highlighted:

<fashion contenteditable=”true” fashion=”–num-lines: 3; –highlight-start: calc(4 * var(–line-height))”>

Let’s have a look at the end result of the earlier adjustment:

Now, in case you add or take away traces throughout your presentation, the highlighting is not going to modify. However it’s nonetheless good as a instrument to assist direct your viewers’ consideration.

There are two utility courses we’ll add for highlighting the rule solely or eradicating highlighting altogether. To make use of, apply on to the <fashion> factor for the demo.

.highlight–rule-only {
–highlight-start: calc(1 * var(–line-height))
}

.highlight–none {
background-image: none;
background-color: currentColor;
}

Slide movement with CSS scroll snap

Alright, we’ve some nice-looking preliminary slides. However it’s not fairly feeling like a slide deck but. We’ll resolve that in two components:

Reflow the slides horizontallyUse CSS scroll snap to implement scrolling one slide at a time

Our preliminary types already outlined the #slides ordered record as a grid container. To perform a horizontal structure, we have to add one additional property because the .slides have already included dimensions to fill the viewport.

#slides {
/* …present types */
grid-auto-flow: column;
}

For CSS scroll snap to work, we have to outline which axis permits overflow, so for horizontal scrolling, that’s x:

#slides {
overflow-x: auto;
}

The ultimate property we want for scroll snapping for the #slides container is to outline scroll-snap-type. It is a shorthand the place we choose the x axis, and the necessary conduct, which implies initiating scrolling ought to all the time set off snapping to the following factor.

#slides {
scroll-snap-type: x necessary;
}

If you happen to attempt it at this level, you gained’t expertise the scroll snapping conduct but as a result of we’ve two properties so as to add to the kid .slide parts. Use of scroll-snap-align tells the browser the place to “snap” to, and setting scroll-snap-stopto all the time prevents scrolling previous one of many little one parts.

.slide {
/* …present types */
scroll-snap-align: middle;
scroll-snap-stop: all the time;
}

The scroll snapping conduct ought to work both by scrolling throughout your slide or utilizing left and proper arrow keys.

There are extra properties that may be set for CSS scroll snap, you may evaluation the MDN docs to study what all is on the market. CSS scroll snap additionally has a bit totally different conduct cross-browser, and throughout enter varieties, like contact versus mouse, or touchpad versus mouse wheel, or by way of scrollbar arrows. For our presentation, in case you discover that scrolling isn’t very clean or “snapping” then attempt utilizing arrow keys as a substitute.

At present, there isn’t a method to customise the CSS scroll snap sliding animation easing or velocity. Maybe that’s necessary to you in your presentation, and also you don’t want the opposite options we’ve developed for modifying the code samples. In that case, chances are you’ll wish to select a “actual” presentation software.

CSS scroll snap may be very cool but in addition has some caveats to pay attention to in case you’re considering of utilizing it past our slide deck context. Try one other scroll snapping demo and extra data on SmolCSS.dev.

Slide numbers

An elective function is including seen slide numbers. Utilizing a CSS counter, we will get the present slide quantity and show it nonetheless we’d like as the worth of a pseudo-element. And utilizing knowledge attributes, we will even append the present subject.

Step one is giving our counter a reputation, which is finished by way of the counter-reset property. That is positioned on the factor that comprises gadgets to be counted, so we’ll add it to #slides.

#slides {
counter-reset: slides;
}

Then, on the weather to be counted (.slide), we add the counter-increment property and callback to the title of the counter we outlined.

.slide {
counter-increment: slides;
}

To entry the present rely, we’ll arrange a pseudo factor. Throughout the content material property, the counter() perform is on the market. This perform accepts the title of our counter and returns the present quantity.

.slide::earlier than {
content material: counter(slides);
}

The quantity is now showing however not the place we would like it. As a result of our slide content material is variable, we’ll use basic absolute positioning to put the slide quantity within the bottom-left nook. And we’ll add some visible types to make it enclosed in a pleasant little circle.

.slide::earlier than {
content material: counter(slides);
place: absolute;
left: 1rem;
backside: 1rem;
width: 1.65em;
peak: 1.65em;
show: grid;
place-content: middle;
border-radius: 50%;
font-size: 1.25rem;
colour: hsl(var(–theme-hs), 95%);
background-color: hsl(var(–theme-hs), 55%);
}

We are able to improve our slide numbers by grabbing the worth of a knowledge attribute to additionally append a brief subject title. This implies first including an attribute to every <li> factor the place we would like this to occur. We’ll add data-topic to the <li> for the title and code demo slides. The worth will be no matter you need, however shorter strings will show finest.

<li class=”slide slide–title” data-topic=”CSS”>

We’ll use the attribute as a selector to alter the pseudo factor. We are able to get the worth through the use of the attr() perform, which we’ll concatenate with the slide quantity and add a colon for a separator. For the reason that factor was beforehand a circle, there are a number of different properties to replace.

[data-topic]::earlier than {
content material: counter(slides) “: ” attr(data-topic);
padding: 0.25em 0.4em;
width: auto;
border-radius: 0.5rem;
}

With that added, right here’s the code demo slide displaying the added subject of “CSS”:

Small viewport types

Our slides are already considerably responsive, however finally, there might be issues with horizontal scrolling on smaller viewports. My suggestion is to take away the CSS scroll snap and let the slides stream vertically.

To perform it will simply be a handful of updates, together with including a border to assist separate slide content material.

First, we’ll transfer the CSS scroll snap associated properties for #slides right into a media question to solely apply above 120ch.

@media display screen and (min-width: 120ch) {
#slides {
grid-auto-flow: column;
overflow-x: auto;
scroll-snap-type: x necessary;
}
}

Subsequent, we’ll transfer the CSS scroll snap and dimension properties for .slide into this media question as effectively.

@media display screen and (min-width: 120ch) {
.slide {
width: 100vw;
peak: 100vh;
scroll-snap-align: middle;
scroll-snap-stop: all the time;
}
}

To stack the demo content material, we’ll transfer our total rule for .slide–demo into this media question:

@media display screen and (min-width: 120ch) {
.slide–demo {
grid-template-columns: fit-content(85ch) 1fr;
}
}

Now every little thing is stacked, however we wish to convey again a minimal peak for every slide after which add the border I discussed earlier:

@media (max-width: 120ch) {
.slide {
min-height: 80vh;
}

.slide + .slide {
border-top: 1px dashed;
}
}

Your content material additionally is perhaps vulnerable to overflow on smaller viewports, so we’ll do a few changes for .content material to attempt to stop that We’ll add a default width that might be used on small viewports, and transfer our earlier max-width constraint into the media question. Additionally proven is a fast methodology updating our <h1> to make use of fluid kind.

h1 {
font-size: clamp(2rem, 8vw + 1rem, 3.25rem);
}

.content material {
/* take away max-width rule from right here */
width: calc(100vw – 2rem);
}

@media display screen and (min-width: 120ch) {
.content material {
width: unset;
max-width: 45ch;
}
}

Moreover, I discovered it helps to reposition the slide counter. For that, we’ll modify the preliminary types to put it within the top-left, then transfer it again to the underside in our media question.

.slide {
/* modify default right here, eradicating the previous “backside” worth */
prime: 0.25rem;
left: 0.25rem;
}

@media (min-width: 120ch) {
.slide::earlier than {
prime: auto;
backside: 1rem;
left: 1rem;
}
}

Closing slide deck

The embed will seemingly be displaying the stacked small viewport model, so make sure you open the complete model in CodePen, or leap to the dwell view. As a reminder, the modifying skill works finest in Firefox.

If you happen to’re excited about seeing a completely completed deck in motion, I used this system to current my fashionable CSS toolkit.

CSS Scroll Snap Slide Deck That Helps Reside Coding initially printed on CSS-Methods. It is best to get the publication and develop into a supporter.