How I Created a Ludo Board Layout

The final look of the project

Hey guys, today we will be looking at how i was able to replicate a ludo game board into a webpage. From the image above you will notice that the board basically have four colors and cells for movement.

Before we start with the nitty-gritty of the game board, it’s best i state that this board involves a lot of basic concepts of html and css, which affected my design concept to a great level.

Behind every great design is a backlog of failures

-Jude

Design Concept

There is this concept i use all the time when working on any project, which is the idea that anything is an enclosure or more like a container or a box. So with that in mind, let’s see that ludo game board image as a very big box, with smaller boxes inside, with three bigger columns and rows.

dirty sketch of the ludo board game

The beauty of this my design pattern is the abstraction it gives me. I think about my design in terms of paper sketches without thinking about the whole codes that may be involved in the process. This way i better understand the design process and the steps that i will have to take to get things done.

Layout Concept

For the layout i will be using a combination of fixed layout and fluid layout for the width. Also there will be some underlying mathematics to ensure that the width is shared evenly.

.container {    
  width: 500px;    
  height: 500px;    
  margin: auto;    
  margin-top: 80px;
}
.container-row1,
.container-row3 {    
  width: 100%;    
  height: 40%;
} 
.container-row2 {    
  width: 100%;    
  height: 20%;
} 
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {    
  height: 100%;    
  width: 40%;
} 
.row1-col2,
.row3-col2 {    
  height: 100%;    
  width: 20%;
}

The container class is housing the whole layout, it’s more like the box containing both the bigger and smaller boxes. Then using float on the element to align them appropriately.

Note: when using float, don’t forget to use the clearfix hack. This ensures that the unnecessary behaviour of float doesn’t affect your layout

.clearfix::after {    
  clear: both;    
  content: "";    
  display: table;
}

Making it Responsive

I know most people will argue with me that every design should be mobile first, but for me the thing here is whether the person understands the processes involved so well, that he or she will be able to apply them regardless of the method used.

For the ludo board layout i employed two breakpoints for the responsive design.

@media only screen and (max-width: 600px) {}
@media only screen and (max-width: 460px) {}

This two break points is like a golden rule for me, since i was able to get the design concept to align perfectly well.

CSS Naming Convention

I want to talk a bit about my naming convention in css. I made sure i used a reasonable class name. The importance of this is that when you look at your code tomorrow you won’t have difficulty knowing what it does and what it’s targeting.

Conclusion

I have tried my best not to bore you guys with too many details and too little details to keep you wanting more. You can check my github repo for the complete code and also a hosted version to see the output.