Inline Block List

The Code

HTML

<div class="row">
  <div class="col-default-12 col-tablet-6">
    <div>
      <h2>Normal Lists</h2>

      <h3>Lists</h3>

      <div>
        <!-- <h4>Definition list</h4>
        <dl>
          <dt>Definition List Title</dt>
          <dd>This is a definition list division.</dd>
        </dl> -->
        <h4>Ordered Lists</h4>
        <h5>Numerical</h5>
        <ol type="1">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Uppercase</h5>
        <ol type="A">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Lowercase</h5>
        <ol type="a">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Uppercase</h5>
        <ol type="I">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Lowercase</h5>
        <ol type="i">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h4>Unordered Lists</h4>
        <h5>disc</h5>
        <ul type="disc">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>circle</h5>
        <ul type="circle">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>square</h5>
        <ul type="square">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>none</h5>
        <ul type="none">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>
      <p><a href="#top">[Top]</a></p>

      <hr>

      <h3>Nested Lists</h3>
      <div>
        <h4>Ordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ol>
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ol>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ol>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ol>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ol>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ol>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ol>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ol>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ol>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ol>
                                </li>
                                <li>in voluptate velit</li>
                              </ol>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ol>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ol>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ol>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ol>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ol>
        </div>
        <h4>Unordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ul>
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ul>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ul>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ul>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ul>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ul>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ul>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ul>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ul>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ul>
                                </li>
                                <li>in voluptate velit</li>
                              </ul>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ul>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ul>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ul>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ul>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ul>
        </div>
      </div>

      <hr>

      <h3>Column Lists</h3>

      <p><code class="language-html">&lt;ul class=&quot;list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4&quot;&gt;</code></p>

      <h4>Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol class="list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4">
          <li>Lorem ipsum</li>
          <li>dolor sit amet,</li>
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut</li>
          <li>labore et dolore magna aliqua.</li>
          <li>Ut enim ad minim veniam,</li>
          <li>quis nostrud exercitation</li>
          <li>ullamco laboris nisi ut</li>
          <li>aliquip ex ea commodo consequat.</li>
          <li>Duis aute irure dolor in reprehenderit</li>
          <li>in voluptate velit</li>
          <li>esse cillum dolore eu fugiat nulla pariatur.</li>
          <li>Excepteur sint occaecat</li>
          <li>cupidatat non proident,</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>aliquip ex ea commodo consequat</li>
          <li>in voluptate velit</li>
          <li>Excepteur sint occaecat</li>
          <li>quis nostrud exercitation</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
      <h4>Nested Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol>
          <li>Lorem ipsum</li>
          <li>dolor sit amet,
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut
            <ol class="list--columns col-default-1 col-phone-2" style="background:rgba(255,0,0,0.125);">
              <li>labore et dolore magna aliqua.</li>
              <li>Ut enim ad minim veniam,
              <li>quis nostrud exercitation</li>
              <li>ullamco laboris nisi ut
                <ol>
                  <li>aliquip ex ea commodo consequat.</li>
                  <li>Duis aute irure dolor in reprehenderit
                  <li>in voluptate velit</li>
                  <li>esse cillum dolore eu fugiat nulla pariatur.
                    <ol class="list--columns col-default-2 col-phone-1 col-tablet-2" style="background:rgba(0,0,255,0.125);">
                      <li>Excepteur sint occaecat</li>
                      <li>cupidatat non proident,
                      <li>sunt in culpa qui</li>
                      <li>officia deserunt mollit anim id est laborum.</li>
                      <li>aliquip ex ea commodo consequat</li>
                    </ol>
                  </li>
                  <li>in voluptate velit</li>
                  <li>Excepteur sint occaecat</li>
                </ol>
              </li>
              <li>quis nostrud exercitation</li>
              <li>sunt in culpa qui</li>
            </ol>
          </li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
    </div>
  </div>
  <div class="col-default-12 col-tablet-6">
    <div>
      <h2>Inline Block Lists</h2>

      <h3>Lists</h3>

      <div>
        <!-- <h4>Definition list</h4>
        <dl>
          <dt>Definition List Title</dt>
          <dd>This is a definition list division.</dd>
        </dl> -->
        <h4>Ordered Lists</h4>
        <h5>Numerical</h5>
        <ol class="list--inline-block" type="1">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Uppercase</h5>
        <ol class="list--inline-block list--upper-alpha" type="A">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Alphabetical Lowercase</h5>
        <ol class="list--inline-block list--lower-alpha" type="a">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Uppercase</h5>
        <ol class="list--inline-block list--upper-roman" type="I">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h5>Roman Numeral Lowercase</h5>
        <ol class="list--inline-block list--lower-roman" type="i">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
        <h4>Unordered Lists</h4>
        <h5>disc</h5>
        <ul class="list--inline-block" type="disc">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>circle</h5>
        <ul class="list--inline-block" type="circle">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>square</h5>
        <ul class="list--inline-block" type="square">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
        <h5>none</h5>
        <ul class="list--inline-block" type="none">
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>
      <p><a href="#top">[Top]</a></p>

      <hr>

      <h3>Nested Lists</h3>
      <div>
        <h4>Ordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ol class="list--inline-block">
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ol>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ol>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ol>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ol>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ol>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ol>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ol>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ol>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ol>
                                </li>
                                <li>in voluptate velit</li>
                              </ol>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ol>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ol>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ol>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ol>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ol>
        </div>
        <h4>Unordered List</h4>
        <div class="div--content content--inset content-overflow">
          <ul class="list--inline-block">
            <li>Lorem ipsum</li>
            <li>dolor sit amet,
              <ul>
                <li>consectetur adipisicing elit,</li>
                <li>sed do eiusmod tempor incididunt ut
                  <ul>
                    <li>labore et dolore magna aliqua.</li>
                    <li>Ut enim ad minim veniam,
                      <ul>
                        <li>quis nostrud exercitation</li>
                        <li>ullamco laboris nisi ut
                          <ul>
                            <li>aliquip ex ea commodo consequat.</li>
                            <li>Duis aute irure dolor in reprehenderit
                              <ul>
                                <li>in voluptate velit</li>
                                <li>esse cillum dolore eu fugiat nulla pariatur.
                                  <ul>
                                    <li>Excepteur sint occaecat</li>
                                    <li>cupidatat non proident,
                                      <ul>
                                        <li>sunt in culpa qui</li>
                                        <li>officia deserunt mollit anim id est laborum.</li>
                                      </ul>
                                    </li>
                                    <li>aliquip ex ea commodo consequat</li>
                                  </ul>
                                </li>
                                <li>in voluptate velit</li>
                              </ul>
                            </li>
                            <li>Excepteur sint occaecat</li>
                          </ul>
                        </li>
                        <li>quis nostrud exercitation</li>
                      </ul>
                    </li>
                    <li>sunt in culpa qui</li>
                  </ul>
                </li>
                <li>officia deserunt mollit anim id est laborum.</li>
              </ul>
            </li>
            <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
          </ul>
        </div>
      </div>

      <hr>

      <h3>Column Lists</h3>

      <p><code class="language-html">&lt;ul class=&quot;list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4&quot;&gt;</code></p>

      <h4>Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol class="list--inline-block list--columns col-default-1 col-phone-2 col-tablet-3 col-desktop-small-4">
          <li>Lorem ipsum</li>
          <li>dolor sit amet,</li>
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut</li>
          <li>labore et dolore magna aliqua.</li>
          <li>Ut enim ad minim veniam,</li>
          <li>quis nostrud exercitation</li>
          <li>ullamco laboris nisi ut</li>
          <li>aliquip ex ea commodo consequat.</li>
          <li>Duis aute irure dolor in reprehenderit</li>
          <li>in voluptate velit</li>
          <li>esse cillum dolore eu fugiat nulla pariatur.</li>
          <li>Excepteur sint occaecat</li>
          <li>cupidatat non proident,</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>aliquip ex ea commodo consequat</li>
          <li>in voluptate velit</li>
          <li>Excepteur sint occaecat</li>
          <li>quis nostrud exercitation</li>
          <li>sunt in culpa qui</li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
      <h4>Nested Column List</h4>
      <div class="div--content content--inset content-overflow">
        <ol class="list--inline-block">
          <li>Lorem ipsum</li>
          <li>dolor sit amet,
          <li>consectetur adipisicing elit,</li>
          <li>sed do eiusmod tempor incididunt ut
            <ol class="list--columns col-default-1 col-phone-2" style="background:rgba(255,0,0,0.125);">
              <li>labore et dolore magna aliqua.</li>
              <li>Ut enim ad minim veniam,
              <li>quis nostrud exercitation</li>
              <li>ullamco laboris nisi ut
                <ol>
                  <li>aliquip ex ea commodo consequat.</li>
                  <li>Duis aute irure dolor in reprehenderit
                  <li>in voluptate velit</li>
                  <li>esse cillum dolore eu fugiat nulla pariatur.
                    <ol class="list--columns col-default-2 col-phone-1 col-tablet-2" style="background:rgba(0,0,255,0.125);">
                      <li>Excepteur sint occaecat</li>
                      <li>cupidatat non proident,
                      <li>sunt in culpa qui</li>
                      <li>officia deserunt mollit anim id est laborum.</li>
                      <li>aliquip ex ea commodo consequat</li>
                    </ol>
                  </li>
                  <li>in voluptate velit</li>
                  <li>Excepteur sint occaecat</li>
                </ol>
              </li>
              <li>quis nostrud exercitation</li>
              <li>sunt in culpa qui</li>
            </ol>
          </li>
          <li>officia deserunt mollit anim id est laborum.</li>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</li>
        </ol>
      </div>
    </div>
  </div>
</div>

CSS

ol:not([type]) {
  list-style-type: decimal;
}

ol:not([type]) ol:not([type]) {
  list-style-type: lower-alpha;
}

ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-roman;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: decimal;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-alpha;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-roman;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: decimal;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-alpha;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: lower-roman;
}

ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) ol:not([type]) {
  list-style-type: decimal;
}

ul:not([type]) {
  list-style-type: disc;
}

ul:not([type]) ul:not([type]) {
  list-style-type: circle;
}

ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: square;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: disc;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: circle;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: square;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: disc;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: circle;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: square;
}

ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) ul:not([type]) {
  list-style-type: disc;
}

ol.list--inline-block,ol.list--inline-block ol {
  counter-reset: counter_list;
}

ol.list--inline-block li {
  display: inline-block;
  position: relative;
  width: 100%;
}

ol.list--inline-block li::before {
  text-align: right;
  counter-increment: counter_list;
  display: inline-block;
  min-width: 1.75em;
  padding-right: 0.25em;
  margin-left: -1.75em;
  counter-increment: counter_list;
}

ol.list--inline-block li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block ol ol ol li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol ol ol ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol ol ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block ol ol ol ol ol ol li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block ol ol ol ol ol ol ol ol ol ol ol li::before {
  content: counter(counter_list, lower-roman) ".";
}

ol.list--inline-block[type="1"] li:before {
  content: counter(counter_list, decimal) ".";
}

ol.list--inline-block[type="A"].list--upper-alpha li:before {
  content: counter(counter_list, upper-alpha) ".";
}

ol.list--inline-block[type="a"].list--lower-alpha li:before {
  content: counter(counter_list, lower-alpha) ".";
}

ol.list--inline-block[type="I"].list--upper-roman li:before {
  content: counter(counter_list, upper-roman) ".";
}

ol.list--inline-block[type="i"].list--lower-roman li:before {
  content: counter(counter_list, lower-roman) ".";
}

ul.list--inline-block li {
  display: inline-block;
  position: relative;
  width: 100%;
}

ul.list--inline-block li::before {
  position: absolute;
  left: -16px;
  top: 0;
}

ul.list--inline-block li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block ul ul ul li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul ul ul ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul ul ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block ul ul ul ul ul ul li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul ul ul ul ul ul ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul ul li::before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul ul ul li::before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block ul ul ul ul ul ul ul ul ul ul ul li::before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block[type="disc"] li:before {
  content: '\2022';
  font-size: 1.375rem;
}

ul.list--inline-block[type="circle"] li:before {
  content: '\25CB';
  font-size: 0.875rem;
}

ul.list--inline-block[type="square"] li:before {
  content: '\ffed';
  font-size: 1rem;
}

ul.list--inline-block[type="none"] li:before {
  content: "";
}

.list--columns {
  -webkit-column-gap: 32px;
  -moz-column-gap: 32px;
  column-gap: 32px;
}

.list--columns.col-default-1 {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}

.list--columns.col-default-2 {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}

.list--columns.col-default-3 {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}

.list--columns.col-default-4 {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
}

.list--columns.col-default-5 {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
}

.list--columns.col-default-6 {
  -webkit-column-count: 6;
  -moz-column-count: 6;
  column-count: 6;
}

.list--columns.col-default-7 {
  -webkit-column-count: 7;
  -moz-column-count: 7;
  column-count: 7;
}

.list--columns.col-default-8 {
  -webkit-column-count: 8;
  -moz-column-count: 8;
  column-count: 8;
}

@media (min-width: 321px) {
  .list--columns.col-phone-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .list--columns.col-phone-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .list--columns.col-phone-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .list--columns.col-phone-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }

  .list--columns.col-phone-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }

  .list--columns.col-phone-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }

  .list--columns.col-phone-7 {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
  }

  .list--columns.col-phone-8 {
    -webkit-column-count: 8;
    -moz-column-count: 8;
    column-count: 8;
  }
}

@media (min-width: 769px) {
  .list--columns.col-tablet-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .list--columns.col-tablet-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .list--columns.col-tablet-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .list--columns.col-tablet-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }

  .list--columns.col-tablet-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }

  .list--columns.col-tablet-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }

  .list--columns.col-tablet-7 {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
  }

  .list--columns.col-tablet-8 {
    -webkit-column-count: 8;
    -moz-column-count: 8;
    column-count: 8;
  }
}

@media (min-width: 1025px) {
  .list--columns.col-desktop-small-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }

  .list--columns.col-desktop-small-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
  }

  .list--columns.col-desktop-small-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
  }

  .list--columns.col-desktop-small-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
  }

  .list--columns.col-desktop-small-5 {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
  }

  .list--columns.col-desktop-small-6 {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6;
  }

  .list--columns.col-desktop-small-7 {
    -webkit-column-count: 7;
    -moz-column-count: 7;
    column-count: 7;
  }

  .list--columns.col-desktop-small-8 {
    -webkit-column-count: 8;
    -moz-column-count: 8;
    column-count: 8;
  }
}

SASS (SCSS)

$page_gap: 16px;

ol:not([type]) {
  list-style-type: decimal;
  & & {
    list-style-type: lower-alpha;
  }
  & & & {
    list-style-type: lower-roman;
  }

  & & & & {
    list-style-type: decimal;
  }
  & & & & & {
    list-style-type: lower-alpha;
  }
  & & & & & & {
    list-style-type: lower-roman;
  }

  & & & & & & & {
    list-style-type: decimal;
  }
  & & & & & & & & {
    list-style-type: lower-alpha;
  }
  & & & & & & & & & {
    list-style-type: lower-roman;
  }

  & & & & & & & & & & {
    list-style-type: decimal;
  }
}

ul:not([type]) {
  list-style-type: disc;
  & & {
    list-style-type: circle;
  }
  & & & {
    list-style-type: square;
  }

  & & & & {
    list-style-type: disc;
  }
  & & & & & {
    list-style-type: circle;
  }
  & & & & & & {
    list-style-type: square;
  }

  & & & & & & & {
    list-style-type: disc;
  }
  & & & & & & & & {
    list-style-type: circle;
  }
  & & & & & & & & & {
    list-style-type: square;
  }

  & & & & & & & & & & {
    list-style-type: disc;
  }
}

// =============================================================================
// Inline Block Lists

ol.list--inline-block {
  &, & ol {
    counter-reset: counter_list;
  }

  & li {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  & li::before {
    counter-increment: counter_list;
    display: inline-block;
    margin-left: -1.75em;
    min-width: 1.75em;
    padding-right: 0.25em;
    text-align: right;
  }

  & li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  & ol ol ol li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol ol ol ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol ol ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  & ol ol ol ol ol ol li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  & ol ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, decimal) ".";
  }
  & ol ol ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-alpha) ".";
  }
  & ol ol ol ol ol ol ol ol ol ol ol li::before {
    content: counter(counter_list, lower-roman) ".";
  }

  &[type="1"] li:before {
    content: counter(counter_list, decimal) ".";
  }
  &[type="A"].list--upper-alpha li:before {
    content: counter(counter_list, upper-alpha) ".";
  }
  &[type="a"].list--lower-alpha li:before {
    content: counter(counter_list, lower-alpha) ".";
  }
  &[type="I"].list--upper-roman li:before {
    content: counter(counter_list, upper-roman) ".";
  }
  &[type="i"].list--lower-roman li:before {
    content: counter(counter_list, lower-roman) ".";
  }
}

ul.list--inline-block {
  & li {
    display: inline-block;
    position: relative;
    width: 100%;
  }
  & li::before {
    position: absolute;
    left: -16px;
    top: 0;
  }

  & li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  & ul ul ul li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul ul ul ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul ul ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  & ul ul ul ul ul ul li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul ul ul ul ul ul ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul ul ul ul ul ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  & ul ul ul ul ul ul ul ul ul li::before {
    content: '\2022';
    font-size: 1.375rem;
  }
  & ul ul ul ul ul ul ul ul ul ul li::before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  & ul ul ul ul ul ul ul ul ul ul ul li::before {
    content: '\ffed';
    font-size: 1rem;
  }

  &[type="disc"] li:before {
    content: '\2022';
    font-size: 1.375rem;
  }
  &[type="circle"] li:before {
    content: '\25CB';
    font-size: 0.875rem;
  }
  &[type="square"] li:before {
    content: '\ffed';
    font-size: 1rem;
  }
  &[type="none"] li:before {
    content: "";
  }
}

// =============================================================================
// List Columns

.list--columns {
  column-gap: $page_gap * 2;
}

.list--columns {
  &.col-default-1 { column-count: 1; }
  &.col-default-2 { column-count: 2; }
  &.col-default-3 { column-count: 3; }
  &.col-default-4 { column-count: 4; }
  &.col-default-5 { column-count: 5; }
  &.col-default-6 { column-count: 6; }
  &.col-default-7 { column-count: 7; }
  &.col-default-8 { column-count: 8; }
}

@media (min-width: 321px) {
  .list--columns {
    &.col-phone-1 { column-count: 1; }
    &.col-phone-2 { column-count: 2; }
    &.col-phone-3 { column-count: 3; }
    &.col-phone-4 { column-count: 4; }
    &.col-phone-5 { column-count: 5; }
    &.col-phone-6 { column-count: 6; }
    &.col-phone-7 { column-count: 7; }
    &.col-phone-8 { column-count: 8; }
  }
}

@media (min-width: 769px) {
  .list--columns {
    &.col-tablet-1 { column-count: 1; }
    &.col-tablet-2 { column-count: 2; }
    &.col-tablet-3 { column-count: 3; }
    &.col-tablet-4 { column-count: 4; }
    &.col-tablet-5 { column-count: 5; }
    &.col-tablet-6 { column-count: 6; }
    &.col-tablet-7 { column-count: 7; }
    &.col-tablet-8 { column-count: 8; }
  }
}

@media (min-width: 1025px) {
  .list--columns {
    &.col-desktop-small-1 { column-count: 1; }
    &.col-desktop-small-2 { column-count: 2; }
    &.col-desktop-small-3 { column-count: 3; }
    &.col-desktop-small-4 { column-count: 4; }
    &.col-desktop-small-5 { column-count: 5; }
    &.col-desktop-small-6 { column-count: 6; }
    &.col-desktop-small-7 { column-count: 7; }
    &.col-desktop-small-8 { column-count: 8; }
  }
}