Ugly Sweater CSS: Droids.

Source: Dev.to

Icon Swap

The first CSS ugly sweater featured BB‑8, so I decided to bring the spherical droid back. I used a few special characters to draw him and replaced the tie‑fighters that normally appear at the end of the row.

º❍

◦❍

º❍

.stitch p {
    transform: rotate(90deg);
}

Sweater Template

I started with the sweater template from previous years – a basic torso that holds the featured characters (this time, droids).

<!-- sweater template markup -->

.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;
}

Droids Layout

There are three droids on the sweater: two BD‑72 units and one Gonk droid. The layout looks a bit like a tie‑fighter.

<!-- droids layout markup -->

BD‑72 Droid

Appears in The Mandalorian (works in Peli Motto’s shop) and was included as a micro‑figure in the advent calendar.

The BD‑72 is built from rectangles (vertical and horizontal).

<!-- BD‑72 markup -->

.BD-72 {
    width: 200px;
    height: 300px;
    background-color: var(--sweatergreen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Head */
.BD-72_head {
    width: 100px;
    height: 25px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Neck & Legs */
.BD-72_neck,
.BD-72_leg {
    width: 8px;
    height: 10px;
    background-color: white;
}

/* Antenna */
.antenna {
    width: 6px;
    height: 18px;
    background-color: white;
}

/* Wrappers */
.antenna_wrapper {
    display: flex;
    justify-content: space-between;
}
.BD-72_leg_container,
.BD-72_feet_container {
    display: flex;
    justify-content: space-between;
}
.BD-72_feet_container {
    justify-content: space-evenly;
}

The head is a green rectangle with a white border. Most sections share the same colour scheme; some parts (e.g., the “RedLights”) are red.

Gonk Droid

Walking batteries in the Star Wars universe. In CSS they’re a stack of rectangles.

Initial (un‑containerised) Mark‑up

<!-- initial Gonk markup -->

“Is this a signature? An alien language?” – No, it’s what happens when you forget a parent container.

Proper Structure (with a parent container)

<!-- proper Gonk markup with container -->

.Gonk_Body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Styling the Sections

/* Section 1 – top */
.Gonk_section1 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
    border-radius: 5%;
}

/* Section 2 – middle (contains face) */
.Gonk_section2 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
}

/* Section 4 – lower middle (contains button) */
.Gonk_section4 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
}

/* Section 5 – bottom */
.Gonk_section5 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
    margin-top: -5px;   /* overlap to hide the gap */
}

Adding the Face and Button

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

/* Example button */
.Button {
    width: 30px;
    height: 30px;
    background-color: white;
    border: 4px solid var(--sweatergreen);
    border-radius: 50%;
}

By making some borders transparent and overlapping sections, the droid’s silhouette becomes clear.

Putting It All Together

The three droids (two BD‑72 units and one Gonk) sit inside the sweater’s torso, forming a festive Star Wars‑themed ugly sweater. The CSS uses only simple rectangles, borders, and flexbox positioning – no images required.

Feel free to copy the code, tweak the colours (the --sweatergreen custom property is defined elsewhere in the main stylesheet), and add your own droid variations! Happy coding and may the CSS be with you.

een);
    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;
}

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. I didn’t even know until I was rereading last year’s post.

Learn about Ugly Sweater Day on the National Day Calendar page.