It’s pretty hard to be a great affiliate these days because there’s so much you need to know and so many new skills to acquire. This article is for those of you out there who may be struggling to build your first responsive website.
A prerequisite for building a basic responsive website is that you know a bit about HTML and CSS. If you’re not familiar with HTML/CSS, don’t worry, you will quickly pick up these concepts as I go through them. If you’re really keen, there are some good courses on CodeCademy, but they do go beyond what you’ll need to know for this project. You can also use Google to find answers to your questions, or you can use the comment section below.
If you just want to follow along, the final project files are available to download here. However I would suggest both downloading the files and also starting from scratch and completing the steps below. You can use the project files as a reference to check you’ve done everything correctly.
Let’s jump in.
THE TOOLS YOU’LL NEED
Text Editor – Atom.io
The first thing you’ll need to do is to install a text editor. This is software that uses coloured code markup to help you view the HTML/CSS code more easily. Atom is one of my favourites as it’s free and open source. It also packs a punch with its extended plugins, but for our purposes the default setup should be fine.
Koala – koala-app.com
You’re going to be using Sass CSS (SCSS) for compiling your *.scss files into one *.css file. This will keep your files clean and enable you to easily change the colours and fonts of your stock Bootstrap 4 framework to give it a more individual look and feel.
SCSS is a more advanced version of CSS that allows you to use variables, IF statements, nested classes and much more, but you won’t need to go into that much detail here. Also note that SCSS doesn’t work out of the box so you’ll need to compile the file into plain CSS. There is an online tool called SassMeister which will show you how to do this.
And that’s it! We’re ready to get going.
Create an index.html
STEP 1: First create a folder for your website and open it in Atom. Choose File > New File from the menu and create an ‘index.html’ file that will sit in your root folder. I named mine, “bootstrap-website”.
Every website has some default markup that the browser reads before it renders a page. So let’s add it.
STEP 2: Paste this into the new index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<title>My First Responsive Website</title>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
STEP 3: Now you can open the “index.html” file in your browser and you should see a simple “Hello” message.
Adding Bootstrap 4
At this point let’s add some default styling using Bootstrap 4. Bootstrap is the most popular framework for HTML/CSS and JS. It started as an idea to create really fast prototypes for apps and web sites, but because it’s really easy to tweak and its features and responsive grids are so good, these days it’s used for much more. It also has styles for forms, responsive tables and a lot of other components needed for today’s sites. It’s one of the industry standards and really easy to use.
Bootstrap has nice documentation and code snippets which is perfect for beginners as you can copy/paste these, see what they do and add things to them. It can be quite fun to explore all the components and combine them in a modular way. There’s also a huge community behind Bootstrap so there’s most likely to be a solution out there on Google for any problems you may have.
Version 4 is still in alpha – it’s been in this version for a year now but it’s already been used for production by a lot of sites.
Installing Bootstrap via a CDN
This is the easiest way to add Bootstrap to your site. It’s via a CDN (Content Delivery Network) which means you just load the CSS and JS files from their network.
STEP 4: Add this line between <head> </head> just below the <title> line to add the CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css” integrity=”sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi” crossorigin=”anonymous”>
STEP 5: Add these three lines just above the closing body tag </body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js” integrity=”sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7″ crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js” integrity=”sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8″ crossorigin=”anonymous”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js” integrity=”sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK” crossorigin=”anonymous”></script>
After that you can refresh and you should be seeing the default styling and a new font which means that you have successfully installed Bootstrap on your site.
The drawback to using CDN is that you need to override the colours and some other styles with your own CSS file which isn’t really a good practice and creates a lot more work. So let’s fix that.
Installing Bootstrap the better/right way
STEP 6: Now you need to download the Bootstrap Source which you can use to compile files from SCSS to CSS. You’ll have all the control you need that way.
STEP 7: Create a new folder named “vendor” in your project folder and unzip the contents of the downloaded file into it. You should have a structure like this:
There are two ways of customising Bootstrap at this point. You could go into *.scss files in “vendor/bootstrap-4.0.0-alpha.5/scss” directly but you wouldn’t be able to update Bootstrap to newer versions. In fact you could, but you’d need to check each change you did so it’s not the best way of doing things. This can get overwritten easily and you would lose your work.
The second way is to create your own *.scss file and pull in the Bootstrap files you need. This way you will be able to update it and reduce the file size by just calling and importing the things or components you need.
Setting up your SCSS file structure
STEP 8: Create a folder named “assets” in your root directory. Inside that folder create a folder named “scss” and inside the “scss” folder create a file named “main.scss” and “_variables.scss”.
Note: Notice the _ character before the variables.scss file? This warns a compiler not to compile that file separately. Rather, you’ll import this file from your “main.scss” file later. That way you won’t get duplicated files and you’ll have a clean structure inside only one file. This is also great for performance and speed as we only do one call for all our CSS.
Your structure should look like this now:
This is your completed SCSS setup. Now for the JavaScript part.
Setting up your JS file structure
STEP 9: Create a folder inside the assets folder named “js”. Inside that folder create a “main.js” file.
Your structure should look like this:
Setting up the Koala App
You now need to set up the Koala app so it will compile your SCSS files into minified CSS files and JS files into minified JS files. Minified means the files will be compressed with all the spaces removed so everything is on one line making the final file size as small as possible. It’s like a soft ZIP compression if that makes it easier to understand.
STEP 10: In the root folder create a new file called “koala-config.json” and paste the below code into it and save.
{
“mappings”: [
{
“src”: “assets/scss”,
“dest”: “dist”
},
{
“src”: “assets/js”,
“dest”: “dist”
}
],
“ignores”: [“*.json”, “*.txt”, “vendor”, “dist”],
“options”: {
“outputStyle”: “compressed”,
“lineComments”: false,
“debugInfo”: false,
“autocompile”: false
},
“includePaths”: [“assets/js”]
}
This is now a setting file and these options will be loaded when you load your project inside Koala App.
The mappings settings say that the app should take the source folder and compile those files into a “dist” folder. The same goes for JavaScript. This ensures that your source SCSS and JS files are clean and structured, and the app will then pull together Bootstrap and its SCSS and JS files into minified files ready for production use.
You will never ever make any changes inside the “dist” folder as this folder will constantly make new files whenever you change one of your original ones. So all of your work should be done inside the “assets” folder therefore never open or change anything inside the “dist” folder. Go into “assets” files change and recompile to “dist” folder.
The Koala config file also has some other ‘ignore’ settings so it doesn’t auto compile Bootstrap on its own or even the “dist” folder. It’s nice to have more control over this and keep it tidy.
STEP 11: Open the Koala App and drag and drop the project folder into it. You should see something like this:
STEP 12: Click on the disabled JS file and select “Auto Compile”. This will also auto compile the JS file whenever you make any changes to it.
Adding Bootstrap to the compiler
STEP 13: Open the file “assets/scss/main.scss” and paste the following lines:
@import “variables”;
@import “../../vendor/bootstrap-4.0.0-alpha.5/scss/bootstrap”;
This adds your “_variables.scss” and Bootstrap to your final compiled CSS file.
STEP 14: Open the “assets/js/main.js” file and add this line to it:
// @koala-prepend “../../vendor/bootstrap-4.0.0-alpha.5/dist/js/bootstrap.js”
This tells Koala to add the main Bootstrap JS file to the project. It’s commented out, but it needs to be that way as the Koala App will find it on its own.
Update the index.html file
There will still be some older CDN Bootstrap files that you can now remove except for the one that has “jquery.min.js” in it. Bootstrap still needs this file to work.
STEP 15: Add this line below <title> tag:
<link rel=”stylesheet” href=”dist/main.css”>
STEP 16: Add this line just above the closing </body> tag:
<script src=”dist/main.js”></script>
This will take you to a file that should look like this:
So, if you refresh the “index.html” file in your browser and if you’ve completed all the steps correctly, you should be seeing the same as the screen above. You’ve just changed and gained control over Bootstrap.
Adding custom CSS
STEP 17: Create a new file inside the “assets/scss” folder named “_global.scss”. You’ll be adding your own SCSS or plain CSS here. Add this simple CSS which should change the white background to a red one.
body {
background-color: red;
}
Save the file. You’ll need to add this file as an import to your “main.scss” file in order to see any changes. Remember that this is the main file that keeps everything in order.
STEP 18: Add the line below to the bottom of the file.
@import “global”;
The file will look like this:
Save the file and go to the browser and refresh the page. Your screen will burn with red!
Great job. You can now use the “_global.scss” file to add your own CSS to it. You can even create CSS component files like “_header.scss” or “_buttons.scss” to structure and order your files. You can also create folders for these in order to group them further. Just remember to include each in your “main.scss” file like you did with the “_global.scss” file.
STEP 19: Delete everything from the “_global.scss” file to remove the red background.
Customising Bootstrap
The next stage will show you how to update and customise the look of the default Bootstrap styles.
STEP 20: Open the “assets/scss/_variables.scss” file which should be empty.
STEP 21: Now open the “vendor/bootstrap-4.0.0-alpha.5/scss/_variables.scss”. This file is the settings file for Bootstrap. It has all the settings and variables that are used to compile the CSS. Everything you change here will be reflected on your site.
So now you’re going to do the same thing you did with the red background, but with Bootstrap instead.
STEP 22: In the Bootstrap “_variables.scss” file scroll down to line 107 and copy it into your empty “_variables.scss” file.
STEP 23: Then change the “#fff !default” to just “green” like this:
Refresh your browser and you’ll see the change.
You now have full control over customising Bootstrap and its styles. You could also copy over all the content and variables from the bootstrap “_variables.scss” file into your own one, but that may be overkill as you probably won’t need to change 90 per cent of it.
Just copy the parts you want to change as these will be used in the compiling process and keep your variables file small, readable and clean.
STEP 24: Remove the line you added in your “_variables.scss” file.
Building a basic website with Bootstrap
Reaching this stage may have seemed like a long-winded process, but you’ve actually gone from the basics to a more advanced level – the majority of front-end developers actually use this method. And you’ll soon this workflow will start to feel really natural. The project structure you now have is scalable and while it can become complex, it will still be easy to manage and clean to work with.
Now to the fun part – building a basic website.
STEP 25: Open the “index.html” file, remove the <h1> line and paste this instead:
<div class=”container”>
<div class=”row header”>
</div>
</div>
The container class sets the maximum width or rather it’s the big column you’ll use to add your content into. It’s like a wrap for all of the content on your site. There are a lot more options, for example you would use “container-fluid” if you wanted to make the container full width.
There is a lot of amazing documentation available for Bootstrap which may help you in the future and you can also Google for questions if you hit a wall. There are thousands of people using Bootstrap and someone probably already had the same problem you had so it’s good to search things before asking for help.
The “row header” is where you can create a new “component” for your website. The “header” class doesn’t do anything yet, but you could add some CSS later for it. Meanwhile follow the steps below to create a nice header.
STEP 26: Inside or right after <div class=”row header”> insert this:
<div class=”col-md-6″>
<h1>Hello!</h1>
</div>
The “col-md-6” class means:
col -> create a column
md -> when on medium sized screens
6 -> this column is 6 grid columns wide.
You’ve already started to add some responsive elements here. The Bootstrap Grid is used for creating columns and rows so you can easily produce some nice layouts without touching any CSS.
Bootstrap grid uses 12 grid columns to create layouts and is the default grid setting. This gives you many different options for creating grid layouts.
STEP 27: Add this code below the section above.
<div class=”col-md-6″>
<ul class=”nav nav-pills float-md-right”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Contact</a>
</li>
</ul>
</div>
It’s a bit more markup, but let’s go through it:
Create a new 6 columns wide column with col-md-6
And add a unordered list <ul> with 3 list items <li>
That have a link <a> with a name
You may have guessed it, it’s a simple menu made from a Bootstrap Nav Component. Open and refresh the browser and you’ll see the header you’ve made.
Note: This is a really simple example for the menu but there are already some examples on the Bootstrap page with the mobile hamburger dropdown menu etc.
STEP 28: After the closing </div> tag of “row header” add this code:
<div class=”row jumbotron”>
<div class=”col-md-12″>
<h1 class=”display-3″>Heading</h1>
</div>
<div class=”col-md-8″>
<p class=”lead”>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<div class=”col-md-4 text-md-center”>
<p><a class=”btn btn-lg btn-success” href=”#” role=”button”>Sign up today</a></p>
</div>
</div>
Again, there’s a bit more markup so let’s decode it before you view it in the browser.
You’ve now added a new row with a “jumbotron” class which is one of Bootstrap’s components and comes with some default styling. Here are some more explanations:
“display-3” makes the title 3x bigger.
“lead” – is a bigger styled text.
“btn btn-lg btn-success” Is a collection of classes for Buttons. In our case it says
Create a button (btn) that is large (btn-lg) and green (btn-success).
You could change the “btn-success” to “btn-info” and it would turn blue.
You should have something that looks like this:
Let’s keep adding to the site layout and create three columns that contain some benefits.
STEP 29: After the “row jumbotron” closing </div> add this code:
<div class=”row benefits”>
<div class=”col-md-4″>
<h4>Benefit</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<div class=”col-md-4″>
<h4>Benefit</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
<div class=”col-md-4″>
<h4>Benefit</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
</div>
</div>
The col-md-4 means each column will have 4 grid column widths. 3×4 columns equals 12 columns. As you will be building these, you need a bit of maths as they should always equal 12!
STEP 30: Let’s refresh and view what you’ve achieved so far.
Looking good! Now for the footer and you should be done with the layout.
STEP 31: Add this code after the end of the </div> of the “row benefits” section:
<footer class=”footer”>
<p>© Your Company 2016</p>
</footer>
Refresh and you’ve finished the basic layout.
What about making it responsive?
Well, you remember the col-md-6 and similar classes? They already come with responsive rules and it looks like this now.
The section of code will easily stack and display your site normally on mobile. Of course there’s room for improvements, but you can control these very easily by adding some classes.
Here are some examples:
STEP 32: In the “row benefits” section change the col-lg-4 class into this for all parts:
col-xs-4 col-sm-6 col-md-12 col-lg-4
Let’s decode what you’ve just added.
col-xs-4 means:
Create a column (col) on extra small (xs) screens that is 4 grid columns wide (4) or one-third width.
col-sm-6 means:
Create a column (col) on small (sm) screens that is 6 grid columns wide (6) or one-half width.
col-md-12 means:
Create a column (col) on medium (md) screens that is 12 grid columns wide (12) or full width.
col-lg-4 means:
Create a column (col) on large (lg) screens that is 4 grid columns wide (12) or one-third width.
So the xs, sm, md, lg parts in a class controls the media query or the browser/screen/device width. The lowest mobile width is 320px and the average laptop one is above 1000px.
Let’s see how this works in action.
As you can see, the “col-xs-4” class is for the mobile screen, but the 4 doesn’t really work well here as the text get’s really pushed together, so it’d be better to change that class to “col-xs-12”. This will change the text to be full width for the mobile view like this:
Another thing to note is that you don’t need to use the same classes on all three elements. For example, you can have “col-xs-6” for the first two and “col-xs-12” for the third one giving you this layout which would also work:
So by just changing some numbers/letters you can create layouts to fit the content in any way you want.
Customising the look and feel of Bootstrap 4
Let’s get back to the final part of this guide: changing the default Bootstrap look to be more consistent with your niche or brand. For example, if you promote a nice natural product, you’ll probably want your site to have a greener feel, right?
If you open the “_variables.scss” file in “/vendor/bootstrap-4.0.0-alpha.5/scss/” again, you’ll remember that you can copy the variables you want to change over to your own “_variables.scss” file in “assets/scss/” folder.
In order to simplify things, just paste all the changes you want to make and see the result.
Remember to have Koala up and running!
STEP 33: Paste these into your “projects _variables.scss” file:
// Colors
$brand-primary: #9CCC65;
$brand-success: darken($brand-primary,10%);
// Background
$body-bg: #eeeeee;
// Jumbotron
$jumbotron-bg: lighten($brand-primary,10%);
After you refresh the browser you should see this.
As you can see, you’ve made quite significant changes with a minimal amount of work.
The variable $brand-primary which used to be blue, is now a green colour and it automatically changed the text links. If you want to change these, just look for the “link-color” variable and add the changed one to your SCSS file. Easy.
The variable $body-bg changed the background from white to light grey and the $jumbotron-bg background changed the colour from grey to green.
But Bootstrap does have its limitations and you may want to add your own styling to it too. For that you’ll need to use the “_globals.scss” file.
STEP 34: Paste these in “_globals.scss” to make the layout more ‘prettier’:
body {
padding: 1rem;
}
.container {
background: #fff;
}
.header {
padding: 1rem;
}
.jumbotron {
margin: 0 .2rem 1rem .2rem;
color: #fff;
}
footer {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid $brand-primary;
color: $brand-primary;
font-size: 0.8rem;
}
And this is what you’ll get:
And it’s still responsive:
One last thing I’d like to show you is how to change fonts.
Adding Google Fonts to your project
Go to fonts.google.com and add two fonts. Let’s choose Oswald and Lato and copy the embed code. See the example below.
STEP 35: Paste the link line just under the <title> tag in the “index.html” file.
<link href=”https://fonts.googleapis.com/css?family=Lato|Oswald” rel=”stylesheet”>
STEP 36: Now add this code to your own “_variables.scss” file”:
// Fonts
$font-oswald: ‘Oswald’, sans-serif;
$font-lato: ‘Lato’, sans-serif;
$font-family-base: $font-lato;
$headings-font-family: $font-oswald;
$headings-font-weight: normal;
On the first two lines you’ve added two new fonts. And on the second two lines you’ve defined a base and heading font with your new fonts.
After you refresh the browser you’ll see the new fonts in action.
You’ve now been through quite a comprehensive workflow of how responsive websites are built. You’ve scratched the surface of many different topics but there’s still much more to learn.
However, you should now be able to either add Bootstrap to a WordPress theme or structure your older messy CSS files to make them cleaner. You can even add new fonts to your current sites. The topics can be used together or on their own.
Here’s the download link for the final project with all the code so you can check what you’ve done and play around with it. You can also use it as a starting point for your next project.
DOWNLOAD LINK – Added when we upload it to the server somewhere
For some landing page inspiration, visit lapa.ninja to get some great layout ideas for your new website.
I hope you’ve enjoyed this guide and found it useful! If you manage to create any new sites, please share them below so we can all appreciate them.
The post How to Build a Basic Responsive Website with Bootstrap 4 appeared first on MoreNiche.