Veera / Blog

Responsive timeline with CSS and HTML


Just finished updating/redesigning (or messing up) my online resume. For the new design, I needed a timeline like UI component to show my work history. The componenent need not to be a perfect timeline, with actual scaling and all. But it should look like one and should respond to the screen width.

Here's a screenshot of the timeline component from my resume's work history section.


And, here's the responsive layout of the timeline in smaller screens.


After implementing the design, I thought of separating the timeline code alone as a re-usable component. Hence the new github repo:

If you have a need to use something similar in your code, feel free to fork and use. Customize the variables in timeline.less file to your taste and compile it with less.js.

Fair warning: There are few limitations with the current implementation, which I'll fix in near future. If you happened to patch any bugs, please send me a pull request. TIA.