All Projects → NigelOToole → Progress Tracker

NigelOToole / Progress Tracker

Licence: mit
A HTML component to illustrate the steps in a multi step process e.g. a multi step form, a timeline or a quiz.

Projects that are alternatives of or similar to Progress Tracker

Cirrus
☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+55.31%)
Mutual labels:  scss, sass, flexbox
Bulma Helpers
Library with missing Functional / Atomic CSS classes for Bulma framework
Stars: ✭ 263 (-42.95%)
Mutual labels:  scss, sass, flexbox
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (-66.59%)
Mutual labels:  scss, sass, flexbox
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+30.59%)
Mutual labels:  scss, sass, flexbox
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
Stars: ✭ 133 (-71.15%)
Mutual labels:  scss, sass, flexbox
Kindling
A pocket-sized grid system built on the flex display property.
Stars: ✭ 155 (-66.38%)
Mutual labels:  scss, sass, flexbox
Griddle
A CSS Grid Framework
Stars: ✭ 215 (-53.36%)
Mutual labels:  scss, sass, flexbox
Almace Scaffolding
AMSF, a.k.a. Almace Scaffolding, a super-fast Jekyll framework fighting against the website obesity.
Stars: ✭ 275 (-40.35%)
Mutual labels:  scss, sass
Styled Components Theme
Defines themes via flexible color selectors for use with styled-components
Stars: ✭ 302 (-34.49%)
Mutual labels:  scss, sass
Scssphp
SCSS compiler written in PHP
Stars: ✭ 309 (-32.97%)
Mutual labels:  scss, sass
Breakpoint Slicer
Slice media queries with ease
Stars: ✭ 332 (-27.98%)
Mutual labels:  scss, sass
Devportfolio
A lightweight, customizable single-page personal portfolio website template built with JavaScript and Sass
Stars: ✭ 3,582 (+677.01%)
Mutual labels:  scss, sass
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (-26.46%)
Mutual labels:  scss, sass
Juice
Mixins for Life
Stars: ✭ 274 (-40.56%)
Mutual labels:  scss, sass
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-41%)
Mutual labels:  scss, sass
Oruga
🐛 Oruga is a lightweight library of UI components without CSS framework dependency
Stars: ✭ 297 (-35.57%)
Mutual labels:  scss, sass
Sass Deprecate
Let Sass warn you about the pieces of your UI that are deprecated, providing a clear upgrade path for developers
Stars: ✭ 265 (-42.52%)
Mutual labels:  scss, sass
Pug Starter
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Stars: ✭ 328 (-28.85%)
Mutual labels:  scss, sass
Typesettings
A Sass or Stylus toolkit that sets type in Ems based on modular scale, vertical rhythm, and responsive ratio based headlines.
Stars: ✭ 380 (-17.57%)
Mutual labels:  scss, sass
Magento2 Theme Blank Sass
SASS based version of Magento 2 Blank theme
Stars: ✭ 373 (-19.09%)
Mutual labels:  scss, sass

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.

View demo

Installation

$ npm install progress-tracker --save

Import

After installation you can import it into your Sass files with the statement below.

@import "node_modules/progress-tracker/src/styles/progress-tracker.scss";

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.

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.

<ul class="progress-tracker">
  <li class="progress-step is-complete">
    <div class="progress-marker"></div>
  </li>
  <li class="progress-step is-complete">
    <div class="progress-marker"></div>
  </li>
  <li class="progress-step is-active">
    <div class="progress-marker"></div>
  </li>
  <li class="progress-step">
    <div class="progress-marker"></div>
  </li>
  <li class="progress-step">
    <div class="progress-marker"></div>
  </li>
</ul>

Demo site

Clone or download from Github.

    $ npm install
    $ gulp serve

License

MIT © Nigel O Toole

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].