The HTML markup & CSS behind the logo…

Following on from my previous post about the thinking behind the logo, I now want to explain how I translated this for use on the web, if it’s useful to anyone then my work is done 🙂 If you think it can be done better then feel free to leave a comment, it’s always interesting to hear how it might be done differently.

So the first thing for me to do is to think about a single container div element, this will be declared with “relative” positioning so I can completely control the nested div elements that will be declared with “absolute” positioning [1].

With things like this, it’s not unusual for me to sketch it out so I can see the elements I need to build which in turn will help me to segment and animate the logo later. Wait for it… as I know you’ll think it looks a mess but believe me, if you can visualise like this first it will logically make more sense to you and your sanity as you build it later. My sketch is rough, probably makes no sense to anyone but me! However, in my eyes I can now see all the div elements and shapes I will need for the markup, it looks something like this…

broken down div elements with rough shapes to represent the logo

This component is essentially made up of 1 parent div element and 8 nested child elements that will be absolutely positioned shaped div elements. Now I could visualise the logic it was easy enough to create the simple markup like so…

The parent element has a class of triggerb-container to represent the trigger button that I’ll use later with Javascript. leg is the leg of the letter R, followed by the letter E elements that I’ve given a shared class of eblock along with a sequential representation of each part of the letter E, the shared class means I can style it once with a height and width, the sequentially classes so I can position them and target them individually during the animation later. These are then followed by the circular elements that are effectively individual underlying elements.

If you haven’t noticed I’ve layered the markup logically from top to bottom for my own sanity. I will use z-index [2] in the CSS to move elements in the layer but because all HTML elements are 0 based meaning that any absolute positioning used on an element will be based on a z-index layer of 0 by default it makes sense to logically write your markup line by line in the manner which is readable at the time of coding it up, otherwise it might make things difficult later on. It’s worth pointing out that this is just what works for me on this component, depending on what needs to be achieved just use what works for you; there is no wrong or right way, just different ways 🙂

Let’s walk through my classes in my markup…

.triggerb-container {
// starts with the basic space and shape
width: 100px;
height: 100px;
// child elements will be relative to this
position: relative;
// UX to indicate a gesture on desktop
cursor: pointer;
}
.triggerb-container .leg {
// the starting shape
width: 30px;
height: 20px;
// so we can control the positioning
position: absolute;
// its a white shape :)
background: white;
// bring it up the layers
z-index: 30;
// the all important positioning
bottom: 10px;
right: 10px;
transform: rotate(45deg);
// for later use in animation
transition: all .3s ease-in-out;
}
.triggerb-container .eblock {
// the shared shape
height: 20px;
width: 50px;
// standardised position in the layers
position: absolute;
z-index: 100;
}
.triggerb-container .eblock.one {
// its a black shape :)
background: black;
// for later use in animation
transition: all .3s ease-in-out;
}
.triggerb-container .eblock.two {
// its a white shape :)
background: white;
// the all important positioning
top:20px;
// for later use in animation
transition: all .3s ease-in-out;
}
.triggerb-container .eblock.three {
// its a black shape :)
background: black;
// soft rounds to match the letter R
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
// extend the shared shape & extend into the body
width: 60px;
// the all important positioning
top:40px;
// for later use in animation
transition: all .3s ease-in-out;
}
.triggerb-container .eblock.four {
// its a white shape :)
background: white;
// the all important positioning
top:60px;
// for later use in animation
transition: all .3s ease-in-out;
}
.triggerb-container .eblock.five {
// its a black shape :)
background: black;
// the all important positioning
top:80px;
// for later use in animation
transition: all .3s ease-in-out;
}
.triggerb-container .innercircle {
// standardised position in the layers
// this is needed later as a background
// for the finished animation
position: absolute;
// setting the shape, because we are using a 20px
// stoke this need to occupy a space minus the
// stroke within the space which is 40px in total
width: 60px;
height: 60px;
// for a nice radius, half the size is used
border-radius: 30px;
// its a white shape :)
border: solid white 20px;
// the all important positioning
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// raised up in the layer but below the E
z-index: 10;
}
.triggerb-container .circle {
// standardised position in the layers
position: absolute;
// setting the shape
width: 100px;
height: 100px;
// for a nice radius half size of the shape is used
border-radius: 50px;
// because we are using a 20px stoke
border: solid black 20px;
// for later use in animation
transition: all .3s ease-in-out;
}

You’ll notice on some classes I’ve declared the ‘transition‘ [3] property, this will be essential for animation later when I create the post on adding the Javascript.

So at this point, we have styled markup that should looks something like this…