Checklist Columns (Col Count)

Automatic multi-column list items with essential styling utilizing FontAwesome icons.

by Jon Fuller

HTML

<script src="https://use.fontawesome.com/e765ac845f.js"></script>
<div class="checklist col-count-2">
	<h1>2 Column Check List (Col Count)</h1>
	<ul>
		<li>Test</li>
		<li>Quem periculis eum ne</li>
		<li>Dicta aperiri intellegam ei nam</li>
		<li>Ut veri discere</li>
		<li>Lorem ipsum dolor sit amet</li>
		<li>Quem periculis</li>
	</ul>
</div>

CSS

body {font-family: sans-serif; font-size: 16px; line-height: 1.6em;}
* {box-sizing: border-box;}


/* -- CHECKLIST -- */

.checklist ul {
    margin: 0;
	padding: 0 !important;
    list-style: none;
}

.checklist ul li {
    position: relative;
    padding-left: 30px;
    margin: 0 0 6px !important;
}

.checklist ul li::before {
    font-family: 'FontAwesome';
    content: '\f058';
    width: 20px;
    margin: 0;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    color: #32a709;
    /* set font size helps make icon sharper */
    font-size: 22px;
	font-weight: normal;
}

/* create columns of list items with this class */
@media (min-width: 639px) {
	.col-count-2 ul {
		-moz-column-count: 2;
		-moz-column-gap: 20px;
		-webkit-column-count: 2;
		-webkit-column-gap: 20px;
		column-count: 2;
		column-gap: 20px;	
	}
}