Menu icon Foundation
Step by Step list

Hey there people,

I made what I call a "Step by Step list" that I want to share with you guys.
Better than a long description of what it is, here comes an image so you see what it looks like :

Sbsl

Basic markup :

<ul class="steps">
    <li>First Step</li>
    <li class="active">Current Step</li>
    <li class="disabled">Next Step</li>
    <li class="disabled">Last Step</li>
</ul>

If you'd prefer that it takes full width, use the expanded class, and then you can also evenly space the steps in it with the classes even-2 to even-6

<ul class="steps expanded even-4">
    <li>First Step</li>
    <li class="active">Current Step</li>
    <li class="disabled">Next Step</li>
    <li class="disabled">Last Step</li>
</ul>

You want it to be vertical so it fits better on small screens ?
It's easy, just add the class vertical :

<ul class="steps vertical">
    <li>First Step</li>
    <li class="active">Current Step</li>
    <li class="disabled">Next Step</li>
    <li class="disabled">Last Step</li>
</ul>

You can also use the classes radius (both basic and vertical) and round (basic only).

You can check all of this here : http://codepen.io/Lynesth/pen/iIxnq

And here comes the full CSS :

.steps {
    cursor: pointer;
    display: inline-block;
    font-size: 0px;
    overflow: hidden;
    border: 1px solid #ccc;
    line-height: 1;
    box-sizing: border-box;
    padding-left: 0;
}

.steps.vertical {
    overflow: visible;
}

.steps.radius {
    border-radius: 5px;
}

.steps.vertical.radius li:first-child {
    border-radius: 5px 5px 0 0;
}

.steps.vertical.radius li:last-child {
    border-radius: 0 0 5px 5px;
}

.steps.round:not(.vertical) {
    border-radius: 1000px;
}

.steps li {
    display: inline-block;
    position: relative;
    padding: 1em 2em 1em 3em;
    vertical-align: top;
    background-color: #fafafa;
    box-sizing: border-box;
    font-size: 1rem;
}

.steps.vertical li {
    display: block;
}

.steps.vertical li:after {
    display: none;
}

.steps:not(.vertical) li:after {
    display: block;
    position: absolute;
    z-index: 2;
    content: "";
    top: 0.36em;
    right: -1.2em;
    width: 2.3em;
    height: 2.3em;
    background-color: #fafafa;
    transform: rotate(-45deg);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.steps.vertical li.active:after {
    display: block;
    position: absolute;
    z-index: 2;
    content: "";
    top: 0px;
    right: -1.45em;
    background-color: transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid #007295;
    border-top: 1.5em solid transparent;
    width: 0px;
    height: 0px;
    transform: none;
}

.steps:not(.vertical) li:first-child {
    padding-left: 2.5em;
}

.steps:not(.vertical) li:last-child {
    padding-right: 2.5em;
}

.steps li:hover,
.steps li:hover:after {
    background-color: #e6f4f9;
}

.steps li.active,
.steps li.active:after {
  background-color: #007295;
  color: #fff;
}

.steps li.disabled,
.steps li.disabled:after {
  background-color: #fff;
  color: #aaa;
  cursor: default;
}

Have fun guys !

Kind regards,

Lyn.

Foundation 5pluginpluginslist

Hey there people,

I made what I call a "Step by Step list" that I want to share with you guys.
Better than a long description of what it is, here comes an image so you see what it looks like :

Sbsl

Basic markup :

<ul class="steps">
    <li>First Step</li>
    <li class="active">Current Step</li>
    <li class="disabled">Next Step</li>
    <li class="disabled">Last Step</li>
</ul>

If you'd prefer that it takes full width, use the expanded class, and then you can also evenly space the steps in it with the classes even-2 to even-6

<ul class="steps expanded even-4">
    <li>First Step</li>
    <li class="active">Current Step</li>
    <li class="disabled">Next Step</li>
    <li class="disabled">Last Step</li>
</ul>

You want it to be vertical so it fits better on small screens ?
It's easy, just add the class vertical :

<ul class="steps vertical">
    <li>First Step</li>
    <li class="active">Current Step</li>
    <li class="disabled">Next Step</li>
    <li class="disabled">Last Step</li>
</ul>

You can also use the classes radius (both basic and vertical) and round (basic only).

You can check all of this here : http://codepen.io/Lynesth/pen/iIxnq

And here comes the full CSS :

.steps {
    cursor: pointer;
    display: inline-block;
    font-size: 0px;
    overflow: hidden;
    border: 1px solid #ccc;
    line-height: 1;
    box-sizing: border-box;
    padding-left: 0;
}

.steps.vertical {
    overflow: visible;
}

.steps.radius {
    border-radius: 5px;
}

.steps.vertical.radius li:first-child {
    border-radius: 5px 5px 0 0;
}

.steps.vertical.radius li:last-child {
    border-radius: 0 0 5px 5px;
}

.steps.round:not(.vertical) {
    border-radius: 1000px;
}

.steps li {
    display: inline-block;
    position: relative;
    padding: 1em 2em 1em 3em;
    vertical-align: top;
    background-color: #fafafa;
    box-sizing: border-box;
    font-size: 1rem;
}

.steps.vertical li {
    display: block;
}

.steps.vertical li:after {
    display: none;
}

.steps:not(.vertical) li:after {
    display: block;
    position: absolute;
    z-index: 2;
    content: "";
    top: 0.36em;
    right: -1.2em;
    width: 2.3em;
    height: 2.3em;
    background-color: #fafafa;
    transform: rotate(-45deg);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

.steps.vertical li.active:after {
    display: block;
    position: absolute;
    z-index: 2;
    content: "";
    top: 0px;
    right: -1.45em;
    background-color: transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid #007295;
    border-top: 1.5em solid transparent;
    width: 0px;
    height: 0px;
    transform: none;
}

.steps:not(.vertical) li:first-child {
    padding-left: 2.5em;
}

.steps:not(.vertical) li:last-child {
    padding-right: 2.5em;
}

.steps li:hover,
.steps li:hover:after {
    background-color: #e6f4f9;
}

.steps li.active,
.steps li.active:after {
  background-color: #007295;
  color: #fff;
}

.steps li.disabled,
.steps li.disabled:after {
  background-color: #fff;
  color: #aaa;
  cursor: default;
}

Have fun guys !

Kind regards,

Lyn.

Arthur de la Rocha about 5 years ago

This is cool Lyn!

Thanks for posting the code to help others out. Would be cool for 5.4 :D

Rafi Benkual about 5 years ago

Hey this is sweet! What do you think about adding it to the codebase?

James Stone about 5 years ago

Awesome job Lyn! I think I am going to use this on my next project :D

P.S. I would be happy to create a "ZURB Style scss/sass component" for the 5.4 WIP. Just let me know.

Lyn about 5 years ago

Hey there everyone !

I'm glad you guys like it !
I'm currently making a few more things that should be up within 24 hours ! ;)

And to all of you who proposed, I think this needs to be tested to be sure it works under all circomstances, but yeah, that would be awesome to have it included in Foundation !

@James : I don't know anything about scss/sass (I know, I know, I will take time to look at that someday), so feel free to do so ^

Regards,

Lyn.

PS : I think I'll add an expanded class to it before though.... brb

Lyn about 5 years ago

New classes added which goes very well together !

expanded : make it take all horizontal available space
even-2 to even-6 : make sure all steps take the same space inside their container

Codepen updated in OP ;)

Regards,

Lyn.

Joe Ravgiala about 5 years ago

Will it work in ie 8? If not, what changes are needed?

Lyn about 5 years ago

Hey there Joe,

I don't think this would work in anything under IE9 actually because of some CSS properties (like the font-size in rem, or the transform: rotate).
Unfortunatly, I don't have any IE8 to test things on.

Though I think that you can at least get the vertical one working using this :

.steps.vertical {
    cursor: pointer;
    display: inline-block;
    font-size: 0px;
    border: 1px solid #ccc;
    line-height: 1;
    box-sizing: border-box;
    padding-left: 0;
    overflow: visible;
}

.steps.vertical.radius {
    border-radius: 5px;
}

.steps.vertical.radius li:first-child {
    border-radius: 5px 5px 0 0;
}

.steps.vertical.radius li:last-child {
    border-radius: 0 0 5px 5px;
}

.steps.vertical li {
    position: relative;
    padding: 1em 2em 1em 3em;
    vertical-align: top;
    background-color: #fafafa;
    box-sizing: border-box;
    font-size: 16px;
    display: block;
}

.steps.vertical li.active:after {
    display: block;
    position: absolute;
    z-index: 2;
    content: "";
    top: 0px;
    right: -1.45em;
    background-color: transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid #007295;
    border-top: 1.5em solid transparent;
    width: 0px;
    height: 0px;
    transform: none;
}

.steps li:hover,
.steps li:hover:after {
    background-color: #e6f4f9;
}

.steps li.active,
.steps li.active:after {
  background-color: #007295;
  color: #fff;
}

.steps li.disabled,
.steps li.disabled:after {
  background-color: #fff;
  color: #aaa;
  cursor: default;
}

Kind regards,

Lyn.