Setting up a layout for your responsive website should not take too much time. After planning the layout of the website, most developers tend to get stuck in the implementation stage.
This stage is critical as this is where you need to consider the behaviour of the website on various devices and if one can get this part right, 90% of your work is complete.
Where it all started
Recently, my knowledge of the Bootstrap framework was put to test. I was required to make an exact copy of the Newsweek website using Bootstrap. Now If you must know, the Newsweek website is a CMS built with Drupal.
Cloning a framework based website like Newsweek using vanilla HTML and CSS can be a pretty daunting task for beginners. However, It does not need to be daunting anymore as I am about to walk you through on how I cloned the newsweek website.
This project, took me between 4-6 days to complete and I had to do a 2-day refresher on bootstrap 4 (last time I used bootstrap was 3 years ago). Yep, I was that rusty 😓️.
There are lots of frameworks available for use out there, and setting up a quick layout is dependent on your knowledge of your chosen framework. If you are using bootstrap 4 framework like I am, you can quickly set up a layout in record time using both the bootstrap 4 framework and the flex-box included in this framework.
The new Bootstrap 4
The Bootstrap framework enables website designers and front-end developers to easily create a highly-responsive and good-looking modern website.
Recently, Bootstrap 4 has brought about so many changes from its previous versions. There are new grid classes, default flex-box, Sass instead of Less, cards replacing wells, panels, and thumbnails, and new utility classes, etc.
The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flex classes to control the layout of its components. It's now easier to design flexible responsive layout structure without using float or positioning.
Let's get started
In this writeup, I will be attempting to guide you on how to set up your layout to get started with for your frontend project, in the same way, that it was applied it in this demo project.
My focus will also be on explaining (using a few sub-sections) how I used Bootstrap 4 classes in the development of the main section.
The reason for the aforementioned is that similar Bootstrap 4 classes are in use in other sections.
Initial Setup
The setup for this project can be found in this repository. To get started, there is a
starter template that can be copied and used in your HTML file. It can be found here.
In the head tag, I included various links to resources that will be required in this project. These links correspond to resources from font-awesome(free icon website), Bootstrap CDN, and google fonts as well. Links to local resources were also provided. These links to additional CSS files to be used in the project for re-styling and resetting.
A reset file - reset.css - was also included to remove default styling for the HTML elements. See code snippet below:
<head>
...
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css family=Roboto+Condensed:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<title>Newsweek clone</title>
</head>
In the <body></body> I had 3 main parts:
the
<header></header>,<main></main>and,<footer></footer>section.
<body>
<header class="heading ">..
</header>
<main class="container-fluid" ">..
</main>
<footer class="footer-content">..
</footer>
</body>
The Layout
On extra small devices, the section that gets displayed first, when viewing the Newsweek website is the "Top Story" and it stacks on the next section called "Featured stories", "Opinions", and the last section in the stack is "Newsletter".
On medium devices, however, the websites display a 2 column behaviour with the "Featured stories" as the first section to be displayed in normal flow appearance followed by "Top-story".
Scrolling down also shows different sections exhibiting visual behaviours different from what was observed on extra small devices. This visual behaviour continues to changes as the device screen gets wider and different sections are ordered based on the preference on the developer/client. The observed visual behaviours are also considered in the development of the main section.
The container class
I decided that the main section <div> should have a bootstrap class .container-fluid(As far as I'm concerned, using a .container class here will not match the exact Newsweek website layout). In Bootstrap 4, Containers provide a means to centre and horizontally pad your site’s contents.
The difference between .container and .container-fluid class are that the latter provides for width: 100% across all viewport and device sizes, whereas the former has a max-width pixel value.
Also, .container-fluid continuously resizes as one adjusts the width of the browser by any amount, while .container class resizes in chunks at determined widths, controlled by media queries. You can read more about the classes .container-fluid and .container here
Nested within the <main> tag are 2 <div>s. the first one was declared with a .row class and the second one with a .col-md-12 class.
<!-- MAIN SECTION -->
<main class="container-fluid">
<div class="content row">
<div class="left-content col-12 col-sm-12 col-md-12 col-lg-8 px-lg-3 order-sm-0">
<!-- FEATURED STORIES -->
<div class="row">
<div class="featured-story col-12 col-sm-12 col-md-5 col-lg-5 mt-sm-4 mt-md-4 mb-sm-3 order-0 ">
</div>
</div>
</div>
<!-- OPINIONS -->
<div class="right-content col-12 col-md-12 col-lg-4 order-sm-2">
</div>
</div>
<div class="other-concerns col-md-12">..</div>
</main>
The row class
Rows are containers for columns and to implement it the Bootstrap way, column classes needs to be declared in divs with row classes. Bootstrap 4 documentation specifies that "In a grid layout, the content must be placed within columns and only columns may be immediate children of rows".
Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
The div with .content & .row classes also have 2 <div>'s corresponding to the opinions sub-section of the magazine and the featured stories section.
On large devices, "featured stories" section occupies 8 spaces .col-lg-8 while from medium to extra small devices they occupy 12. While on mobile devices, the featured stories will be the first section seen on the stack.
This is made possible by using the class .order-sm-0. However, the "opinions" section has a class .order-sm-2 which means it is the last section to be seen in class .content.
Also nested within the div with .content & .row class are 2 divs with class .left-content and .right-content both designated to hold "featured stories" and "opinion" contents.
The "featured stories" section is a div with .row class and wraps the featured stories and top story sections.
...
<div class="row">
<div class="featured-story col-12 col-sm-12 col-md-5 col-lg-5 mt-sm-4 mt-md-4 mb-sm-3 order-0 ">..
</div>
<!-- TOP STORY -->
<div class="middle-content col-12 col-sm-12 col-md-7 col-lg-7 px-sm-0 px-lg-3 order-1">..
</div>
</div>
...
The divs with class .featured-story and .middle-content both have .order-0 and order-1 as well. The order class is a new addition to bootstrap 4 and it's derived from the new flexbox power with which bootstrap 4 was developed from.
By including this class to the divs, the containers can have the same visual behaviour which cuts across different devices. This means the div with class .featured-story will get displayed ahead of the div with class .middle-content from a normal flow appearance perspective.
The contents of .featured-story class has classes like .card to give them the card like appearance:
...
<div class="card rounded-0 border-0 pb-sm-2" >
</div>
...
Read more about .card class here
Col class
The Column classes indicate the number of columns I'd like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4. In the codes above I have used variants of .col- class and is based on the number of columns I want per row across different devices. For example .col-sm-12 class specified on a div means I want 12 columns on small devices, while col-md-5 means the columns should be 5 on medium-sized devices. Read more here
Order class
In the .left-content class apart from the usual bootstrap .col- classes, there is also the .order- class. The same class was applied to the div with the .right-content class.
By applying the class .order-sm-0 and .order-sm-2 on the div containers, I have inadvertently described them as flex items in a flex container without explicitly stating a parent flex container.
As a result of this, I can now change the visual order of specific flex items and also use available options for making an item first or last, as well as a reset to use the DOM order.
Now .left-content class will stack first ahead of class .right-content also with a class .order-sm-2 on small devices and extra small devices.
Both the .left-content and .right-content class are containers (wrapped in .row class in the main section) for other small sections as at the time of implementing this project.
Also wrapped in class .row in .left-content are the following classes and the additional flex class included to order the class structure which stacks first on various devices are:
.featured-storywith flex class.order-0, and.middle-contentwith flex class.order-1.
This means that the div with class .order-0 will also stack first on small devices or come first from left ahead of div with class .order-1.
Flex class
After the div with class.featured-story is the .middle-content class. This div is the container for the divs' with classes.top-story and more-story.
<div class="top-story d-flex flex-column mt-sm-4 mb-sm-3 py-0 px-sm-3">..
</div>
<div class="more-story d-flex flex-column px-sm-4">..</div>
Translated to CSS flex-box format, the above code block can be written as:
.top-story {
display: flex;
flex-direction: column;
margin-top: 4px;
margin-bottom: 4px;
padding:3 4 3 4;
}
.more-story { display: flex; flex-direction: column }
Applying the bootstrap 4 flex-box display utility (.d-flex) will create a flexbox container and, also transform direct children elements into flex items (just like CSS flexbox).
Furthermore, the Flex containers and items can be modified further with the addition of flex properties like .flex-column, .justify-content-between etc.
Conclusion
Looking at the structure of the remaining sub-sections in the main section, the Bootstrap 4 classes used in their development is similar to the classes in use in previous sub-sections.
In summary, this article has introduced Bootstrap 4 classes which can ease all styling tasks. Some odd-looking classes observed in this demo project are mostly styling classes that can be read up here.
This writeup has also explained how to use Flexbox for inner elements that require certain visual behaviour with native Bootstrap 4 components.
Comparing the clone and, the original newsweek magazine, you will observe that they exhibit the same visual behaviour and are both responsive.
The project demo can be found on codepen:
Here is the link to the repository for the full Newsweek homepage implementation.
Thanks for Reading!
You have comments or suggestions on how to improve this article? Please drop them here or you can reach me on twitter via @tundeiness
REFERENCES
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Top comments (3)
nice one Tunde - would give this a go too once am done with cloning tesla and apple websites which are less tough than newsweek. Cheers and well done
Thanks Banks!!
hi