The work we did in the last module just about completes the landing page for the website as far as the goals we set in the beginning of the chapter back in module one, “Static HTML – Designing the landing page.” But before we wrap up this chapter, I want to show you how to make a details page and link to the page from the thumbnail image of a vehicle result. This is a little outside the scope of the original goal of designing a landing page with the basics of html. But, it will lay some important groundwork for later chapters when we get into software development patterns such as MVC (Model, View, Controller). The home page or landing page we have built so far is commonly referred to as a list page or an index page. It lists out the results of a search from a user interface such as our category buttons, or a form based search.
Another type of page is called a details page. While a list page lays out the most important information for each result but, just enough information as so not to take up too much space, a details page let’s the user hone in on a result she is most interested in at the moment and take a closer look.
Earlier in the chapter in module 7, “JavaScript Code Improvements“, we talked a little about reusability where we broke out repetitive code from within our JavaScript for each button click to reusable functions that could be defined once and called multiple times from each category button.
It would be nice if we could also figure out a way to reuse all that work we did in order to figure out how to get the JavaScript nice and efficient in other html files as well. And do the same with the CSS styling for our header, footer, and content area since the header should probably look the same on the details page as it does on the list page so the user is sure they are on the same site.
Well rest assured! There is a way.
Reusing CSS
Create a new subdirectory in your fredscars directory called “css”.
Create a new text file called “site.css” in the new css directory.
Open the new site.css file in TexpPad or your favorite text editor.
What we want to do at this point is break out the portion of css that can be reused on other pages of the site but leave the css styles that are particular to the landing page in the <style> tag of the fredscars.html file.
Let’s go through all of our css styles and identify which ones are specific to the landing page and which ones we can move over to the site.css file.
body element – flex styling we used for the sticky footer. Our footer should be the same on all pages of the site.
Move to site.css
header element– styling for header. Our header should be the same on all pages of the site.
Move to site.css
spacer class – flex styling we used as part of the sticky footer setup. Our footer should be the same on all pages of the site.
Move to site.css
buttonContainer class – used on <div> elements containing the category buttons. Category buttons are specific to the landing page which is our search page.
Keep in fredscars.html file as is.
button class – used on <button> elements for the category buttons. Category buttons are specific to the landing page which is our search page.
Keep in fredscars.html file as is.
result-column class – used on a <div> element containing a result column. Vehicle data laid out in this format will probably be specific to the results landing page. If we need to reuse this format later we can always move the style to site.css.
Keep in fredscars.html file as is.
result-column-empty class – used on a <div> element containing an empty result column. If we need to reuse this format later we can always move the style to site.css.
Keep in fredscars.html file as is.
result-li-vin class – used on <li> elements containing vin information for a vehicle.
Keep in fredscars.html file as is.
result-image class – used on <img> elements for vehicle thumbnail images. Vehicle data laid out in this format will probably be specific to the results landing page. If we need to reuse this format later we can always move the style to site.css.
Keep in fredscars.html file as is.
After completing the analysis above of our css styling, we now know we should move the following styles to the site.css file.
body
header
spacer
site.css should now contain the following css code.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
padding: 5px;
background-color: black;
color: white;
text-align: center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}The <style> element within fredscars.html should contain the following css code. And I have added a link above the style tag to point to the new site.css file. The added <link> element has a relationship type of “stylesheet”. This will have the affect of importing all the styles from site.css from within the css directory.
<link href="css/site.css" rel="stylesheet" />
<style>
/* removed body, header, and .space styles */
.buttonContainer {
margin-top: 20px;
}
.button {
width: 100px;
}
.result-column {
border: 1px solid black;
margin: 10px;
}
.result-column-empty {
border: 1px solid white;
margin: 10px;
}
.result-li-vin {
margin-bottom: 10px;
}
.result-image {
width: 65%;
padding: 15px;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>Reusing JavaScript
All of the JavaScript in fredscars.html within the <script> element is really specific to the landing page. But if we did need to reuse any of the code we could do something very similar to the css external link provided above in the Reusing CSS section.
<script src="js/site.js"></script>If needed we could go through the same analysis process we did for css and move any JavaScript we want to reuse to a new file called “site.js”. We will see examples of this in later chapters. For now let’s move on to the details page.
What’s Next
Now that we have prepared our external css file we can build a details page reusing the common css styles.