-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Version 2 of the progress tracker, with simplified code and new modif…
…iers
- Loading branch information
1 parent
68ab2cc
commit 73f6c01
Showing
25 changed files
with
8,954 additions
and
3,340 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1,11 @@ | ||
# Dependencies | ||
node_modules | ||
|
||
# Compiled output | ||
/dist | ||
/.tmp | ||
/zip | ||
|
||
# System Files | ||
.DS_Store | ||
Thumbs.db |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,55 +1,62 @@ | ||
# SASS Progress Tracker | ||
### A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz. | ||
|
||
[Live demo](http://nigelotoole.github.io/progress-tracker/) | ||
### [View demo](http://nigelotoole.github.io/progress-tracker/) | ||
|
||
A progress tracker written in SASS with flexbox to be flexible and responsive out of the box. This can be used to illustrate a multi stage process e.g. form, quiz or a timeline. | ||
|
||
|
||
## Installation | ||
|
||
### npm | ||
```javascript | ||
$ npm install progress-tracker --save | ||
``` | ||
|
||
### bower | ||
```javascript | ||
$ bower install progress-tracker --save | ||
``` | ||
|
||
### Import | ||
|
||
## Usage | ||
Once you have downloaded the code, run the commands below to view the demo. | ||
After installation you can import it into your SASS files with the statement below. | ||
|
||
```javascript | ||
$ npm install | ||
$ gulp serve | ||
```scss | ||
@import "node_modules/progress-tracker/src/styles/progress-tracker.scss"; | ||
``` | ||
|
||
You can also just import **progress-tracker.scss** into your own project and modify as needed. Optional files are **progress-tracker-animations.scss** to add animations and **progress-tracker-theme.scss** for quicker theming. | ||
The JS that is part of this site is just for demonstration purposes, add your own JS as needed to toggle the classes for the step states. | ||
|
||
### Markup | ||
|
||
Follow the HTML code example below for basic usage; each demo sets the first two steps as complete, the third step as active and the last two steps as inactive. | ||
|
||
Follow the code example below for basic usage, each demo sets the first two steps as complete, the third step as active and the last two steps as inactive. For additional styles add a modifier classes to the ul and add additional markup as needed in the examples. | ||
For additional styles add modifier classes and additional markup as needed in the examples below. You can add multiple modifier classes to achieve additional styles that those shown below. | ||
|
||
```html | ||
<ul class="progress-tracker"> | ||
<li class="progress-step is-complete"> | ||
<span class="progress-marker"></span> | ||
<div class="progress-marker"></div> | ||
</li> | ||
<li class="progress-step is-complete"> | ||
<span class="progress-marker"></span> | ||
<div class="progress-marker"></div> | ||
</li> | ||
<li class="progress-step is-active"> | ||
<span class="progress-marker"></span> | ||
<div class="progress-marker"></div> | ||
</li> | ||
<li class="progress-step"> | ||
<span class="progress-marker"></span> | ||
<div class="progress-marker"></div> | ||
</li> | ||
<li class="progress-step"> | ||
<span class="progress-marker"></span> | ||
<div class="progress-marker"></div> | ||
</li> | ||
</ul> | ||
``` | ||
|
||
|
||
### Demo site | ||
|
||
Clone or download from Github. | ||
|
||
```javascript | ||
$ npm install | ||
$ gulp serve | ||
``` | ||
|
||
|
||
### License | ||
MIT © Nigel O Toole |
Oops, something went wrong.