Timeline.css - The best way to create your own Timeline, with just CSS

  • By Christian
  • Last update: Nov 24, 2021
  • Comments: 6

Timeline.css

The best way to create your own Timeline, with just CSS!

Preview

License

MIT licensed

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Github

https://github.com/christian-fei/Timeline.css

Comments(6)

  • 1

    li.year changes the position of the :nth-of-type for the event.li's

    The event li's alternate between the left and right side nicely until I place a new li.year in the chain.

    If the last li.event is on the right side before a li.year, the next li.event afterwards appears again on the right side, and would like to have it continue on the left side. Is there a way of changing the order?

    ul.timeline li.year li.event(appears on right) li.event(appears on left) li.event(appears on right) li.year li.event(appears on right) > change to left li.event(appears on left) > change to right li.event(appears on right) > change to left

  • 2

    The order of events is wrong, when a list and years are used.

    When using a list (ol or ul, doesn't madder) to display the chain of events, it works fine until you add a li.year. After adding a year, the order in which the events are added to the timeline is wrong.

    Wrong meaning, that an earlier item in the list is not displayed as an earlier entry in the Timeline. You can observe that in your own example, given here:

    <ul class='timeline'>
        <li class="year">2013</li>
        <li class='event offset-first'>
          Something amazing happened today, but it's a secret
        </li>
        <li class='event' href="#">
          Timeline.css is <b>dynamic</b>, <b>responsive</b> and optimized to <b>demonstrate events</b> in your life in a <b>simple and clear</b> way
        </li>
        <li class="event">
            <a href="http://christian-fei.com" title="christian fei">
              made with &lt;3 by <img class='no-box centered' src="https://s3-eu-west-1.amazonaws.com/cf.img/var/face.svg" alt="christian fei">
            </a>
        </li>
    </ul>
    

    Here, you would expect the "Something amazing"-event to be earlier than the "Timeline.css"-one. Well, look for yourself.


    I did some research and found, that the problem is caused by the nth-child()-selector. It works a little different than you seem to think:

    It will find the nth-children in the list, whom's type is li and then check if it has the correct class. See this StackOverflow answer.

    That means, that it will find the even/odd li, then check the type and if the type is not event, will not match anything (which is not what you want). What you want is to get the even/odd li in a "sub-list", that only includes lis with the class event.

    My workaround is to use dt for the years and dd for the events (in a dl, of course). This way, the css selector will match nth dd (dts are not ever matched) and the order is correct. But this seems pretty hacky to me.

    Again, this problem does only occur when year-elements are put in the list.

  • 3

    License issue

    Hi @christian-fei, I saw that the readme said this project is under MIT license(https://github.com/christian-fei/Timeline.css#mit-licensed), but in the commit to add package.json(https://github.com/christian-fei/Timeline.css/commit/ec62643ee809f6b7a750d6dc277564ddacc1ed02#diff-b9cfc7f2cdf78a7f4b91a753d10865a2R14), it's ISC

    +{
    +  "name": "timeline.css",
    +  "version": "1.0.0",
    +  "description": "Timeline The best way to create your own Timeline, with just CSS! Share life and work events with Timeline.css! Sass and SCSS port too!",
    +  "main": "index.js",
    +  "scripts": {
    +    "test": "echo \"Error: no test specified\" && exit 1"
    +  },
    +  "repository": {
    +    "type": "git",
    +    "url": "git+https://github.com/christian-fei/Timeline.css.git"
    +  },
    +  "author": "Christian Fei",
    +  "license": "ISC",
    +  "bugs": {
    +    "url": "https://github.com/christian-fei/Timeline.css/issues"
    +  },
    +  "homepage": "https://github.com/christian-fei/Timeline.css#readme"
    +}
    

    So is this project under multiple licenses or this is a mistake? Thanks!

  • 4

    Fix broken headings in Markdown files

    GitHub changed the way Markdown headings are parsed, so this change fixes it.

    See bryant1410/readmesfix for more information.

    Tackles bryant1410/readmesfix#1

  • 5

    q: Visualizing timespans?

    Hi, I've been trying to figure out a way to layout my resume like this and I think your project's really cool! Just wondering, is there a built-in functionality to show timespans?

    For example, a section of the timeline could be 2013, but I may want to highlight an event at the end of the year, and another around the June/August.

    Hope that made sense...

    Thanks!

  • 6

    Make all CSS-rules apply only to elements within the timeline

    There are multiple selectors in the Timeline.css file, which match against "global" objects, like the time or *, *:after, *:before.

    I'd suggest to change them to only apply to elements in the timeline (e.g. .timeline [selector]). That way, you could use the CSS-file as a drop-in, without it messing with your sites "global" layout/CSS.