DEV Community: Milan Radojević

Why are you blogging/writing?

Milan Radojević — Sun, 29 Dec 2019 20:28:39 +0000

I'm really interested what are the different reason that people here are writing and sharing content?

For me it's both wanting to better understand those topics that I write about, but also meeting other devs and seeing what they're doing.

Lazy Loading Images

Milan Radojević — Fri, 27 Dec 2019 13:02:35 +0000

Why lazy load in the first place

When somebody visits your site, they have to download all the files used on the current page, and this includes the images. Now images usually aren't small in size and not everyone has a reliable connection. So if your page has a lot of images, it can really slow down that initial load, leaving the person looking at blank white screen until it's done.

Lazy Loading

One way to deal with this is to delay loading the images that aren't visible immediately, also called lazy loading. Maybe you have to scroll down a bit to get to them, or you have a carousel and only the first picture is displayed. Doing this will make that initial page load much quicker.

I've also included a demo at the end that shows one example where lazy loading is used.

So how does it work

It's actually very simple, it goes through these four steps:

Set the dimensions of the picture
Store the link for later as an html attribute
Wait for a trigger event (maybe the user is scrolling and the image enters into view)
Displaying the image

So let's go through each step in detail

Setting the dimensions

Now somebody might ask, why do this?

The reason is that when you insert an image the content on the page "makes a jump", or rather moves to make space for the image.

This doesn't look very aesthetically pleasing, to prevent it from happening we just set an empty img element with the same dimensions as the image. Then when the image loads it already has some free space and the rest of the content doesn't move.

So where do you get the dimensions?

If you're hard-coding the images being displayed then you probably have the dimensions and hard-code them too.

What's more likely to happen is that you get the links for image from an API call to some server. And it's standard practice to send the dimensions alongside with the links. So when you get the links just set the dimensions with JS.

Storing the link for later

There's a special type of HTML attributes called data attributes. They all begin with data- This how they look in HTML:

<span id="getThis" data-author="Dave">Some text</span>

And this is how you access them in JS:

var spanNode = document.querySelector("#getThis");
var author = spanNode.dataset.author;
console.log(author); // Prints "Dave" to console

The trigger event

This on will depend on the context.

Is this an image on the page that the user has to scroll to to see. Then the trigger is image entering into view. (There are demos showing how to do this at the end of the post)

Is the image in a carousel, then maybe you load ones that are next to the current image being displayed.

Does the image get shown only when you click a button or something else. Then that's your trigger.

Displaying the image

To do this just take the stored link and set src attribute on the image to that link.

Demo

Wow you read through all that, congrats. Or maybe you just skipped it, either way here's how to do the scrolling example:

Alongside articles here on dev.to I also post short, visual explanations about same topics on my instagram so if you're interested in that here's a post about this article: https://www.instagram.com/p/B6k7krBlAmT/

CSS Challenges Results #2 | Tooltips

Milan Radojević — Mon, 21 Oct 2019 17:28:41 +0000

Another week has passed, here's the challenge post:

Article No Longer Available

The HTML

You could structure the HTML in two ways:

Add the tooltip as a pseudo element

<div class="tooltip" data-tooltip="Tooltip text here">Content</div>

Tooltip as a separate element

<div class="wrapper">
  <!-- content here -->
  <div class="tooltip">Tooltip text here</div>
</div>

Submissions

Tooltips on text

Rose, me, and Edmund Teo Chang Hao all used attr() to add text to tooltips. Rose added the href attribute and I added the data-tooltip attribute to tooltips.

Tooltip on icon

Jacob Quirke and SK both went with icons. SK also added a cool little animation with pulsing circles and a floating pin.

Next challenge

Article No Longer Available

That's it for last week. Have fun with this week's challenge.

CSS Challenges #3 | Calendar

Milan Radojević — Mon, 21 Oct 2019 17:28:12 +0000

Update

Due to some IRL stuff I'll be posting next challenge a week later. That also means that there will be more time for submissions. Sorry for the inconvenience.

It's already the third week, damn is time flying or what. Here are submissions for last week:

Article No Longer Available

What is this

If you're new, hello there! It's good that you want to improve your skills with css. This is a series aimed at helping you do just that by challenging you to recreate a suggested feature or element. I'll only be posting challenges that will be of use when building stuff. So no code golf or obscure stuff.

This is a weekly challenge, so every Monday there will be a new thing to build. Also every Monday I'll summarise all the submissions to last week's challenge.

Post links to your solutions (codepens, jsfiddles, whatever your prefer) in the comments if you solved the challenge.

Calendar

This time the challenge is to make a calendar. You can do the logic in pure js, React, Vue, etc.

And for anyone who's not experienced with javascript or doesn't want to deal with it, here's I've provided some pure js code that does everything, so you can focus on the design. Just follow the design doc bellow.

Requirements

Calendar should contain:

text displaying the month you're looking at (and year if it's not the current one)
buttons for switching the selected month
button to return to selected month
initials for each day in month
days

The JS, so you don't have to do it

var calendarNode = document.querySelector("#calendar");

var currDate = new Date();
var currYear = currDate.getFullYear();
var currMonth = currDate.getMonth() + 1;

var selectedYear = currYear;
var selectedMonth = currMonth;
var selectedMonthName = getMonthName(selectedYear, selectedMonth);
var selectedMonthDays = getDayCount(selectedYear, selectedMonth);

renderDOM(selectedYear, selectedMonth);

function getMonthName (year, month) {
    let selectedDate = new Date(year, month-1, 1);
    return selectedDate.toLocaleString('default', { month: 'long' });
}

function getMonthText () {
    if (selectedYear === currYear)
        return selectedMonthName;
    else
        return selectedMonthName + ", " + selectedYear;
}

function getDayName (year, month, day) {
    let selectedDate = new Date(year, month-1, day);
    return selectedDate.toLocaleDateString('en-US',{weekday: 'long'});
}

function getDayCount (year, month) {
    return 32 - new Date(year, month-1, 32).getDate();
}

function getDaysArray () {
    let emptyFieldsCount = 0;
    let emptyFields = [];
    let days = [];

    switch(getDayName(selectedYear, selectedMonth, 1))
    {
        case "Tuesday":
            emptyFieldsCount = 1;
            break;
        case "Wednesday":
            emptyFieldsCount = 2;
            break;
        case "Thursday":
            emptyFieldsCount = 3;
            break;
        case "Friday":
            emptyFieldsCount = 4;
            break;
        case "Saturday":
            emptyFieldsCount = 5;
            break;
        case "Sunday":
            emptyFieldsCount = 6;
            break;
    }

    emptyFields = Array(emptyFieldsCount).fill("");
    days = Array.from(Array(selectedMonthDays + 1).keys());
    days.splice(0, 1);

    return emptyFields.concat(days);
}

function renderDOM (year, month) {
  let newCalendarNode = document.createElement("div");
  newCalendarNode.id = "calendar";
  newCalendarNode.className = "calendar";

  let dateText = document.createElement("div");
  dateText.append(getMonthText());
  dateText.className = "date-text";
  newCalendarNode.append(dateText);

  let leftArrow = document.createElement("div");
  leftArrow.append("«");
  leftArrow.className = "button";
  leftArrow.addEventListener("click", goToPrevMonth);
  newCalendarNode.append(leftArrow);

  let curr = document.createElement("div");
  curr.append("📅");
  curr.className = "button";
  curr.addEventListener("click", goToCurrDate);
  newCalendarNode.append(curr);

  let rightArrow = document.createElement("div");
  rightArrow.append("»");
  rightArrow.className = "button";
  rightArrow.addEventListener("click", goToNextMonth);
  newCalendarNode.append(rightArrow);

  let dayNames = ["M", "T", "W", "T", "F", "S", "S"];

  dayNames.forEach((cellText) => {
    let cellNode = document.createElement("div");
    cellNode.className = "cell cell--unselectable";
    cellNode.append(cellText);
    newCalendarNode.append(cellNode);
  });

  let days = getDaysArray(year, month);

  days.forEach((cellText) => {
    let cellNode = document.createElement("div");
    cellNode.className = "cell";
    cellNode.append(cellText);
    newCalendarNode.append(cellNode);
  });

  calendarNode.replaceWith(newCalendarNode);
  calendarNode = document.querySelector("#calendar");
}

function goToPrevMonth () {
    selectedMonth--;
    if (selectedMonth === 0) {
        selectedMonth = 12;
        selectedYear--;
    }
    selectedMonthDays = getDayCount(selectedYear, selectedMonth);
    selectedMonthName = getMonthName(selectedYear, selectedMonth);

    renderDOM(selectedYear, selectedMonth);
}

function goToNextMonth () {
    selectedMonth++;
    if (selectedMonth === 13) {
        selectedMonth = 0;
        selectedYear++;
    }
    selectedMonthDays = getDayCount(selectedYear, selectedMonth);
    selectedMonthName = getMonthName(selectedYear, selectedMonth);

    renderDOM(selectedYear, selectedMonth);
}

function goToCurrDate () {
    selectedYear = currYear;
    selectedMonth = currMonth;

    selectedMonthDays = getDayCount(selectedYear, selectedMonth);
    selectedMonthName = getMonthName(selectedYear, selectedMonth);

    renderDOM(selectedYear, selectedMonth);
}

Design doc

for the HTML just add <div id="calendar" class="calendar"></div>
the renderDOM function will add the following to your calendar div:
- text, telling the current month (with class="date-text")
- buttons for going to previous, current and next month (with class="button")
- initials for each day of month (with class="cell cell--unselectable")
- numbers for each day in month and appropriate amount of empty cells (with class="cell")

For those who use provided JS:

For those wanting to do everything:

That's it for this week, have fun.

CSS Challenges Results #1 | Breadcrumbs

Milan Radojević — Sun, 13 Oct 2019 17:22:14 +0000

There were some interesting submissions to last weeks challenge. Here's a link to the challenge post:

Article No Longer Available

First thing first

Why have a different series for solutions?
Two reasons mainly:

to better organise these posts,
and allow anyone looking through them latter to have a better overview of all topics covered (less clutter, since there's only one post per topic in the series, instead of two)

The HTML

Next thing let's see how the html should look like, since we can't write css without knowing how our html is structured.

This is what the structure should be like:

<nav>
  <ol>
    <li> <a></a> </li>
    <li> <a></a> </li>
    <li> <a></a> </li>
  </ol>
</nav>

Let's go quickly through each one:

nav is used because this is a feature used to navigate the site
ol is used because the order of the items is important
li is just list item
a is the link element
- side note: some people have suggested using span for the last item and while they provided good arguments for doing so, I have decided to follow the example given on W3C site

Alongside this, our html is obviously going to include some class attributes and href ones for links, two other attributes that we are going to include are:

aria-label="Breadcrumb" added to our nav element, this specifies what kind of navigation this is
aria-current="page" added to last link (on the a element), specifies that this is the link to the current page

This is what it's gonna look all combined together:

<nav aria-label="Breadcrumbs">
  <ol class="breadcrumbs">
    <li class="crumb"><a href="#">Home</a></li>
    <li class="crumb"><a href="#">UI</a></li>
    <li class="crumb"><a href="#">Navigation</a></li>
    <li class="crumb"><a href="#" aria-current="page">Breadcrumbs</a></li>
  </ol>
</nav>

Submisions

With that out of the way, let's look at different ideas everyone had for implementing breadcrumbs.

Arrows

Here's the design me and most others chose.

Borders

Amongst all submissions using borders to create the triangles was the most popular.

This works because different borders (top, right, bottom, and left) can be assigned different colors (including transparent) and they meet at a 45 degree angle. Here's a codepen to better visualise this:

Clip path

Another interesting option used by IngmarsLazdinsGit and Kyle Oliveiro is to apply a clip-path property to ::before and ::after pseudo-elements. Here's the code:

.crumb::before {
  clip-path: polygon(100% 0, 100% 100%, 0% 100%, 50% 50%, 0% 0%);
}

.crumb::after {
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
}

Minimalist

Davide Scarioni chose the simpler design, that's easy to setup and can be incorporated almost anywhere.

The > is added using ::after pseudo-element.

Skewed

Gareth Gillman decided to use a slashed design.

He did this by applying transform: skewX(-15deg); to individual breadcrumbs.

Rounded Squares

Augusto Queiroz went for rounded squares separated with a colon.

Next challenge

Article No Longer Available

That's it for last week. Have fun with this week's challenge.

CSS Challenges #2 | Tooltips

Milan Radojević — Sun, 13 Oct 2019 17:18:23 +0000

The first week of this series is already over and to be honest the challenge has received more attention than I expected so I'm glad that everyone is liking it.

Here's a post outlining different solutions that people came up with for implementing breadcrumbs, combined with some talk about how the html side should look like:

Article No Longer Available

What is this

This is a weekly challenge, so every Monday there will be a new thing to build. Also every Monday I'll summarise all the submissions to last week's challenge.

Post links to your solutions (codepens, jsfiddles, whatever your prefer) in the comments if you solved the challenge.

Tooltips

The topic this time is tooltips, used to display additional info about an element when it's being hovered over.

Requirements

Tooltips should appear on :hover and :focus

That it for this week, have fun.

Simple Tic Tac Toe App

Milan Radojević — Sun, 13 Oct 2019 17:16:41 +0000

I publicly committed to the 100 Day of Code challenge today.

Liquid error: internal

After geting a bit familiar with react, I used create-react-app to scaffold this simple game. It was interesting making it.

You can view it here: https://mikister.github.io/tic-tac-toe-react-100daysofcode/

And here's the code: https://github.com/mikister/tic-tac-toe-react-100daysofcode

Interestingly the most problematic part was adding the app to github pages. Here a github gist that helped me with this:

Breadcrumbs - Semantics and Accessibility

Milan Radojević — Tue, 08 Oct 2019 17:15:32 +0000

I started a new weekly series called CSS Challenges, where every Monday there is a different feature or element to implement. The goal is to encourage people to practice their css by doing and to also discuss different ways to achieve the task. This week's topic is Breadcrumbs.

Article No Longer Available

At the end of each week I'll be posting a separate post giving examples of different implementations from submissions and trying my best to explain how they work and the logic behind.

Now, even though it is a css challenge, we can't just ignore other aspects of web development. I am somewhat familiar with html semantics, but far from expert, and a total newbie when it comes to accessibility.

The plan is to include in the post with solutions, some general tips and things to watch out for when it comes to semantics and accessibility. So, alongside my own research that I'll be doing, I wanted call everyone to pitch in and give their tips, dos and do-nots when it comes to Breadcrumbs. Things like recommended html structure, what tags to use, what attributes should be included or not, etc. are welcome.

Also it'd be nice if you could provide references to official specs and documentation that's related to your arguments, but it's optional.

CSS Challenges #1 | Breadcrumbs

Milan Radojević — Tue, 08 Oct 2019 03:13:06 +0000

Submissions

Article No Longer Available

What is this

I'm starting a new series aimed at helping you improve your css skills by challenging you to recreate a suggested feature or element. I'll only be posting things that will be of use when building your websites or apps. So no code golf or obscure stuff.

This is a weekly challenge, so every Monday there will be a new thing for you to build. Also every Monday, alongside the challenge, I'll give a suggested solution to last weeks' challenge.

Post links to your solutions (codepens, jsfiddles, etc.) in the comments if you solved the challenge.

Breadcrumbs

So the first challenge is to make breadcrumbs. Commonly used in larger websites as secondary navigation.

Requirements

parent element that holds individual items should use the nav tag
each item uses a tag for links
each item is somehow separated, either with text (> or /, traditional) or visually (modern)
last item should have special styling

SMASHING Magazine - Breadcrumbs In Web Design: Examples And Best Practices

Images with hoverable Overlays

Milan Radojević — Sun, 06 Oct 2019 10:48:35 +0000

An image is worth a 1000 words, but sometimes you want to use both. Here's a short little tutorial on how to add info overlays to image cards when you hover over them.

Edit

Added suggestions by Jonas Linn for improved accessibility.

The HTML

Let's look first at how to structure our html:

<figure class="card">
    <img class="card__image" alt="Alt text here" src="">
    <figcaption class="card__info"></figcaption>
</figure>

We have a figure element with class card which will hold everything.

Add image link to src, also be sure to add alt text (this will be read by screen reader software).

figcaption is the element which will hold the content of our overlay. You can add other pictures there, tables maybe, your imagination is the limit.

Positioning the Image and the Overlay

Now let's switch to css to see how we positioned everything:

.card > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card__image {
  display: block;
}

The first selector will select any child of inside the card. We just set position to absolute so that we can stack element over each other, and have them cover their parent.

One important thing to note is that the parent element (.card) should have position: relative; set or the image and overlay will position in the top left corner of the page (or the top left corner of first element, going up the html tree, that has position property set).

With the second selector we override the default display: inline for images.

Reveal Overlay on hover

Now for the overlay:

.card__info {
  opacity: 0;
  transition: opacity 300ms ease;

  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}

.card:hover .card__info,
.card:focus-within .card__info {
  opacity: 1;
}

We set the default opacity on our overlay to zero, this means that it's still there, just invisible. But with the second selector we tell the browser to change that opacity back to 100% when we hover over the image card.

If we don't want to have the overlay just instantly appear, we can slowly turn up the opacity by setting the transition property. It will make any change to opacity happen over a certain time period, in this case 300 milliseconds.

And we also want a half transparent (opaque) background for the overlay. We do that with rgba(), it accepts four parameters, red value of a color, green value, blue value, and alpha value (basically opacity of the color).

Finishing touches

This isn't required but I like to round off my cards:

.image_card {
  border-radius: 20px;
  overflow: hidden;
}

and add a drop shadow:

.image_card {
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

A few words about accessibility and sematics

Background images should only be used for decorative purposes, because screen readers can't access them. So in most cases it is recommended to use an img tag.

Images should be wrapped inside of figure tag, and their accompanying description (in this case the overlay) should be wrapped with figcaption tag. Read MDN - img element second paragraph in the "The title attribute" section.

Here are some links to article/pages with topics that are relevant to stuff used in here:

CSS Tricks - A Complete Guide to Flexbox - nice reference for css flexbox, useful for creating a linear layout
W3Schools - CSS Selectors - nice reference for how css selectors function

I hope you found this useful. If you have anything to suggest or just wanna say something please do.

CSS Toggles/Switches

Milan Radojević — Thu, 03 Oct 2019 15:21:28 +0000

So I made a bit of a pause with posts because university started, but I got some free time now so here's a new post. I got the idea while scrolling through codepen, and thought why not make some toggles with css.

A simple toggle

So how do we make this from scratch. First the toggle has two parts:

the body (the orangey part, from the gif we see it can be just an outline, filled in, or a thin bar)
and the knob (the purplish part)

And we don't really want to have to add two html tags for each toggle, so we want to add two elements by adding only one tag. To achieve this we use the ::after css selector. What it does is it adds a pseudo-element (the knob) inside of another one (the body).

Here's an example, try changing something:

Two properties that we need for every ::after element are content: ""; and display: block;.

The content property is just the text inside of the pseudo element, and if it's not set the ::after element won't render, so we just set it to empty.

By default ::after elements have display set to inline, but if we want to position the element and do some other things with it we need to set it to block so it behaves like a normal html element.

The rest is just for looks. I'll give one more tip, set the border-radius to a big value, it doesn't matter what it is, just that it's bigger than the dimensions of the toggle and it'll always round it nicely.

Adding the animation

Or rather in this case it's called a transition, and that exactly the name of the property we need to do this.

Instead of our elements "jumping" instantly from one property value (let's say width) to another (maybe we changed it from 100px to 200px), transition eases it by changing the property bit by bit over a set time period. For this to happen we need to tell the browser which properties should be transitioned, so we add:

.toggle::after {
  transition: margin-left 300ms ease;
}

This will transition every change to the margin-left property over a period of 300 milliseconds.

The knob is already on the left, so we got the first state. To get to second state (being on the right) we can add to knob's margin-left property. This is what I used:

.toggle--sliding::after {
  margin-left: calc(var(--toggle-width) - var(--toggle-padding-horizontal)*2 - var(--knob-size));
}

Now, I know it looks a bit intimidating, but here's how I got it.

We need to move it all the way to the right so we move however much the toggle is wide, but since it's a left margin we need to subtract the width of the knob. There's also the padding that we added to our toggle, we also subtract it, twice, since it's applied to both left and right side.

In css calc() is used to calculate something, so instead of having to use just one value (e.g. 40px, 2em, var(--toggle-width)) we can combine them.

var() is used to reference a variable in css.

Adding JavaScript

To change the state of the toggle, we want to apply the togggle--sliding class to it when click on it, or if it already has that class to remove it. Here's the code to do it:

var toggle = document.querySelector("#toggle");

toggle.addEventListener("click", () => {
  toggle.classList.toggle("toggle--sliding");
});

It will add an event listener to an element with id="toggle".
But since it is impractical to write the same code again for every single toggle, we can add the event handler to every element with class="toggle" with this short code:

var toggles = document.querySelectorAll(".toggle");

toggles.forEach((togg) => {
   togg.addEventListener("click", () => {
      togg.classList.toggle("toggle--sliding");
    });
});

Well I hope you got something out of this article. If you have anything to suggest or just wanna say something please do.

Also here's the code for the GIF, it's a bit messy since there were two different animations (or rather transitions):

P.S.

After someone asked about it, I realized I forgot to include in the article instructions on how to check if the toggle is on so here the js for it:

toggle.classList.contains("toggle--sliding");

It will return true if the toggle contains that class (i.e. if it's turned on).

Items in, Columns out | Playing with CSS Grid

Milan Radojević — Sun, 22 Sep 2019 15:22:14 +0000

Intro

I'm starting a series on things you can do with css grid, and to start it off here's something simple.

The Idea

Just add items to a certain element and have them automatically ordered into columns (or rows) with CSS Grid.

Demo

How it works

There are really only three properties that we need to do this (everything else in the demo is just for looks). They are:

.parent_element {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: auto;
}

So the first property tells the browser that the element with that class should behave like a grid.

The second property tells how many columns there should be.
repeat(7, 1fr) is just syntactic sugar for 1fr 1fr 1fr 1fr 1fr 1fr 1fr.
The fr is a css unit that means fraction, so this divides the element into 7 equal columns.

The third property is what tells the browser to handle setting the rows, and the value passed to it is what the row height should be.

If you want to order things into rows then just use:

.parent_element {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-columns: auto;
}

Use cases

You'll use this method mostly when elements are all of the same (or at least similar) height. Here are some ideas where it can be useful:

Web Store Items, when you have a card that contains an item's picture, name and other properties, you can organise all of them into a neat grid
Portfolio projects, again cards, same concept as above
A calendar, if you ever need to put one on a website
Gallery, only if all pictures are the same height
Grid view on Dropbox/Google Drive - maybe you decide you want to build them from scratch for your portfolio

What not to use this for

Masonry layout (think of pintrest cards), why, because each row's height is the same as it's tallest member and there'll be weird white spaces everywhere, instead use columns property or multiple vertical flexboxes and divide elements between them

If you have any suggestions please let me know in the comments.

DEV Community: Milan Radojević

Why are you blogging/writing?

Lazy Loading Images

Why lazy load in the first place

Lazy Loading

So how does it work

Setting the dimensions

Storing the link for later

The trigger event

Displaying the image

Demo

CSS Challenges Results #2 | Tooltips

Article No Longer Available

The HTML

Add the tooltip as a pseudo element

Tooltip as a separate element

Submissions

Tooltips on text

Tooltip on icon

Next challenge

Article No Longer Available

CSS Challenges #3 | Calendar

Update

Article No Longer Available

What is this

Calendar

Requirements

The JS, so you don't have to do it

Design doc

Read More

CSS Challenges Results #1 | Breadcrumbs

Article No Longer Available

First thing first

The HTML

Submisions

Arrows

Borders

Clip path

Minimalist

Skewed

Rounded Squares

Next challenge

Article No Longer Available

CSS Challenges #2 | Tooltips

Article No Longer Available

What is this

Tooltips

Requirements

Read More

Simple Tic Tac Toe App

Breadcrumbs - Semantics and Accessibility

Article No Longer Available

CSS Challenges #1 | Breadcrumbs

Submissions

Article No Longer Available

What is this

Breadcrumbs

Requirements

Read More

Images with hoverable Overlays

Edit

The HTML

Positioning the Image and the Overlay

Reveal Overlay on hover

Finishing touches

A few words about accessibility and sematics

Read More

CSS Toggles/Switches

A simple toggle

Adding the animation

Adding JavaScript

Items in, Columns out | Playing with CSS Grid

Intro

The Idea

Demo

How it works

Use cases

What not to use this for