Veera / Blog

Responsive timeline with CSS and HTML

TLDR; https://github.com/vraa/css-timeline

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.

timeline

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

timeline-responsive

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

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.