Activity Timelines in Salesforce Lightning Design System

As we all know that the salesforce application are gradually moving to lighting , there is a need to migrate our classic visualforce pages to lightning UI. For this Salesforce has offered the CSS used for lightning. The Lightning Design System CSS could be downloaded here https://drive.google.com/file/d/0B59oEC6MnukrTndwdERtT2RHcms/view?usp=sharing

Add the downloaded zip to the static resource with the label SLDS.
Now copy and paste the below code to a VF page to experience the Activity Timeline as you witness in the lightning UI.
<apex:page showHeader="true" sidebar="false" standardStylesheets="false">
<apex:stylesheet value="{!URLFOR($Resource.SLDS, 'assets/styles/salesforce-lightning-design-system.min.css')}" />

<center>
<h1> Activity  Timeline </h1> 
</center>
<hr/>
<ul>
  <li>
    <span class="slds-assistive-text">Task</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--task">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-task" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#task')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <div class="slds-media">
              <div class="slds-media__figure">
                <label class="slds-checkbox" for="mark-complete">
                  <input type="checkbox" name="checkbox" id="mark-complete" />
                  <span class="slds-checkbox--faux"></span>
                  <span class="slds-form-element__label slds-assistive-text">mark-complete</span>
                </label>
              </div>
              <div class="slds-media__body">
                <h3 class="slds-truncate" title="Review proposals for EBC deck with larger team and have marketing review this"><a href="javascript:void(0);">Review proposals for EBC deck with larger team and have marketing review this</a></h3>
                <ul class="slds-list--horizontal slds-wrap">
                  <li class="slds-m-right--large">
                    <span class="slds-text-title">Contact:</span>
                    <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
                  </li>
                  <li class="slds-m-right--large">
                    <span class="slds-text-title">Assigned to:</span>
                    <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Task, Review proposals">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Task, Review proposals</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Event</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--event">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-event" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#event')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Company One — EBC Meeting"><a href="javascript:void(0);">Company One — EBC Meeting</a></h3>
            <p class="slds-truncate">Let’s get together to review the theater’s layout and facilities. We’ll also discuss potential things that truncate at a certain width.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Time:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Feb 23, 2015 11:00am–12:00pm</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Location:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">300 Pike St, San Francisco CA</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Name:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a>, <a href="javascript:void(0);">Jason Dewar</a>, <a href="javascript:void(0);">Gwen Jones</a> and <a href="javascript:void(0);">Pete Schaffer</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Event, Company One">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Event, Company One</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Call</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--call">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-log-a-call" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#log_a_call')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
            <p class="slds-truncate">Lei seemed interested in closing this deal quickly! Let’s move.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-m-right--large">
                <span class="slds-text-title">Name:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Lei Chan</a></span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">Assigned to:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Betty Mason</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Call, Mobile conversation">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Call, Mobile conversation</span>
          </button>
        </div>
      </div>
    </div>
  </li>
  <li>
    <span class="slds-assistive-text">Email</span>
    <div class="slds-media">
      <div class="slds-media__body">
        <div class="slds-media slds-media--timeline slds-timeline__media--email">
          <div class="slds-media__figure slds-timeline__icon">
            <div class="slds-icon_container">
              <svg class="slds-icon slds-icon--small slds-icon-standard-email" aria-hidden="true">
                <use href="{!URLFOR($Resource.SLDS, '/assets/icons/standard-sprite/svg/symbols.svg#email')}"></use>
              </svg>
            </div>
          </div>
          <div class="slds-media__body">
            <h3 class="slds-truncate" title="Mobile conversation on Monday"><a href="javascript:void(0);">Mobile conversation on Monday</a></h3>
            <p class="slds-truncate">Hi guys, Thanks for meeting with the team today and going through the proposals we saw. This goes on until it’s truncated.</p>
            <ul class="slds-list--horizontal slds-wrap">
              <li class="slds-truncate_container--50 slds-m-right--large slds-grid">
                <span class="slds-text-title">To:</span>
                <span class="slds-text-body--small slds-m-left--xx-small slds-truncate" title="Lei Chan with Long Name that might go on for quite some distance futher than you might expect"><a href="javascript:void(0);">Lei Chan with Long Name that might go on for quite some distance futher than you might expect</a></span>
                <span class="slds-no-flex slds-text-body--small"> + 44 more</span>
              </li>
              <li class="slds-m-right--large">
                <span class="slds-text-title">From:</span>
                <span class="slds-text-body--small"><a href="javascript:void(0);">Jason Dewar</a></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="slds-media__figure slds-media__figure--reverse">
        <div class="slds-timeline__actions">
          <p class="slds-timeline__date">Feb 24</p>
          <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true" title="More Options for Email, Mobile conversation">
            <svg class="slds-button__icon" aria-hidden="true">
              <use href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
            </svg>
            <span class="slds-assistive-text">More Options for Email, Mobile conversation</span>
          </button>
        </div>
      </div>
    </div>
  </li>
</ul>
</apex:page>
Feel free to Comment or ask questions if you need help!