DEV Community

Cover image for Ugly Sweater CSS: Droids.
Chris Jarvis
Chris Jarvis Subscriber

Posted on

Ugly Sweater CSS: Droids.

#css #tutorial #frontend #art

Since 2020 I've made CSS art versions of the LEGO Figure ugly sweaters. Please see the previous post under the series links. This year I have the LEGO Star Wars Advent Calendar. They did not release a Marvel version for 2025.

This year's calendar features Babu Frik's droid workshop sort of like Santa's workshop. Babu is a tiny alien. He didn't have a holiday sweater but a Jawa did.

Jawa minifig. It's wearing a green sweater with droids on it. plus a brown hood and pants.

First the icons were replaced. BB-8 was the first CSS ugly sweater so why not feature the spherical droid. I played with some special characters to make him. BB-8 replaces the tie-fighters seen at the end of the row.

various images of two circles.

various images of two circles. Stacked on each other.


<div class="stitch">º❍</div>
<div class="stitch"><p>◦❍</p></div>
<div class="stitch"><p>º❍</p></div>
Enter fullscreen mode Exit fullscreen mode 
.stitch p {
    transform: rotate(90deg);
}
Enter fullscreen mode Exit fullscreen mode

Droids

I started with my sweater template from previous years. There's a basic torso. Inside torso are the featured characters for this sweater. This time droids.

<div class="torso"> 
   <collar>
   <div class="wrapper">
     <div class="droids"></div> 
   </div>
  <bottom of sweater>
</div>
Enter fullscreen mode Exit fullscreen mode 
.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.droids {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

}
Enter fullscreen mode Exit fullscreen mode

There are three droids, two BD units and a Gonk droid, on the sweater, so the section is broken into three. The BD units will reuse the same code.

Sweater the background is green with red rows at top and bottom. in the center are the outline of two rectangles and an oval.

Rough placement of the droids. Looks like a tie-fighter.

<div class="droids">
  <div class="BD-72"></div>
  <div class="Gonk"></div>
  <div class="BD-72"></div>
Enter fullscreen mode Exit fullscreen mode

BD-72

BD-72 is a tiny droid. In the Mandalorian he works in Peli Motto's shop and helps rebuild a spaceship. There was a micro-figure of him in this advent.

He is built using rectangles, some vertical and some horizontal.

    <div class="BD-72">
        <div class="antenna_wrapper">
            <div class="antenna"></div>
            <div class="antenna"></div>
        </div>                  
        <div class="BD-72_head">
            <div class="eyes"></div>
            <div class="eyes"></div>
        </div>
        <div class="BD-72_neck"></div>
        <div class="BD-72_body">
            <div class="RedLights"></div>                       
        </div>
    <div class="BD-72_leg_container">
        <div class="BD-72_leg"></div>
        <div class="BD-72_leg"></div>
    </div>
    <div class="BD-72_feet_container">
        <div class="BD-72_foot"></div>
        <div class="BD-72_foot"></div>
      </div
Enter fullscreen mode Exit fullscreen mode 
.BD-72 {
    width: 200px;
    height: 300px;
    background-color: var(--sweatergreen);

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

.BD-72_head {
    width: 100px;
    height: 25px;
    background-color: var(--sweatergreen);
    border: 4px solid white;

    display: flex;
    justify-content: space-around;
    align-items: center;

}
Enter fullscreen mode Exit fullscreen mode

The head is a green rectangle with a white border. Most of his sections use the same color scheme While others are just red or white boxes.

.BD-72_neck, .BD-72_leg {
    width: 8px;
    height: 10px;
    background-color: white;
}

.antenna {
    width: 6px;
    height: 18px;
    background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

The neck and legs are white rectangles. Antenna are similar but thinner and taller. A parent wrapper is used to position eyes, legs, and feet. Each are done with justify-content. Just changed the attribute to how the child pieces are positioned.

.antenna_wrapper {

   display: flex;
   justify-content: space-between;

}
.BD-72_leg_container {

    justify-content: space-between;
    flex-direction: row;
}

.BD-72_feet_container {

    justify-content: space-evenly;
    flex-direction: row;
}
Enter fullscreen mode Exit fullscreen mode

That's how to make a tiny droid.

Gonk Droid

In Star Wars Gonk Droids are a walking batteries. In CSS they are stacked rectangles.


    <div class="Gonk_section1"></div>
    <div class="Gonk_section2"></div>
    <div class="Gonk_section3"></div>
    <div class="Gonk_section4"></div>
    <div class="Gonk_section5"></div>
    <div class="Gonk_feet_container">
        <div class="Gonk_foot"></div>
        <div class="Gonk_foot"></div>
    </div>
Enter fullscreen mode Exit fullscreen mode

a row of weird shapes

Is this a signature? An alien language? No it what happens when you don't put things in a container. Let's put the parts in a parent container called Gonk Body.

<div class="Gonk_Body">
    <div class="Gonk_section1"></div>
    <div class="Gonk_section2">
        <div class="Gonk_face"></div>
    </div>
    <div class="Gonk_section3"></div>
    <div class="Gonk_section4">
        <div class="Button"></div>
    </div>
    <div class="Gonk_section5"></div>
    <div class="Gonk_feet_container">
        <div class="Gonk_foot"></div>
        <div class="Gonk_foot"></div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.Gonk_body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
Enter fullscreen mode Exit fullscreen mode

That's better. Here's the boxes showing all the borders. It's just a bunch of overlapping boxes.

A stack of overlapping rectangles

Now change some borders to transparent and it's easier to see a droid.

.Gonk_section1 {

    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
    border-radius: 5%;

}
.Gonk_section2 {
r: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
}

.Gonk_section4 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent

}
.Gonk_section5 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

gonk droid.

Then move section5 up to cover the bottom border of section4. Section4 needs a white border-bottom. If it was transparent there would be blank space between the corner and where the piece below it begins.

.Gonk_section5 {
    margin-top: -5px;
}
Enter fullscreen mode Exit fullscreen mode

gonk droid.

To finish the droid add and position to more rectangles.


.Gonk_face {
    width: 120px;
    height: 40px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-radius: 5%;
    margin-top: -30px;
    position: relative;
}

.Button{
    height: 40px;
    width: 60px;
    background-color: var(--SweaterDarkRed);
    margin-top: 4px;
    margin-left: 5px;
}
Enter fullscreen mode Exit fullscreen mode

A row of three droids

Wrap up

This was fun. If I wanted to update it, I'd redo BD-72's body into section like the Gonk. Make it two parts and use transparent borders to look closer to the sweater.

Ugly sweater day is the third Friday of December. This year that is December 19th, today. I didn't intend to post today for that reason, it's just lucky timing. Didn't even know till I was rereading last year's post.

Learn about Ugly sweater day on National Day calendar page..

That's it unless there's a part two.

Top comments (0)