Flexbox project: Blog Layout

The HTML Markup:

<header class="site-header">
        <img src="img/logo.png" class="logo">
    </header>

    <nav class="main-navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </nav>

    <div class="content">
        <main class="main-content">
            <h1>Entry Title</h1>
            <img src="img/image.jpg" class="featured-image">
            
            <p>Donec ac cursus elit, et sodales nulla. Suspendisse ac lectus sit amet dui egestas tincidunt ut at mi. Aenean consectetur dignissim nibh, eget bibendum sapien. Sed tincidunt cursus nulla. Maecenas blandit metus nulla. Mauris dolor lorem, mattis ac consectetur ac, mollis vel neque. Aliquam erat volutpat. Sed eleifend eleifend lorem, eget auctor dolor luctus et. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean egestas, mi nec pulvinar interdum, velit ipsum facilisis urna, quis sollicitudin erat purus eu neque. Integer at mauris neque.</p>

            <p>Quisque id ipsum nunc. Praesent pellentesque commodo gravida. Integer ipsum tortor, dictum vitae vulputate euismod, ultricies fermentum nisl. Nulla porta turpis ac elit maximus mattis. Vivamus in justo sed augue ornare finibus. Duis congue nibh vel vulputate bibendum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec pharetra nulla nec velit imperdiet, eu varius tellus hendrerit. Maecenas vitae pretium lectus. Etiam sit amet massa nunc.</p>
            
            <p>Cras auctor ut libero vel aliquam. Morbi vulputate euismod dolor, malesuada finibus arcu tempus eu. Pellentesque a porttitor orci, eget dictum justo. Phasellus bibendum imperdiet sapien, eget mattis felis eleifend id. Nulla rutrum ligula quis dolor ornare, eget iaculis nisl venenatis. Nullam non elit vitae justo lobortis egestas vel nec libero. Cras eget nibh augue. Curabitur maximus elit metus, in semper felis vestibulum a. Phasellus sit amet nunc cursus, placerat lorem a, placerat odio. Pellentesque sollicitudin diam a mattis luctus. Donec nec feugiat libero, sit amet viverra eros. Duis at porta lectus.</p>

        </main>
        <aside class="sidebar">
            <h2>Latest Blog Entries</h2>
            <ul>
                <li><a href="#">Vestibulum maximus est sit amet mauris ullamcorper mattis.</a></li>
                <li><a href="#">Aliquam a tellus suscipit, dignissim est sed, interdum magna.</a></li>
                <li><a href="#">Nam vel lectus nec sapien consectetur sollicitudin.</a></li>
                <li><a href="#">Morbi consectetur turpis vel elementum tempor.</a></li>
            </ul>
        </aside>
    </div><!--.content-->

    <footer class="site-footer">
        <p>The Travel Blog. 2019 &copy; All Rights Reserved.</p>
    </footer>

The page should look like this:

figure1-2

Adding the CSS

In the following css we have our variables and for that we are using css3 root variables feature. We’re also setting the HTML to have border box and all of the elements on the page. We’ve also added the styles for the header:

:root {
    --mainFont : 'Lora', serif;
    --primary: #05bae6;
    --secondary : #db008d;
    --gray : #e5e5e5;
    --white : #ffffff;
    --black : #000000;
}

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
img {
    max-width: 100%;
}
p {
    line-height: 2;
}
body {
    font-family: var(--mainFont);
    font-size: 1.2rem;
}
.site-header {
    padding: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header img {
    max-width: 80%;
}

So far this is what we have:

figure2-3

Next we’re going to style the navigation menu, for this we’ve already seen how we can use Flexbox. So most of the layout for menu should be similar from the Freelancer project:

.main-navigation {
    background-color: var(--primary);
    padding: 1rem 0;
}
.main-navigation ul {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    list-style: none;
}
@media (min-width:768px){
    .main-navigation ul {
        flex-direction: row;
        justify-content: space-between;
    }
}

.main-navigation ul li {
    margin-bottom: 1rem;
    text-align: center;
}
@media (min-width:768px){
    .main-navigation ul li {
        margin-bottom: 0;
    }
}
.main-navigation ul li:last-of-type{
    margin-bottom: 0;
}
.main-navigation ul li a {
    color: var(--white);
    text-decoration: none;
    font-size: 1.4rem;
}

Our page should now have a nicely styled nav menu:

figure3-2

Main content area

Now we’re going to work in the main content area. We’re going to use flexbox for the content class div, so that the main content and the sidebar become flex items. Here is the CSS which is pretty self explanatory:

.content {
    display: flex;
    flex-wrap: wrap;
}

.sidebar, 
.main-content {
    flex: 0 0 100%;
}
@media (min-width:768px){
    .main-content{
        flex: 0 0 70%;
    }
    .sidebar{
        flex: 0 0 30%;
        order: -1;
    }
}

This will give us the following:

figure4-3

Finishing sidebar, content and footer

With the site almost complete we’re going to finish it off by adding the styling for the sidebar, footer and add some finishing touches to the main content area:

.sidebar {
    background-color: var(--gray);
    padding: 2rem;
}
.sidebar ul {
    list-style: none;
}
.sidebar ul li {
    margin-bottom: 0.8rem;
}
.sidebar ul li:last-of-type {
    margin-bottom: 0;
}
.sidebar a {
    color: var(--black);
    text-decoration: none;
}
.sidebar a:hover {
    color: var(--secondary);
}
.main-content {
    padding: 2rem;
}

.site-footer{
    background-color: var(--secondary);
}
.site-footer p {
    margin: 0;
    padding: 1rem 0;
    text-align: center;
    color: var(--white);
}

This completes our blog layout:

figure5-2