Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dev
.gitignore
LICENSE.txt
gulpfile.js
index.html
package.json
readme.md

readme.md

Responsive Timeline

Vertical timeline which i created for a personal project. Created using Gulp and Sass.

To free edit install all dependencies:

$ npm install

Use the default task from Gulp for run all tasks:

$ gulp

And for watch changes in project use:

$ gulp watch

How to use

Style

If you can use timeline in your project, first add the timeline stylesheet or import via Sass

HTML - you can see the compiled file here

<link rel="stylesheet" href="styles-path/timeline.css">

SCSS - import the scss file into your base file: timeline.scss. if you use this way, copy _mixins.scss to same folder.

@import 'styles-path/timeline';

Markup

Each timeline box content is used within timeline-item, to create ilimited boxes, copy and paste all content from timeline-item.

Paste the following markup in your main file.

<!-- Timeline -->
<div id="timeline">
	<!-- Timeline Item, copy from here to create various boxes -->
	<div class="timeline-item">
		<!--Icon inside the circle-->
		<div class="timeline-icon">
			<img src="assets/images/star.svg" alt="">
		</div>
		<!-- Content from timeline box and position (right or left)-->
		<div class="timeline-content right">
			<h2>LOREM IPSUM DOLOR</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
				Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
			</p>
			<a href="#" class="btn">button</a>
		</div>
	</div>
</div>

License

MIT License © Bruno Rodrigues