Week 9: Styling ScrapSaver

Hey guys! 

It’s finally time to style ScrapSaver and add some flair! So far, I’ve styled the homepage, the login page, and created a navigation bar.

 All front-end work begins with creating a static folder within the directory. 

The static folder holds information that doesn’t ever change (like the name suggests), and in this case, I’m using it to hold images (such as the logo or select button), javascript queries and plugins, and a base CSS bootstrap. Let’s break it down: The static folder can be used to hold images. Whenever I want to pull an image (such as the ScrapSaver logo for the navigation bar), it will come from the static files folder. I’ll show how I routed this configuration shortly. Javascript queries and plugins will help us run JS code on the front end and pull from certain libraries. The base CSS file will help us create CSS code to style the website. But most importantly, I created a style.css folder, which acts like a template for creating every button, page, and transition:  

Next, I’ll talk about the ‘main.html’ file, which is the “superclass” for all the html files. In the main, I created the navigation bar and components for the home page. First I pulled all the API’s I needed for the styling (font, etc): 

 Then I created the sizing for the main chunks of text (like the mission statement):  

I also created the all the components of the nav bar, and I’ll show the logic of making specific ones visible shortly:  

Finally, I created code to make the CSS change for smaller screens, like phones. Otherwise, ScrapSaver would look normal on a computer but completely confusing on a phone or tablet:  

For the home page, I used the following line to “inherit” properties from the main file:

 {% extends ‘base/main.html’ %} 

This way, the nav bar is visible on the home screen. I also wanted to change the visibility of the buttons on the nav bar based on if the users are signed up or new. For new users, I want the logo (which directs users home) and a signup/login button. But for registered users, I also want to show a button to send them to the ingredient list. So I wrote the following code:  

Overall, this week was a good start on styling the website. Next week, I’ll style the registration page and the ingredient list. See you guys then!