← All layouts  ·  Productivity

Project timeline

Phases, milestones and dependencies across a date axis.

A Gantt without the false precision: bars show phases and milestones show dates, and nothing pretends to be accurate to the hour.

  • .ms-timeline
  • .ms-sidenav
  • .ms-card
  • .ms-shell
  • .ms-badge
  • .ms-checkbox

Open full page

Live

The layout as it renders, in a frame at its own width. Resize the window to watch it respond — the frame is a real viewport.

How to build it

This is the layout's template, read from disk — the same file the frame above renders, so it cannot drift out of date. Copy it into your own page and replace the content; every class in it ships in mcgowan.css.

<div class="ms-shell">
    <aside class="ms-shell__sidebar">
        <div class="ms-shell__brand">Northbound</div>
        <ul class="ms-sidenav">
            <li class="ms-sidenav__section">Workspace</li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">dashboard</span>Boards</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">check_circle</span>Tasks</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">calendar_today</span>Calendar</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">folder</span>Files</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link ms-sidenav__link--active" href="#"><span class="material-icons">mail</span>Inbox</a></li>
            <li class="ms-sidenav__item"><a class="ms-sidenav__link" href="#"><span class="material-icons">group</span>People</a></li>
        </ul>
    </aside>
    <div class="ms-shell__main">
        <div class="ms-shell__bar">
            <strong>Activity</strong>
            <span class="ms-toolbar__spacer"></span>
            <span class="ms-avatar-sm">ER</span>
        </div>
        <div class="ms-shell__body">
            <div class="u-grid u-grid-cols-12">
                <div class="u-col-12 u-col-lg-8">
                    <div class="ms-toolbar">
                        <div class="ms-chip-set">
                            <button class="ms-chip ms-chip--active" type="button">Everything</button>
                            <button class="ms-chip" type="button">Mentions</button>
                            <button class="ms-chip" type="button">Deploys</button>
                        </div>
                    </div>

                    <div class="ms-card">
                        <strong>Today</strong>
                        <ul class="ms-timeline u-mt-4">
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">09:41</span>
                                <div class="ms-timeline__body">
                                    <strong>Fellside Outdoor</strong> replied to invoice 4471.
                                    <span class="ms-badge ms-badge--success">Payment scheduled</span></div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">09:12</span>
                                <div class="ms-timeline__body">
                                    <strong>Priya Kaur</strong> deployed <code>2.8.0</code> to production.
                                    <p class="ms-stat__meta">14 commits &middot; no rollback</p></div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">08:02</span>
                                <div class="ms-timeline__body">
                                    HMRC confirmed the VAT return for period 04/26.</div></li>
                        </ul>
                    </div>

                    <div class="ms-card">
                        <strong>Yesterday</strong>
                        <ul class="ms-timeline u-mt-4">
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">17:20</span>
                                <div class="ms-timeline__body">
                                    <strong>James Doyle</strong> opened a pull request:
                                    bulk reconciliation endpoint.</div></li>
                            <li class="ms-timeline__item"><span class="ms-timeline__marker"></span>
                                <span class="ms-timeline__time">11:04</span>
                                <div class="ms-timeline__body">
                                    <strong>Sam Mercer</strong> queried claim EX-2214.
                                    <span class="ms-badge ms-badge--warning">Receipt missing</span></div></li>
                        </ul>
                    </div>
                </div>

                <aside class="u-col-12 u-col-lg-4">
                    <div class="ms-card ms-card--flat">
                        <h2>Filters</h2>
                        <label class="ms-checkbox"><input checked type="checkbox"> Deploys</label><br>
                        <label class="ms-checkbox"><input checked type="checkbox"> Finance</label><br>
                        <label class="ms-checkbox"><input type="checkbox"> Support tickets</label><br>
                        <label class="ms-checkbox"><input type="checkbox"> Sign-ins</label>
                    </div>
                    <div class="ms-card ms-card--flat">
                        <h2>Quiet since</h2>
                        <p class="ms-stat__meta">Nothing from the Support project in six days.
                            That is either good news or a broken integration.</p>
                    </div>
                </aside>
            </div>
        </div>
    </div>
</div>

More productivity layouts

Kanban board
Calendar
Task list
File manager
Email client