Skip to content

Timelines 5 New Timeline Options

Timeline 3: .timeline-right

The Start
Feb 2011

John & Mike Doe meet for first at Kings College London

Acsi quibus tamen. Blandit nisl patria pecus turpis vindico ymo.

April 2011

John Doe launches first website

Conventio gemino praesent quis. Aliquam caecus causa defui jus nulla pecus rusticus sudo vero.

The Middle
Sept 2011

The company was born

Antehabeo cui esca iusto luctus nimis velit. Acsi autem dignissim ea et ex huic odio vero wisi.

Dec 2011

Company lands first major client

Decet distineo eu eum facilisi illum nunc populus te. Diam importunus obruo olim sino typicus utrum.

To be continued........

Options

4 Timeline variations (combine with .timeline) classes available:

  1. Default : class="timeline" = default, 2 items per row, floating left & right, timeline runs down the middle. Is stacked on mobile.
  2. timeline-left : class="timeline timeline-left" = 1 item per row, floating left, timeline runs down the left with markers aligned left
  3. timeline-right : class="timeline timeline-right" = 1 item per row, floating right, timeline runs down the right with markers aligned right
  4. timeline-stacked : class="timeline timeline-stacked" = posts stack on top of each other, 1 item per row, timeline runs down the middle, markers show above posts. Is default mobile layout.
  5. timeline carousel

Timeline item (combine with .timeline-item) classes available:

  1. overlap-off = drops the item overlap
  2. overlap-pull-large = class to pull item up 120px
  3. overlap-pull-small = class to pull item up 30px
  4. overlap-push-large = class to push item down 120px
  5. overlap-push-medium = class to push item down 60px
  6. overlap-push-small = class to push item down 30px
  7. right = pulls item to right
  8. highlight = highlights the marker with primary colour

Awesome Features

Beginner + developer friendly
Free Lifetime Upgrades
Fully Responsive
About Us

Making the web a prettier place one template at a time! We make beautiful, quality, responsive Drupal & web templates!

Find out more
Contact Us

019223 8092344

info@themelize.me

Sunshine House, Sunville. SUN12 8LU.

Colour Options

AppStrap comes with 11 pre-defined colour options which are shown below.

You can easily switch colours doing one of the following:

  1. via the config colourScheme option
  2. or via ./src/scss/_variables.scss defining a preset colour or by defining your own.


Cookies are NOT enabled so colour selection is not persistent.

To main homepage

To admin homepage

To intro page