Alexandre Demelas axdemelas

Programmer, enthusiast, creator

21 followers · 1 following

Brazil
axdemelas.com

View GitHub Profile

Recently created

Least recently created

Recently updated

Least recently updated

axdemelas / gist:978c4ab62b471731b107

Last active August 29, 2015 14:26

Usage example StepJs

	<!-- anchors -->
	<a href="#step-1" data-steps="step-example">go to step 1</a>
	<a href="#step-2" data-steps="step-example" class="active">go to step 2</a>
	<a href="#step-3" data-steps="step-example">go to step 3</a>

	<!-- step structure -->
	<div id="step-example" class="step-content">
	<div id="step-1">
	<h1>Step 1</h1>
	</div>

axdemelas / stepjsinclude.html

Created August 6, 2015 06:40

include stepjs

<script async src="stepjs.min.js"></script>

axdemelas / stepjsreq.css

Created August 6, 2015 06:44

	.step-content > *
	{
	display: none;
	}

axdemelas / this is a test

Created February 9, 2016 03:01

	<html>
	this is a test
	</html>

axdemelas / stepper-basic-markup.html

Last active February 14, 2016 04:28

Stepper basic markup

	<ul class="mdl-stepper">
	<li class="mdl-step"></li>
	<li class="mdl-step"></li>
	<li class="mdl-step"></li>
	</ul>

axdemelas / step-label-markup.html

Last active February 14, 2016 06:15

Basic step title markup

	<li class="mdl-step">
	<span class="mdl-step__label">
	<span class="mdl-step__title">
	<span class="mdl-step__title-text">Name of step 1</span>
	<span class="mdl-step__title-message">Summarize if needed</span>
	</span>
	</span>
	<!-- content -->
	<!-- actions -->
	</li>

axdemelas / step-content-markup.html

Last active February 14, 2016 06:38

Basic step content markup

	<li class="mdl-step">
	<!-- label -->
	<div class="mdl-step__content">
	</div>
	<!-- actions -->
	</li>

axdemelas / step-action-markup.html

Last active February 14, 2016 06:42

Basic step actions markup

	<li class="mdl-step">
	<!-- label -->
	<!-- content -->
	<div class="mdl-step__actions">
	<!-- continue button -->
	<!-- cancel button -->
	<!-- back button (optionally) -->
	<!-- skip button (optionally) -->
	</div>
	</li>

axdemelas / step-actions-buttons.html

Last active February 14, 2016 06:46

Basic step actions buttons

	<li class="mdl-step">
	<!-- label -->
	<!-- content -->
	<div class="mdl-step__actions">
	<button data-stepper-continue>Continue</button>
	<button data-stepper-cancel>Cancel</button>
	<button data-stepper-back>Back</button>
	<button data-stepper-skip>Skip</button>
	</div>
	</li>

axdemelas / step-action-button-style.html

Last active February 14, 2016 06:59

Step action buttons style

	<li class="mdl-step">
	<!-- label -->
	<!-- content -->
	<div class="mdl-step__actions">
	<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--colored mdl-button--raised" data-stepper-next>
	Continue
	</button>
	<button class="mdl-button mdl-js-button mdl-js-ripple-effect" data-stepper-cancel>
	Cancel
	</button>

OlderNewer