A responsive webpage using Flexbox, Google fonts and Font-awesome icons
As I strive to change your mindset about CSS, I am introducing concepts you can implement to ease your user interface design and make your web pages responsive, elegant and more presentable. To achieve this, we are going to design a responsive company profile page like the one below. You can also follow this link to see what we are planning to achieve.
These are the concepts/technologies we are going to use:
Flexbox is a powerful CSS layout model to ease the achievement of designing a responsive layout of the elements of the page to be displayed on different screen sizes
Google Fonts is a collection of designer web fonts to make the text on the web page more legible and appealing to the readers.
Font-awesome is a web font used by website designers and developers for icons. It is flexible i.e. it can be resized and its colour can be changed
Getting started
To get us started, you need to have a basic understanding of HTML and CSS. Note that for all the above concepts, no downloading, or installation is required. We need to create 2 files i.e the .html file for the page content and the .css file for all our styles.
It is really important to clearly breakdown the page structure before jumping into the code. It saves you time. Something to note at this stage is that the page has 5 sections (header, about-us, our values, mission and contact-us). 4 of these sections are equal in terms of width and height. However, they have different background colours.
As a principled software developer sworn to conform to world-class standards, you need to keep your code DRY. DRY simply stands for Do not Repeat Yourself. 🚨🚨🚨🚨 This principle applies to writing CSS as well. 🤷 Save yourself time and resources 🤷♀
Applying the DRY principle
Add the 5 sections to your HTML file. Below are some of the different ways we can apply the DRY principle.
- Assign each of the divs (sections in this case) a common class that possesses all the common attributes
- Specify the attributes that each child div/section of the body should have.
We will opt for the second option so we do not have to add classes to the divs. Below is how you can implement that.
body > div {
width: 100%;
min-height: 30vh;
}Notice how I am not using pixels or any other CSS units? 🤔 If you want your page to be responsive, you might want to opt for percentages and view-height(v-h) I am also using min-height instead of just height to give room for expansion of the section vertically in case its content is more than it can contain. That way, it's easier for your page to scale with the different screen sizes in terms of width and height. Therefore, the responsiveness of the contact us section of the page which seems to have a bigger height than the other sections will be catered for.
Moving on, one trick that can help you identify and remove errors while writing CSS besides the browser console is the border property. This helps you see the boundaries for the different sections you are working with so that things do not just magically happen like they do for most people 😆. The border property takes the 3 values below.
- A required
border-typewhich can be solid, dashed, double etc - A
border-widthwhich defines the border thickness - A
border-colour
You can simply add this line of code in the above block to see where each section’s boundaries are.
border: solid 1px red;Additionally, we want the content for each of these sections to be perfectly centred horizontally and vertically. We can achieve this by using flexbox as shown below.
- Make each div/section a flexible container by setting its
displayproperty to flex. - Add the
justify-contentproperty with a value center to horizontally align the content to the center - Add the
align-itemsproperty with a value center to vertically align the content to the centre
This is how our block of code looks like at this point
body > div { min-height: 30vh; min-width: 100%; display: flex; align-items: center; justify-content: center;}
What to do with the differences
The header section
Assign the header section a class header and give it an orange background with a white colour for the fonts.
.header {
background-color: #f4511e;
color: #ffffff;
}For the text in the header, you can give it font-sizes according to your preferences. To change the direction in which the header items are flowing, we are going to set the flex-direction property to column. The column value basically stacks the items vertically i.e from top to bottom.
The header class at this point.
.header {
background-color: #f4511e;
color: white;
flex-direction: column;
}Background colour for the other sections
The about us section and the mission section share a white background colour. By default, a web page’s background colour is white so we are sorted.
Our values and contact-us sections, on the other hand, share a grey background colour. What we can do is assign them a similar class. We are baptising the class a name bg-grey because it holds meaning with regards to what we want to achieve. That should be the case for all your CSS classes.
.bg-grey { background-color: #f6f6f6 }About the company, our values and mission sections
Another cool attribute demonstrated by a world-class software developer is paying attention to detail. 😉 You should have noticed by now that much as these 3 sections have different content and background colours, they share something in common. They each have 2 similar child sections aligned side-by-side. Therefore, we are going to assign each of the parent divs another class called section. For each of these sections, we have a small-div on the left, and a big-div on the right. This 👇 is what I am talking about
<div class="section bg-grey"> <div class="small-div">small</div> <div class="big-div">big</div></div>
Assign the small-div a width equivalent to 200px and the big-div a width equivalent to 800px.
To achieve the side-by-side layout where the child elements are flowing from left to right, we set the flex-direction property of the class to row.
.section {
flex-direction: row;
}We are not giving the section a display property of flex because it is a direct child element of the body. Therefore, since the body is a flexible(flex) container, it’s direct child elements automatically become flexible items.
Icons for the small div
Like I mentioned, we are going to use font-awesome icons for all the icons. When you visit https://fonts.google.com/ select the start using for free option on the landing page. There is a straight forward guideline on how to get started with font-awesome. I, however, do not mind taking you through the whole process. Here is how it goes.
- Setup font-awesome on your page by adding the link below to the
headsection of your page.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">- Add icons to your user interface
Use the search feature to look for an appropriate icon and simply copy the code provided to your HTML file like below. For example 👇
<div class="small-div">
<i class="fas fa-building"></i>
</div>- Style the icons
To make the icon 10 times bigger, add fa-10x to the icon class attribute. To change the icon’s colour, give it another class orange and give that class an orange colour.
Icon HTML at this point
<i class="fas fa-building fa-10x orange"></i>Handling page responsiveness on small-screen devices
Notice how the text on the right-hand side of each section overlaps with the icons when you reduce your browser window width! This is where a user ditches your web application or website for good. Given that the majority of internet users use smartphones, it is important to put them into consideration when designing your pages. That is exactly what we are going to do in this section.
The kind of behaviour we want to achieve is; for small screen devices, elements of each section should stack in a way that the left-hand div is stacked on top of the right-hand div. This 👇 is what I [read: warai ] mean. Pretty cool, right?
This shouldn’t be a nightmare because Flexbox has got us covered 😅. Again️! The magic is in the flex-wrap property. Just one line of code. As in O-N-E.
What to do to?
- Set the
flex-wrapproperty of the section class to row
.section {
flex-direction: row;
flex-wrap: wrap;
}The 2 properties of the section class can be summarised into one. The flex-flow property. The flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties.
.section{
flex-flow: row wrap;
}Resize your browser window to spot the difference.
Improve appearances
- Add some space around each div element using the padding property
.section > div {
padding: 30px;
}- Remove the white spaces around the page by setting the margin property of the body to zero.
body {
margin: 0;
}Use Google Fonts
Time to make the text on our page more legible, readable and appealing to the readers using google fonts.
- Visit Google Fonts. You will be presented with a pool of fonts to pick from.
- Select a font by clicking on the ➕ sign above it.
- Click the pop-up at the bottom of your browser
- Copy the link provided similar to the one below and paste it in the head section of your HTML page.
<linkhref="https://fonts.googleapis.com/css?family=Hind+Madurai|Karla"rel="stylesheet"/>
- Apply the font to the HTML element of your choice using the font-family property. For this tutorial, we are going to apply it to the whole HTML page by setting this property in the body like below.
body {
margin: 0;
font-family: "Hind Madurai", sans-serif;
}YOYO the contact us section
At this point, I am confident that I have done a great job preparing you for bigger CSS challenges. The contact us section is one of those challenges. That is why I am giving you a chance to hack it.
YOYO — You Own Your Own Learning
Happy hacking! Let me know how it goes in the comments section below.
If you found this resourceful, keep dem claps coming 👏
Otherwise, here is a reference to the finished HTML and CSS files.
Adios 🚶
References
