Archive | November 2015

Tutorial: Create ruler using Flexbox layout

Introduction

Flexbox coming with CCS3 is an useful, handy way to do layouts in CSS. Learning using flexbox is pretty simple and you can find out a bunch of resource to learn this. In this post, I give a tutorial to apply flexbox to create ruler with pure HTML and CSS.

Plan ahead

Before getting started, we need to imagine and break down components needed to form a ruler. There are some you may think of:

  • Ruler board
  • Major sticks
  • Minor sticks
  • Value for major sticks

For example, we are going to create one like this:

Ruler

We have 11 major sticks that go with 11 corresponding values. For each segment between 2 adjacent major sticks, there are 9 minor sticks or you can think there are actually 11, but the first and last one are hidden behind the major sticks.

Read More…

Advertisements