CodePen

HTML

            
              <h2>Unstyled Lists</h2>

<ul class="unstyled-list m-1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="unstyled-list m-2">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="unstyled-list m-3">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
</ul>

<h2>Inline Lists</h2>

<ul class="inline-list m-1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="inline-list m-2">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="inline-list m-3">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<h2>Floated Lists</h2>

<ul class="floated-list m-1">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ul class="floated-list m-2">
  <li class="red">r</li>
  <li class="orange">o</li>
  <li class="yellow">y</li>
  <li class="green">g</li>
  <li class="blue">b</li>
  <li class="indigo">i</li>
  <li class="violet">v</li>
</ul>
            
          
!

CSS

            
              // UNSTYLED LISTS

.unstyled-list {
  @extend %scut-list-unstyled;
  display: inline-block;
  width: 20%;
  margin-right: 5%;
}

.unstyled-list.m-1 > li {
  background: #ccc;
}

.unstyled-list.m-2 > li {
  background: blue;
  box-shadow:
    inset 0 -0.2em 1em darkblue,
    inset 0.15em 0.15em 0.3em rgba(255, 255, 255, 0.9);
  border: 1px solid darkblue;
  border-radius: 0.4em;
  color: white;
  margin-bottom: 0.2em;
  padding: 0.3em 1em;
  text-align: center;
}

.unstyled-list.m-3 {
  border: 1px solid lightblue;
  & > li {
    padding: 0.2em 0.5em;
  }
  & > li:nth-child(even) {
    background: lightblue;
  }
}

// INLINE LISTS

.inline-list.m-1 {
  @extend %scut-list-inline;
  & > li {
    background: #ccc;
  }
}

.inline-list.m-2 {
  @include scut-list-inline(0.3em);
  & > li {
    background: indigo;
    color: white;
    border-radius: 0.3em;
    padding: 0.3em 1em;
  }
}

.inline-list.m-3 {
  @include scut-list-inline(2em);
  & > li {
    border-bottom: 3px solid;
    padding: 0.75em 1.5em;
    text-transform: uppercase;
  }
}

.inline-list {
  margin-bottom: 1em !important;
}

// FLOATED LISTS

.floated-list {
  @extend %scut-list-floated;
}

.floated-list.m-1 > li {
  background: #ccc;
}

.floated-list.m-2 {
  margin: 1em 0 0 0;
  text-transform: uppercase;
  & > li {
    font-weight: bold;
    padding: 2em 0;
    text-align: center;
    width: 2em;
  }
}

.red { background-color: red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green { background-color: green; }
.blue { background-color: blue; }
.indigo { background-color: indigo; }
.violet { background-color: violet; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................