Lcm layout

index.html

	<div class="page">
		<header class="">
			<div class="first"></div>
			<div class="logo"></div>
			<div class="last"></div>
		</header>
		<div class="page__content">
			<aside>
				<ul>
					<li><a href="#0"><i class="fa fa-envelope"></i><span>Your Package</span></a></li>
					<li><a href="#0"><i class="fa fa-calculator"></i><span>Calculator</span></a></li>
					<li><a href="#0"><i class="fa fa-tag"></i><span>Legenda</span></a></li>
					<li><a href="#0"><i class="fa fa-question"></i><span>FAQ</span></a></li>
					<li><a href="#0"><i class="fa fa-facebook"></i><span>Social</span></a></li>
					<li class="profile"><a href="#0"><i class="fa fa-user"></i><span>Profile</span></a></li>
				</ul>
			</aside>
			<main>
			</main>
		</div>
		<footer>
			<p>@nelreina 2016</p>
		</footer>
	</div>

Lcm layout.markdown

Lcm layout

A Pen by Nelson Reina on CodePen.

License.

scripts

<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.12.0/lodash.min.js"></script>

style.less

@base: #80bfff;
@header_bg: #004080;
.box{
	background: #fff;
	padding: 20px;
	border-radius: 10px;
}
html{
	min-width: 325px;
	max-width: 1025px;
	margin: 0 auto;
}
body{
	background: darken(@header_bg, 10);
}
.page{
	background: @base;
	height: 100vh;
	display: flex;
	flex-direction: column;
	header{
		flex: 0 0 auto;
		display: flex;
		height: 125px;
		background: #fff;
		.logo{
			flex: 0 0 306px;
			background: url('http://shipping.lcmbv.com/brand-logo.png');
		}
		.first, .last{
			flex: 1 0 auto;
			background: @header_bg;
		}

	}
	.page__content{
		padding: 10px;
		display: flex;
		flex-direction: row;
		flex: 1 0 auto;
		aside{
			min-width: 300px;
			ul{
				display: flex;
				flex-direction: column;
				.profile{
					display: none;
				}
				li{
					margin-bottom: 10px;
					i{
						margin-right: 10px;
					}
					a{
						.box;
						text-decoration: none;
						text-transform: uppercase;
						display: block;
						color: #000;
					}
					
				}
			}
		}
		main{
			padding: 0 10px;
			.page__yourpackages{
					display: flex;
				 	flex-direction: column;				
					justify-content: flex-start;
					// align-items: flex-start;
				.package-item{
					width: 90%;
					display: flex;
					margin-bottom: 10px;
					i{
						margin-left: auto;
					}
					// flex-direction: column;				
					.box;
					.package-item-desc{
						display: flex;
					}
				}

			}
		}
	}
	footer{
		flex: 0 0 auto;
		background: #333;
		color:#fff;
		font-size: 0.8rem;
		padding: 10px;
	}
}

@media(max-width: 860px){
	.page{
		.page__content{
			aside{
				min-width: 200px;
			}
		}
	}
}

@media (max-width: 768px){
	body{
		background: darken(@base, 15);
	}
	.page{
		header{
			height: 60px;
			.logo{
				background: url('http://shipping.lcmbv.com/brand-logo.png') -10px -55px ;
			}
			.first, .last{
				// background: #fff;
				// display: none;
			}
		}		
		.page__content{
			aside{
				min-width:50px;
				ul{
					li{
						i{
							padding-left: 5px;
						}
						a{
							padding: 10px;
							text-align: center;
							font-size: 1.5rem;
						}
						span{
							display: none;
						}					
					}
				}
			}
		}		
	}
}
@media (max-width: 630px){
	.page{
		header{
			.first{
				display: none;
			}
		}
	}
}
@media (max-width: 425px){
	body{
		background: darken(@base, 30);
	}
	.page{
		header{
			.first, .last{
				display: none;
			}
		}
		.page__content{
			flex-direction: column-reverse;
			aside{
				ul{
					flex-direction: row;
					justify-content: space-around;
					li{
							margin: 0;
						i{
							padding-left: 5px;
						}
						a{
							padding: 10px;
							text-align: center;
							font-size: 1.5rem;
						}
						span{
							display: none;
						}					
					}
				}
			}
			main{
				padding: 0;margin: 0;
			}
		}
	}
}
@media (max-width: 345px){
	body{
		background: lighten(@base, 10);
	}
	
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />