2. Adding Styles to Navbar and Footer
Now that we've got a navbar, let's go ahead and make it look nice.
First, if you haven't done so, let's change the Brand name in the navbar. To do this, let's replace the "Brand" text in the navbar with "Ideator".
<nav class="bg-white border-gray-200 font-dosis">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1 md:p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap font-pacifico text-[30px] tracking-[2px] text-[#337ab7]">Ideator</span>
</a>
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">All Ideas</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Inspire Me</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">About</a>
</li>
</ul>
</div>
</div>
</nav>
Now that we have our new brand name in there, let's make it look nicer. We can do this by changing the font. In order to make this font sexy, we're going to be using a custom font.
There are many websites that allow you to install fonts to your website. One of the easiest ways to implement a font is to use Google Fonts. So let's go ahead and do that.
If we go to Google Fonts, we can see that there are a bunch of fonts that we can use. "Open Sans" is a great font that looks clean. Let's search for Open Sans in the search bar.
Once we do that, we should be taken to a screen that looks like the image below. Click on the plus button.
Let's also search for a font called "pacifico" and "dosis". The "pacifico" is the font for the unique brand name. Once you have searched the fonts and clicked the plus button respectively. You should now see 3 fonts selected. Click on the panel.
Let's load various different weights (thickness) for this font:
Next, scroll up and copy and paste the code provided:
!
Open application.html.erb. In your <head> section, add in the code. It should look something like this:
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;600;700&family=Open+Sans:wght@300;400;600;700&family=Pacifico&display=swap" rel="stylesheet">
Great! Just like that, the font can be used in our application.
Implementing font into tailwind
In this lesson, we have imported two Google Fonts. Let's set tailwind variables for each of these fonts:
Open your tailwind.config.js and add the following lines of code:
theme: {
'fontFamily': {
'open-sans': ['Open Sans', 'sans-serif'],
'dosis': ['Dosis', 'sans-serif'],
'pacifico': ['Pacifico', 'sans-serif']
}
}
Your tailwind.config.js file should now look like this:
As you can see, we can define much more variables in the tailwind config file very easily.
Now, we can use the variables from tailwind config file directly into the HTML classes. Let's add font-dosis to the parent div in our navbar section.
It should look something like this:
Let's go back into our browser and refresh our web application. Awesome! It looks great.
Let's add some styling to the navbar branding by adding following classes to the branding span
font-pacifico text-[30px] tracking-[2px] text-[#337ab7]
Since we are going to be using the same color in the application, let's put this in a variable as well. In tailwind.config.js, let's add a new variable under theme key:
'colors': {
'primary': {
500: '#337ab7'
}
}
Then let's replace the HEX color with our new tailwind variable. The span should look like below:
<span class="self-center text-2xl font-semibold whitespace-nowrap font-pacifico text-[30px] tracking-[2px] text-primary-500">Ideator</span>
After all the changes, the navbar should look like below:
Styling footer
Now that we've added and styled the navbar, let's add a footer. What we want is a footer that sticks to the bottom of the screen no matter how much content you have. Sometimes when a website has no content, the footer will float above the bottom of the screen. What we want is a sticky footer. We're going to try and find a way to accomplish this.
If we visit this link, we can find a simple footer with copyright text. What we're going to do is use information contained in this post, use the solutions, and make it look nice. Let's copy the code below into our application.html.erb
<footer class="fixed bg-white bottom-0 w-full">
<div class="max-w-screen-xl mx-auto p-1 md:p-4 text-center text-neutral-700 dark:text-neutral-200">
<p>© TECHBRAIN <%= Date.today.year %> All Rights Reserved</p>
</div>
</footer>
Often times we need to display the current year in the footer. Instead of hard coding the year, we can display the year with
<%= Date.today.year %>.
Your application.html.erb file should now look something like this:
<!DOCTYPE html>
<html>
<head>
<title>Ideator</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;600;700&family=Open+Sans:wght@300;400;600;700&family=Pacifico&display=swap" rel="stylesheet">
</head>
<body>
<nav class="bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1 md:p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap font-pacifico text-[30px] tracking-[2px] text-primary-500">Ideator</span>
</a>
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">All Ideas</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Inspire Me</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="max-w-screen-xl mx-auto p-1 md:p-4">
<%= yield %>
</div>
<footer class="fixed bg-white bottom-0 w-full">
<div class="max-w-screen-xl mx-auto p-1 md:p-4 text-center text-neutral-700 dark:text-neutral-200">
<p>© TECHBRAIN <%= Date.today.year %> All Rights Reserved</p>
</div>
</footer>
</body>
</html>
Now that we've set up the footer and nav, let's move these components into partials.
Partials
Partials are reusable HTML elements that can be embedded into different view files.
Partials can be created by making a new file that starts with _.
In our app/views directory, let's create a new folder called shared. We are going to place all of our files that are going to be shared in different places in this directory.
Inside our shared folder, let's create a new file called _nav.html.erb. Make sure the file name starts with an underscore. This is necessary for Rails to recognize the file as a partial.
Inside our _nav.html.erb file, let's take all of our navigation bar code inside application.html.erb and place it inside this file. Your _nav.html.erb file should now look like this:
<nav class="bg-white border-gray-200">
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-1 md:p-4">
<a href="/" class="flex items-center space-x-3 rtl:space-x-reverse">
<span class="self-center text-2xl font-semibold whitespace-nowrap font-pacifico text-[30px] tracking-[2px] text-primary-500">Ideator</span>
</a>
<button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
<div class="hidden w-full md:block md:w-auto" id="navbar-default">
<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0" aria-current="page">All Ideas</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">Inspire Me</a>
</li>
<li>
<a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0">About</a>
</li>
</ul>
</div>
</div>
</nav>
Then, in the application.html.erb file, let's replace the navigation bar code with the following code:
<%= render 'shared/nav' %>
The render method will try to find a partial file (a file that starts with an underscore _) called _nav.html.erb inside of the shared directory. Once it finds the file, it will render the partial.
Your application.html.erb should now look like this:
<body class="h-screen">
<%= render 'shared/nav' %>
<div class="max-w-screen-xl mx-auto p-1 md:p-4">
<%= yield %>
</div>
<footer class="w-full absolute bottom-0">
<div class="max-w-screen-xl mx-auto p-1 md:p-4 text-center text-neutral-700 dark:text-neutral-200">
<p>© TECHBRAIN <%= Date.today.year %> All Rights Reserved</p>
</div>
</footer>
</body>
Next, let's extract the footer code inside application.html.erb and place it into a partial as well.
Challenge
- Place the footer code inside
application.html.erband place it into a partial - Replace the footer code and render a partial instead
- Push the changes to Github