Multi Column List Pattern for Scales

A pattern that makes a multi-column list out of a single list.

Requirements

Scales patterns use the Sass CSS preprocessor, you'll need either Ruby Sass or LibSass.

Dependencies

utilities-clearfix

Installation

NPM: npm install --save scales-patterns-multi-col-list
Bower: bower install --save scales-patterns-multi-col-list

Usage

Multi column lists can be used when you have a single list that you want to split into multiple columns.

Two Columns

<ul class="multi-col-list two-columns">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

Three Columns

<ul class="multi-col-list three-columns">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

Four Columns

<ul class="multi-col-list four-columns">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

Five Columns

<ul class="multi-col-list five-columns">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

Six Columns

<ul class="multi-col-list six-columns">
    <li>Sass</li>
    <li>CSS</li>
    <li>HTML</li>
    <li>Javascript</li>
    <li>PHP</li>
    <li>Python</li>
</ul>

Other uses

Since there are situations where you want a list have a different number of columns at different media queries, the multi column list pattern is also able to be used as a mixin or extended as a placeholder.

@include columns(2);

@extend %two-columns;

Available Classes

.multi-col-list
.two-columns
.three-columns
.four-columns
.five-columns
.six-columns

The Scales Namespace Variable

All Scales patterns expose the $scales-namespace variable.

$scales-namespace accepts a string that will prefix all Scales classes. The default value is null.

To give all Scales classes a namespace, you will need to set this variable in a file that is imported before any scales files. For example:

@import your-project/settings; // $scales-namespace is set in this file
@import your-project/scales; // Imports the Scales library
@import your-project/project // The rest of your project imports

Extending

In your project or theme, you can easily extend the multi column list pattern to add more columns. For example:

@import scalescss/pattern-multi-col-list/multi-col-list

//
// 12 columns
///
.twelve-columns {

    > li {
        width: 8.333333333%
    }
}

You may also want to change the number of columns depending on the screen width. For example:

.my-list {
    @extend %two-columns;

    @media all and (min-width: 35em) {
        // use the columns mixin here because @extend
        // isn't supported in media queries
        ///
        @include columns(5);
    }
}

ScalesCSS/patterns-multi-col-list