I created this simple responsive layout for my web apps and website projects. I'd like to ask if you see any flaws or bad practices in this code? A working demo can be seen here http://codepen.io/anon/pen/QdavpZ/ Thank you in advance, for any efforts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Layout Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
</head>
<body>
<style>
.midori-header * {
padding: 0;
margin: 0;
color: white;
font-size: 1.6rem;
line-height: 3rem;
}
.midori-header {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
color: white;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
z-index: 999;
}
.midori-header > h1 {
padding: 14px 16px;
display: inline-block;
float: left;
text-decoration: none;
margin: 0;
}
ul.midori-navigation {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Style the links inside the list items */
ul.midori-navigation li a {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* Float the list items side by side */
ul.midori-navigation li {
float: left;
margin: 0;
}
ul.midori-navigation.vertical {
position: relative;
}
ul.midori-navigation.vertical li {
float: none;
display: inline;
text-align: left;
}
ul.midori-navigation.vertical li a {
display: block;
text-align: left;
}
.main {
margin-top: 8rem;
}
.content {
margin-top: 3rem;
}
.sidebar {
height: 75vh;
}
@media screen and (min-width: 680px) {
.midori-header * {
float: right;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width: 680px) {
.midori-header > h1 {
float:none;
width:100%;
text-align: center;
}
.sidebar {
height: auto;
text-align: center;
}
.main {
margin-top: 2rem;
}
.content {
margin-top: auto;
}
.midori-header {
position: relative;
}
ul.midori-navigation.horizontal {
position: relative;
}
ul.midori-navigation.horizontal li {
float: none;
display: inline;
}
ul.midori-navigation.horizontal li a {
display: block;
text-align: center;
}
ul.midori-navigation.vertical li a {
display: block;
text-align: center;
}
}
</style>
<header class="midori-header">
<h1>Title</h1>
<ul class="midori-navigation horizontal">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</header>
<div class="container main">
<div class="row">
<div class="column sidebar">
<ul class="midori-navigation vertical">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="column column-75 content">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<footer class="container">
<div class="row">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</p>
</div>
</footer>
</body>
</html>
header
/footer
tags! The amount of code I still see which is justdiv
soup blows my mind. The only thing I'm not a fan of is how your navigation links are all contained within oneli
- it'd make more sense to have a list item for each link. \$\endgroup\$ – Joe Clay Jan 30 '17 at 10:59