No 5 Source demo - Building a Timeline layout

Step 1

Following on from this thread How would you build a Timeline layout - #3 by Webdeersign , this is a basic tutorial to show how to build a super flexible Timeline layout that would also be suitable for process or sequence layouts.

In this tutorial, you will see how to control image width, use the GridPlus to position content and and overlay content on top of other content.

You will need an image and I have prepared a suitable SVG one below. Any suitable appropriate image will do but I am using this one to illustrate how some images need to be controlled.

Copy the exact text below.

<svg preserveAspectRatio="none" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><circle cx="60" cy="60" r="60" style="fill:#218bde;"/><path d="M26.763,26.734c7.391,-7.384 28.284,1.527 46.628,19.887c18.344,18.36 27.236,39.261 19.846,46.645c-7.391,7.384 -28.284,-1.527 -46.628,-19.887c-18.344,-18.36 -27.236,-39.261 -19.846,-46.645Z" style="fill:#ebebeb;fill-opacity:0;stroke:#ECECEC;stroke-width:7px;"/><path d="M26.734,93.237c-7.384,-7.391 1.527,-28.284 19.887,-46.628c18.36,-18.344 39.261,-27.236 46.645,-19.846c7.384,7.391 -1.527,28.284 -19.887,46.628c-18.36,18.344 -39.261,27.236 -46.645,19.846Z" style="fill:#ebebeb;fill-opacity:0;stroke:#ECECEC;stroke-width:7px;"/><circle cx="60" cy="60" r="6.369" style="fill:#ECECEC;stroke:#000;stroke-width:5px;"/><g id="Layer1"></g></svg>

7 Likes

Step 2.

Add a Source stack to a new Stacks page (You have the Source Addons pack and also the Source Theme selected.)

Add an SVG stack and paste the code from above, into the SVG stack. In the SVG settings, just to demonstrate something, set the width to 9999 for both device settings. Preview, and this SVG image will fill the screen. Adjust the screen size and note that the image will adjust to the width of the screen.

Now add a Container to the page, set the width to Base max-width (Alt) and add some pretty padding to the container, say 20px on all side. This is just to tidy the page up. Now drop the SVG stack inside the Container and Preview. The image will now appear at the width of the Base max-width (Alt) less the 20px padding on each side.

What this demonstrates is how the width of the image is being set by the width of it’s container.

Now set the Accent and also Border colour to the same blue colour in the Source control stack.

4 Likes

Step 3.

Now add a GridPlus to the page, and place it inside the Container. If you preview it should look the same as above.

In the GridPlus stack tick Add borders (in Grid Items - Styling), also set the first Col and Row gap to be 0px (in the Grid - Setup area) and preview.

Note - Setting the gaps to 0px is not essential here, but worth adjusting to see the effect. Essentially, this is the space between the grid items and when set to 0px, they will butt up against each other.

You should now see the same image with a blue border around it as shown below:

4 Likes

Step 4.

Now duplicate the GridItem by copying and pasting so that you now have 2 identical GridItems.

you should now see the same image twice with a blue border around each grid as shown below:

Screen Shot 145

And if we duplicate a GridItem again and preview we get:

So this is using the default GridPlus settings which is set to 250px so that if when a grid item width is less than 250px, the Grid will stack.

3 Likes

Step 5.

Warning this is where the magic starts to happen.

Now select all 3 GridItems and unselect Enable Span reset (which is selected by default). In this application we don’t want this useful feature, because in our Timeline, we never want the grid to collapse or stack, and we want it to preserve its layout at all screen sizes. So we never need the Grid to reset.

In the GridPlus stack, in Grid Setup, change the Column definition from the default Min Width to Custom (Advanced). If you look further down the settings you will see Grid Setup Breakpoint 1, 2, etc. We don’t need to use these for our layout, but these additional settings would be used at different screen sizes, if you needed to reshape your layout. However, in this layout we can use the same grid layout for all screen sizes.

In the Grid Setup, Cols template enter 1fr and preview. 1fr means create a column where each column fills the available space. We could also have entered 100% to get the same thing.

Now enter 1fr 1fr and preview to get the image below:

Now enter 1fr 1fr 1frand preview to get the image below:

Screen Shot 147

So using 1fr 1fr 1fr equally shares the available space between the 3 GridItems.

3 Likes

Step 6

Now change the 1fr 1fr 1fr to 20% 30% 1fr, preview and you should get"

Screen Shot 149

Now the split of the 'columns" is 20%, 30% and 50% because 1fr = 50% (which is the remaining available space).

You can try with values such as 100px 15% 1frwhich would create a first column width at a fixed 100px, a second column that will always be 15% fo rth width and the 3rd column will be whatever space is left.

Don’t proceed until you understand this. Try out different values to see what happens.

3 Likes

Step 7

So far we have just been exploring what the Column Template does.

Back to our Timeline tutorial.

Now drag a Paragraph stack into the 3rd GridItem and delete the SVG Stack in that GridItem, Add 10px padding left and right to the paragraph stack.

Now change the Cols template to 10% 10% 1fr`, Preview and you should get:

Screen Shot 150

Note how the borders have grown in length which is now being set by the height of the paragraph text. This is exactly what we want to happen.

The borders are there at this point just to show the boundaries of the GridItems, so we can now remove them in the GridPlus settings, by un-selecting Add Borders to get:

Screen Shot 151

This is now starting to look like the Timeline layout we are trying to create.

3 Likes

Step 8

Now copy the first GridItem containing one of the SVG images and paste it so that it appears as a new 4thGridItem with an SVG image.

Also, in the first 2 GridItems, delete the 2 SVG stacks so that these GridItem are empty. We will now use these GridItems to create the vertical blue line. A blue line width of 8px looks about right, and we are going to create this by creating a 4px border on the right side of the first GridItem, and a 4px border on the left side of the second GridItem. The 2 will appear side by side and create an 8px vertical blue line that will always match the height of the text content. Remeber that bodres cannot be drawn down the middle of a container, so this is just a way of creating the issusion that we have a border down the middle.

So, in the 1st GridItem, select Overide master border and choose Border Width Custom and set the right border to 4px, rest to 0px.

Screen Shot 154

In the 2nd GridItem, select Overide master border and choose Border Width Custom and set the left border to 4px, rest to 0px.

Preview to get:

Screen Shot 155

3 Likes

Step 9

The final part of this is the magic part and made possible in stacks by how CSS Grid is implemented in Source.

We are now going to do 3 things:

  1. Reposition the image to a different position in the grid
  2. Make the image span more than 1 column
  3. Make the image appear on top of the layout, i.e. over the underlying blue line.

To do this, in the each GridItem we need to select State Position and force each GridItem into the order and position that we want.

So in GridItem 1 select Col 1 - see below:

Screen Shot 158

In GridItem 2 select Col 2
In GridItem 3 select Col 3

And in GridItem 4 select Col 1, Z-index 2 and Column Span 2 as below:

Screen Shot 159

What’s happening here is we are forcing the 4th GridItem from it’s normal position of the 2nd row, col 1 back up into the first row in the Col 1 position AND making it fill or Span 2 Columns AND increase it’s position on the page to be above whatever is underneath it, so that we can see it.

We get:

Screen Shot 156

which changes as the screen width adjusts to:

Screen Shot 157

Note that the SVG image has increased in size (width) which is because it now spans 2 columns, i.e. 20%. These 2 columns are set to 10% and 10% so they will scale down with the screen width. With this layout no breakpoints need to be set.

3 Likes

Step 10

At this point you could make this layout into a Stacks Template to use whenever you need this type of layout. Note also that if you remove the timeline you have a powerful stack layout like the Foundry Media stack but one on Steroids.

To create more entries in the Timeline or Process or Sequence layout, just copy and paste the GridPlus layout we just created.

Screen Shot 160

The whole display is adjustable by altering the Paragraph padding, the column widths of the first 2 column (you may prefer 6% 6% 1fr or 8% 8% 1fr) to reduce the size of the icon.

Other things to note:
You can use dotted borders and alter the size of the borders.

Additional images can be added along the timeline by adding below the main SVG images in the same GridItem.

Any content can be used in the Paragraph GridItem such as headers, images or buttons.

Buttons or CTA actions could be used in place of the SVG images to create a sequence or order of events.

The Timeline can be reversed by using 1fr 10% 10% and altering the State Positions. Treat this as homework to figure it out. If you absorbed all of this so far, you will know how to do it in a couple of minutes.

Summary.
This has been a long drawn out for clarity, tutorial and if you are using Source you would benefit from learing how to use the Grid in this way. This tutorial has just scratched the surface in what the Grid can do.

4 Likes

There is a useful CSS Grid generator that can be useful to visualise what the template values look like.

If interested, Check it out out at https://cssgrid-generator.netlify.app

Entering the values used in this tutorial, into this generator creates this:

3 Likes

Thanks for putting that together. Looks great. i’ll need to go through it and give it a go :)

3 Likes

Gary,

This is so cool! I would never get this result on my own. But now, I got a nice Template in my toolbox…

BTW, I would love to see @habitualshaker’s tutorial for the business card layout he managed to re-create from ‘Codepen’. My appetite rises…

Business Card | STH Demos

3 Likes

Gary - Thank you for this excellent tutorial. It took me a couple of goes to get it right (me not reading the instructions properly) but I have now managed to get it to work. Good stuff/

2 Likes

Thankd you for trying the instructions.

It may seem like a lot but the core principles of Source are used over and over in most of these tutorials. Once you grasp them, the light will go on and you will realise that you can build pretty much anything.

AFAIK there is no other way to build such a configurable timeline with any other stacks, so it is impressive that you can do this all from within Source.

2 Likes

Deeply impressed Gary. I will try and follow this through later in the week as it is useful and fascinating. Thank you for your time and for sharing.

2 Likes

I’d second that. The business card layout is lovely, and useful too

2 Likes

If you have any questions just ask.

I find timeline layouts to be a very efective way to illustrate a series of events or a process and the switch from one side of the page to the other can be used to highlight significant stages.

The Source series of CSS Grid stacks is like using lego bricks when you understand it.

2 Likes

I must have missed this back then. I’ll see if I can dig it out to share…

1 Like

Here is a slightly revamped version: source-business-card.rw8.zip - Droplr

4 Likes