A little bit of backstory
While I was designing my own portfolio, I was thinking to create a dedicated timeline for it. Timelines always looked complicated, to be honest. While I searched for timelines across the internet, I came to know that there are multiple ways of creating CSS Timelines.
A few ways to create timeline:
- Using Flexboxes
- Using Grid
- Using an Unordered List (Seriously?)
- Positioning
divsusing transforms
We'll be using grids to create a CSS timeline, which is probably the most beginner friendly ways to get started with CSS Timelines (I hope).
Creating the basic structure
We'll start with some basic HTML to create a barebones structure for our Timeline.
<section class="full-page">
<!--This is the main container that contains the whole timeline.-->
<div class="timeline">
<!--Well, The reason for this div is to fill space.
This space is technically used for keeping dates,
but I didn't find the need for dates. However, I'll provide
you the styling for dates, so that you can use it if you
wanted to.-->
<div class="timeline-empty">
</div>
<!--This is the class where the timeline graphics are
housed in. Note that we have timeline-circle
here for that pointer in timeline.-->
<div class="timeline-middle">
<div class="timeline-circle"></div>
</div>
<div class="timeline-component timeline-content">
<h3>HTML</h3>
<p>Some Text</p>
</div>
<div class="timeline-component timeline-content">
<h3>CSS</h3>
<p>Some Text.</p>
</div>
<div class="timeline-middle">
<div class="timeline-circle"></div>
</div>
<div class="timeline-empty">
</div>
<div class="timeline-empty">
</div>
<div class="timeline-middle">
<div class="timeline-circle"></div>
</div>
<div class=" timeline-component timeline-content">
<h3>Javascript</h3>
<p>Some Text.</p>
</div>
</div>
</div>
</section>
I have explained majority part of the code in the comment blocks in the above code, in case you felt it wasn't adequate enough, let me know in the comments below.
The first half of making timeline is over. On to CSS!
Styling the timeline.
Right now, our timeline looks like this:
Not a great thing to look at. So, we'll use CSS to make our timeline look cool.
I've used Sass here, which you can see in the variables here, but there's no much deviation from regular CSS.
.full-page{
/*I have used this to center the whole timeline on the screen.*/
display: flex;
align-items: center;
justify-content: center;
}
/*The timeline container has a minimal width
than the main container to make text look more dressed up.*/
.timeline{
width: 80%;
height: auto;
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
/*This is the container for timeline content. Those are its
styling. The include statement is used in sass to copy
a certain bunch of rules. This is related to
styling and nothing to worry at your end.*/
.timeline-content{
padding: 20px;
@include neu-card;
margin-bottom: 20px;
border-radius: 6px ;
}
/*Adding some margin for all components in
the timeline. The timeline content is used
for text blocks exclusively.*/
.timeline-component{
margin: 0px 20px 20px 20px;
}
/*This is where, I've added responsiveness. Before
this I added display: flex to show it as an
array of text blocks. But if the screen size is
huge enough for a timeline, you can use media
queries to add styles that are apt for larger
screens, which is adding a timeline. 1fr 3px
1fr means that there will be 3 columns with 2
columns equally sized with a column of width 3px
in the middle.
*/
@media screen and (min-width: 768px) {
.timeline{
display: grid;
grid-template-columns: 1fr 3px 1fr;
}
/*Adding the styles for the timeline line and pointer.*/
.timeline-middle{
position: relative;
background-image: $linear-grad;
width: 3px;
height: 100%;
}
/*Adding styles for that circle pointer. using
some transforms and positioning to keep it center*/
.timeline-circle{
position: absolute;
top: 0;
left: 50%;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: $linear-grad;
transform: translateX(-50%);
}
}
And marks the end of this code. The comments in the code block are hopefully helpful in explaining the code well to you.
This is how my version of the code looks (You can find the pure CSS version in this embed, but the formatting is pretty messed:
Try resizing the result window, you'll see the magic for yourself.
There might be much efficient ways to do the same thing (Using flexboxes), but since this is a tutorial oriented for beginners, I've used grids.
Grids are really easy to understand comparatively. That's why I chose grids over flexboxes.
However, if you need a flexbox version of this, there are ton of tutorials on the internet. Who knows, maybe I could create a flexbox version of this article soon!
Stay tuned for more updates.
Top comments (3)
Semantically and for accessibility, this method makes the most sense. Unless you add a bunch of ARIA attributes to yours, this wouldn't make much sense to someone who's visually impaired. I like your design, though. You should work on making it a bit more obvious that it's a timeline in mobile, though.
Oh, right! I completely forgot about accessibility. I'll try to focus on that from now on. Thanks for pointing out!
Regarding the layouts on mobile:
I could have done it by positioning the
.timeline-middleabsolutely and adding a few transforms to make it center, but it will add to more bugs. But anyways, I'll try to update the article with this version when I'm free.Thanks for pointing out.
I have a collection of historical timelines, to help me build HistoryTimeline.com, this one is new to me.