Getting Started

Below, you'll find a series of steps outlining how to make the most out of our timeline template. I've tried to keep things clear and simple, because I know the struggles of using something which has a lot of steps.

Go to the github repository
Find the code structure there
It should be something like this:

- prism/
  - script.js
  - style.css
- scripts/
  - doc-script.js
  - script.js
- src/
  - script.js
  - styles.css
- styles/
  - docs-styles.css
  - style.css
- docs.html
- index.html
- README.md

The files you need are in the src folder => styles.css and script.js

HTML

Navigate to index.html and scroll down till you see the .container element. From there, you can see the basic format for the timeline.

This is basically it for the HTML. Only thing customizable through the HTML is the class on the .container element. It's direction is set by the class name, which is by default .vertical as most people would prefer timelines going from up to down. You can replace the class with horizontal to make it scrollable from left to right. See Custom properties for more information.

CSS

CSS code is a bit lengthy. I would recommend you to directly copy the code from src/styles.css instead of the page styles. It will be better that way. On top of the styles file, you will see a kind of config created at the :root of the HTML page

The above are CSS variables and will be used to customize most of the things in the timeline like colors, gap from timeline, card padding, margin, etc.

--overlay => this variable is used for the .card element's background color.
--gray => this variable is used for the .line element (the element which shows the timeline) and the signal elements which indicate an item is present on the timeline
--muted => this variable is used only in the keyframes of the signal pulsing effect thing.
--gap-from-line => well, the name suggests it all. This variable is used to determine the gap between the card and the timeline. Works in both vertical and horizontal mode.
--line-dimension => used to set the line's height or width, depending on whether it is vertical mode or horizontal mode. If it is vertical, then the width will be set to this variable, otherwise if it is horizontal mode, then the height will be set to this variable
--signal-dimension => used to determine the height and width of the signal elements of the card.
--box-padding => this variable is in use in a lot of random places. First it is used to set the gap between two cards, either vertical or horizontal, and also sets the block level padding of the container when in vertical mode. In horizontal mode, only the top padding is modified with this variable so the signals can fit without overflowing. It is also used in calculating maximum width of a card in devices bigger than specified viewport breakpoint. By default it's the same as the --gap-from-line variable as it looks much better if those variables are the same value. You can provide different values as always.

Although I would not recommend this, you can even link the src/styles.css as a <link> element in your page. It's not recommended as the styles will not be readily available to you and it will be difficult to customize them. It's better if you just take the styles and put them on your own CSS file

Javascript

Javascript is minimal for this project and is not really required. The only use is to animate the cards when they are visible in the viewport. The threshold property of IntersectionObserver API determines the segment of card visible to run the code out of 1. I have set it to .7. Besides that, there is one other variable at the top of the file hideAfterScroll

const hideAfterScroll = false;

If you set this to true, the cards, after appearing, can be hidden again when the user scrolls away from them. Then they will again have the appearing animation.

For those of you who do not want the animations on appear / dissapear, then you also need to make one change to the CSS =>

/* REMOVE THE FOLLOWING CODE FROM THE CSS AS INSTRUCTED */


.card {
  background-color: var(--overlay);
  padding: 1.5rem;
  border-radius: .5rem;
  position: relative;

  /* remove the below styles */
  opacity: 0;
  pointer-events: none;
  transition: 300ms ease-in-out;
  transition-property: opacity, transform;
}

.container.vertical .card {
  width: calc(50% - var(--box-padding));

  /* remove the below line */
  transform: translateX(-20%);
}

/* just remove this whole statement */
.container.vertical .card:nth-of-type(2n) {
  transform: translateX(20%);
}

.container.horizontal .card {
  height: 95%;
  min-width: 25rem !important;

  /* remove this transform statement */
  transform: translateY(-10%);
}

/* remove this statement too as the card will never have an active class (javascript is removed) */
.card.active {
  opacity: 1;
  pointer-events: all;
  transform: unset !important;
}

Now, if you completed the above steps correctly, the timeline will work fine without javascript.

Extra

Here are some things you might want to know. Some things will be repeated in case you missed an important thing.
The timeline is made for purely custom timelines, which means that you can easily change the sizes and colors of the timeline without any issues. All colors and element sizes are divided into CSS variables

CSS Variables

all sizes and colors are put into CSS variables for you to be able to easily customize the timeline according to your theme or design. To check where the colors are used, you can either check the below list, or change the colors and styles in the home page. Given below are all the css variables

`--overlay`

default value: #363c4b
Used in:

.card background-color

`--gray`

default value: #dcf4ff
Used in:

.line background-color
.signal background-color

`--muted`

default value: #dddddd43
Used in:

.signal => @keyframes pulse

`--gap-from-line`

default value: 4rem
Used in:

--box-padding this variable has same value as the --gap-from-line variable
.card distance from line
.signal to calculate how much it should be away from the card to be on the line

`--line-dimension`

default value: 1px
Used in:

.line either height or width of the line, depending on vertical or horizontal mode

`--signal-dimension`

default value: 1rem
Used in:

.signal height and width

`--box-padding`

default value: 4rem (inherited from --gap-from-line)
Used in:

.container flex gap for the cards
.container.vertical padding-block (top and bottom)
.container.horizontal padding-top
.card calculating width of card

It is recommended that you keep the --box-padding and --gap-from-line variables same.

Responsiveness

By default, the timeline comes with 2 breakpoints. Horizontal mode has no changes whatsoever. It does not take into account the width of the screen as it is scrollable. Vertical mode is the only layout affected by width, so you have one layout for bigger or medium sized screens, and the other for mobile or small tablets screen.

Breakpoint 1: max-width: 900px => fits the cards to take the remaining screen size on their respective side
Breakpoint 2: max-width: 725px => puts the cards on the timeline at the center of the screen

Future

One major update planned is for vertical layouts which will theoretically give the option for users to change mobile layouts. Currently a user on mobile will see all cards centered and on the timeline, but the future update will be that the you will be able to change where the timeline is (left/right) and where the cards are (centered on the timeline/besides the timeline)