Checklist Columns

Automatic multi-column list items with essential styling utilizing FontAwesome icons. Includes location marker pin drop animation on hover.

by Jon Fuller

HTML

<script src="https://use.fontawesome.com/e765ac845f.js"></script>
<div class="checklist checklist-columns-4">
	<h1>4 Column Check List</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>
<div class="checklist locationlist checklist-columns-3">
	<h1>3 Column Location List (with hover effect)</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>
<div class="checklist pdflist checklist-columns-3">
	<h1>2 Column PDF List</h1>
	<ul>
		<li>Test</li>
		<li><a href="#0">Quem periculis eum ne</a></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>
<div class="checklist pluslist">
	<h1>1 Column Plus List</h1>
	<ul>
		<li>Test</li>
		<li><a href="#0">Quem periculis eum ne</a></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-columns-2 ul li,
.checklist-columns-3 ul li,
.checklist-columns-4 ul li {
	margin-bottom: 30px !important;
}

@media (max-width: 638px) {
	.checklist-columns-2 ul li,
	.checklist-columns-3 ul li,
	.checklist-columns-4 ul li {
		margin-bottom: 20px !important;
	}
	.checklist-columns-2 ul li:last-child,
	.checklist-columns-3 ul li:last-child,
	.checklist-columns-4 ul li:last-child {
		margin-bottom: 0 !important;
	}
}

/* create columns of list items with this class */
@media (min-width: 639px) {
	.checklist-columns-2 ul::after,
	.checklist-columns-3 ul::after,
	.checklist-columns-4 ul::after {
		content: '';
		clear: both;
		display: table;
	}
	.checklist-columns-2 ul li,
	.checklist-columns-3 ul li,
	.checklist-columns-4 ul li {
		float: left;
		width: 50%;
      	padding-right: 30px;
	}
	.checklist-columns-2 ul li:nth-child(odd),
	.checklist-columns-3 ul li:nth-child(odd),
	.checklist-columns-4 ul li:nth-child(odd){
		clear: both;	
	}
}
@media (min-width: 981px) {
	.checklist-columns-3 ul li,
	.checklist-columns-4 ul li {
		float: left;
		width: 33.333333%;
	}
	.checklist-columns-3 ul li:nth-child(odd),
	.checklist-columns-4 ul li:nth-child(odd) {
		clear: none;	
	}
	.checklist-columns-3 ul li:nth-child(3n+1),
	.checklist-columns-4 ul li:nth-child(3n+1) {
		clear: both;	
	}
}
@media (min-width: 1199px) {
	.checklist-columns-4 ul li {
		float: left;
		width: 25%;
	}
	.checklist-columns-4 ul li:nth-child(odd) {
		clear: none;	
	}
	.checklist-columns-4 ul li:nth-child(3n+1) {
		clear: none;	
	}
	.checklist-columns-4 ul li:nth-child(4n+1) {
		clear: both;	
	}
}

.checklist ul li::before {
    font-family: 'FontAwesome';
    content: '\f058';
    width:...