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.
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:
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.
While doing the project, I met a little problem that was really annoying in fact.
I had to manipulate XML document dynamically that was done by PHP. Everything worked well, the new data were written down XML document. When I had loaded the data from the XML document into HTML document immediately after manipulating them, however, the problem appeared. The new data was not as I had desired, it was still the old data. I tried to refresh the XML document in browser and it worked, I got the desired result.
In this case, there is something happened when I had loaded the XML document so it is necessary to refresh the XML document in other to get the desired result.
The something that I mentioned above is caching or web cache.