Front End Fun: Because I Want To

Lets Go looks boring. I'm tired of it being boring. Today we add color, fonts, and spacing.

The last time we'll see the plain, boring page.

I'm starting with a background. I found a nice looking blue-green color gradient that I want to use, so I'm going to add it to the body using css. I also add the position: fixed property so that the background doesn't scroll with the page. I really like the feel of having layers and adding fixed makes it feel like the elements are in front of the background instead of just taking up space in it.

Next I update the header to a dark variant. I like the look of a dark header and I use grey for the text so that it's visible, but not super dominant on the screen.

Looking back at Meetup.com I notice that the sidebar isn't just fixed against the edge of the screen, it actually scrolls with the page and it kind of floats near the middle with all the other elements. Using this as inspiration I add some margin above and to the left of the my sidebar. This pulls the sidebar away from the edge and groups it together with whatever component is on the screen. I also remove the height from the sidebar element since I notice that the meetup sidebar is only as big as it's elements.

As far as color goes, I found a dark red color that I really like, so I'm gonna use it for the sidebar background. I'm using a lighter color for the sidebar text color. On hover, I make both the background and text color even lighter so that it's easy to see which link you're on. Finally, I add a box-shadow to the new sidebar to make it pop off the page.

Next I want to make the main component on the screen (the Group, Groups List, or Group Form) a consistent size and location. Using more css I group the component classes together and give them uniform width, margins, borders, and shadows. Now when I click through the components they seem to remain a fixture on the screen, which I really like.

As for the fonts, I found a few fonts using Google's font API that I really like. For the title I'm using a font called 'Rock Salt' and for the auth and sidebar links I'm using a font called 'Kalam'. For the rest of the body I'm using 'Open Sans' because it's easy to read and has a professional feel to it.

Most of the updates that I've made I've been using the desktop view for. I double check the mobile view to make sure that everything looks OK and I see a few issues. For one, my auth forms need a background and styling so using css I add the same styles and properties that I used for the group components. I also take off the top margin for my sidebar and group elements in mobile view since I don't want that spacing on a small screen.

At this point I'm pretty psyched about the new styling and colors. As I continue to add features I'll keep updating the styling as needed, but at least I don't have to look at the boring old white layout! Checkout the new screenshots below:

The updated colors and styling for the Groups List Component.