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">o❍</div>
<div class="stitch"><p>◦❍</p></div>
<div class="stitch"><p>o❍</p></div>
.stitch p {
transform: rotate(90deg);
}
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>
.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;
}
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>
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
.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;
}
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;
}
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;
}
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>
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>
.Gonk_body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
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;
}
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;
}
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;
}
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.
Update
There is a part two. There were more droids on the back of the sweater. See Return of the Droids