CSS: One Goal, Many Paths

Codazen isn’t just a place to work. It’s a place to develop skills. Our Lunch & Learn (L&L) program provides us with lessons on topics ranging from data science and coding to UX design and meditation.

Josh Studley, Engineering Manager (and unofficial Coding Guru), recently taught us about CSS techniques and how it’s possible to create amazing images with less code. And just for fun, how to do it using a single div.

Writing HTML and CSS to match a design is a useful skillset for every developer to have. While domain knowledge is great, the ability to write code that’s both simple and reusable can help an engineer stand out from the crowd.

Studley taught us how to overcome one of the major challenges found in creating page layouts: elements sharing code. During his L&L, he created two flags on the same page—one from Japan and the other from France, each having dimensions of 300px by 200px.

And just like a pixelated Phoenix, once Studley successfully created the flags, he destroyed them to start anew and show us different ways for the flags to rise again. Below are his techniques broken down step-by-step to help build up your skillset.

Japanese and French flags before coding. (Source: Shutterstock.com)

CSS Technique 1: Flexible Box Layout (aka Flexbox)

One goal engineers have when writing code is to make it reusable. This can be done with shared CSS classes. A shared .flag class helps set the dimensions, border and background color of both flags. Scalability and dynamic measurements are also essential. This is where Flexbox shines.

To create the circle in the Japanese flag, use a height and width of 100px and set the border-radius to 50%. One feature of Flexbox is its ability to center child elements both horizontally and vertically, so the circle doesn’t need to position itself. The Japanese flag centers everything with two simple lines: align-items: center for horizontal and justify-content: centerfor vertical.

A scalable solution is best for creating the stripes on the French flag. Since each stripe is one-third of the container, use width: calc(100%/3). Flexbox by default will line elements left-to-right. Because one of our goals is simplicity, and the flag has a background color of white, we can eliminate the white stripe. As we have only the first stripe and the last stripe remaining, the justify-content property can be set to space-between. This puts as much space as possible between the flexed items.

HTML

<div class="flag japan">
<div class="circle red"></div>
</div>

<div class="flag france">
<div class="stripe blue"></div>
<div class="stripe red"></div>
</div>

CSS

.flag {
background-color: white;
border: solid 1px black;
display: flex;
height: 200px;
margin-bottom: 10px;
width: 300px;
}

.japan {
align-items: center;
justify-content: center;
}

.japan .circle {
border-radius: 50%;
height: 100px;
width: 100px;
}

.france {
justify-content: space-between;
}

.france .stripe {
height: 100%;
width: calc(100% /3);
}

.blue {
background-color: blue;
}

.red {
background-color: red;
}

Japanese and French flags after coding. (Courtesy: Josh Studley.)

CSS Technique 2: Background Gradient

The color patterns of the Japanese flag’s circle and the French flag’s stripes make them perfect candidates for background gradients. Typically, a gradient blends one or several colors into others over a distance.

The circle in the Japanese flag can be expressed as a radial-gradient with a circle shape instead of the default ellipse. To achieve the red circle, the gradient must include color stops, which are comma-separated color and measurement pairs. When the color stops are the same measurement, they create hard lines that no longer look blended. Radial gradients can look like they have jagged edges if they are the same measurement, so it’s good to make the next color start very close, within 1px.

To get the stripes in the French flag to line up, use linear-gradient instead of radial-gradient. The color stops can be the same measurement since we want lines and not curves. Use to right for the direction to accomplish the three-striped design.

Color stops can be expressed in the same section without repeating the color name. The stops white 33%, white 66% can be written as white 33% 66%. If the first color has a stop, like blue 0, blue 33%, the first value can be removed and blue 33% can remain. Likewise the last color stop can be removed if it is also the previous color stop. So red 66%, red 100% can be just red 66%. Taking out these extras helps keep your code length to a minimum.

HTML

<div class="flag japan"></div> 

<div class="flag france"></div> 

CSS

.flag {
  background-color: white;
  border: solid 1px black;
  height: 200px;
  margin-bottom: 10px;
  width: 300px;
}
.japan {
background-image: radial-gradient(circle, red 25%, transparent calc(25% + 1px));
}
.france {
background-image: linear-gradient(to right, blue 33%, transparent 33% 66%, red 66%);
}

CSS Technique 3: One Div to Rule Them All

Using just a single <div> to create both flags is possible if we creatively utilize background colors. Multiple gradients can be applied to the same element, and background-position and background-size can move these gradients around that element, with hard color stops creating the necessary lines.

Since the flags should not repeat, set background-repeat to no-repeat. The Japanese flag’s position will start in the upper left corner (0 0) and have a size of 300px by 200px. To add the French flag into the mix, we will include the gradient, position and size into the existing properties, separated by a comma.

Linear gradients which have hard 1px color stops and a transparent color in the middle will add the flag borders. Since gradients are layered based on their order in the list, the first items will be on top and the last items will be at the bottom. The border will appear first in the list as we want that to appear on top.

HTML

<div class="flag"></div>

CSS

.flag {
  background-image:
    linear-gradient(to right, black 1px, transparent 1px 299px, black 299px),
    linear-gradient(to right, black 1px, transparent 1px 299px, black 299px),
    linear-gradient(to bottom, black 1px, transparent 1px 199px, black 199px 200px, transparent 200px 210px, black 210px 211px, transparent 211px 409px, black 409px),
    radial-gradient(circle, red 25%, white calc(25% + 1px)),
    linear-gradient(to right, blue 33%, white 33% 66%, red 66%);
  background-position: 
    0 0,
    0 210px,
    0 0,
    0 0,
    0 210px;
  background-repeat: no-repeat;
  background-size:
    300px 200px,
    300px 200px,
    300px 410px,
    300px 200px, 
    300px 200px;
  height: 410px;
  width: 300px;
}

Codazen: Lunching and Learning

Source: Shutterstock.com

At Codazen, we value employee growth. What better way to grow than watching a presentation led by an expert while eating a sandwich?

Nancy Cadena, UX Product Designer, was the one who requested this CSS L&L. Studley had been posting interesting examples of images drawn in CSS on our workplace chat and Cadena wanted to see some examples in action. She says:

It was actually the first coding L&L that I could follow all the way through. I know the bare minimum about coding, but learning more and more about it from working with devs. This just seemed like a potential bridge between design and development, and could help both disciplines think of solutions and be more creative during projects where we run into issues like these.

One of our Associate Full-Stack Engineers, Elton Dan, enjoyed seeing the different steps Studley took to tweak his CSS and make it more efficient to the point where he only needed one div. Dan says, “Josh's code examples are really easy to follow and I think he does a really great job of explaining through his examples. You can see the experience he has with teaching.”

Codazen values teaching its employees to broaden their horizons. So a coding Lunch & Learn is a fun opportunity for both engineers, like Dan, and non-engineers, like Cadena.

You can lunch and learn with us too. Check out our current openings.