Quick and Dirty CSS Tricks: “Good artists borrow, great artists steal”
Programming oftentimes feels like trudging through the soupy bogs of Kantian logic and Pythagorean mathematics. It can be frustrating, to say the least, to train your subjective human mind to operate and/or communicate with an entity that only reads and understands objectively. Luckily, there is frontend development, specifically CSS that allows programmers integrate styling and flair to their web applications in order that their users don’t feel like they’re chained in the basement of some GeoCities webpage with a 15 second MIDI song on repeat. All jokes aside, CSS provides a developer a much needed break from the harsh realities of programming logic to make something worth looking at before diving headfirst back into the fire. For my fourth project for the Flatiron School for Software Engineering, I was tasked with building full stack web application that utilizes Ruby on Rails as a backend API and a front end consisting of JavaScript, CSS, and HTML. I am a very visual person and was excited to immerse myself into the frontend, so for the purposes of this blog post I will show you how taking some simple steps in modifying your CSS stylesheet can make a web application feel sleek and modern.
The first and probably most important aspect of this process begins with Chrome Developer Tools. Remember before learning to program when you accidentally hit F12 instead of Delete and opened up something on your browser window that looked like you broke it? That’s Chrome Developer Tools, which is a way to view the source HTML and CSS of any webpage on the Internet. By right clicking in your Chrome browser and scrolling down to “Inspect” a docked window opens and displays both the HTML and CSS of the page.
Pictured above, in fact, is the very CSS and HTML rendered as I type this blog. There are calls to HTML element classes that style certain properties. For example, the font-family properties in the “.postArticle-content .graf — p” class has a serif font value, hence the text rendered in this article is of the serif family. All this to say, if you as a programmer see some sort of rendering or styling of an element taking place on a page, you too can make use of these feature in your own web applications. Sometimes, you didn’t even know some of these properties existed.
For my application, I wanted to create a sort of “movies-to-see-before-you-die” tracker based on the Criterion Film Collection. I went to Criteron’s actual website to sift through their styling choices with Developer Tools. I noticed a stylistic choice used (and one we all too often see on cross-platform web applications these days) was the maintaining of a sparse and minimal background that allows the CSS stylings of each HTML element stand out to the user. In the above example these Criterion Film posters are already beautifully styled by a seasoned (probably well compensated) graphic designer. A phrase you might hear thrown around quite a bit is that “programmers are lazy” which may be true, but what could also be true is that they wish to be complimentary to the other forms of art that populate and live on their web application. After all, the Internet is a visual medium.
I wanted a user to experience this treasure trove of film in a way that was not stepping on any toes. I also, in line with the app’s functionality, wanted to give the user the experience of flipping through “cards” or even the DVDs/Blu-Rays themselves to emphasize their “choice” once they clicked on one of the divs containing the individual film’s information. So to “blend-in” with contemporary styling techniques, and to be quite honest match Criterion’s own website, I integrated a slight background color change when a user’s mouse hovered over each “card” or div.
Here you will see some very familiar CSS properties like padding or text-align which are pretty self-explanatory. However you may also notice the “.film-card” class is called again with “:hover” attached. This communicates to the DOM (Document Object Model), or where all of our HTML, CSS, and JavaScript “talk” to one another, that when a user’s mouse hovers over this div, it should change it’s background-color property to something a bit darker. This may seem like pretty simple stuff, and frankly it’s because it is, but I honestly had no idea that it was that easy. Upon creation (either by hard coding in the HTML file or through setting the innerHTML in JavaScript) of these divs you can set a class name of your choice. In this case, I named it something simple and easily understood: “film-card.” Once the element is created you can call on its class in the CSS stylesheet and manipulate properties to your heart’s desire.
In order to tie all this together, I also noticed on the Criterion website there was a CSS property of “transition-duration.” I didn’t really know what it meant and obviously didn’t know CSS had this kind of visual power, but I grabbed it from the stylesheet reference in Chrome Developer Tools and pasted it into my own stylesheet. What I noticed actually blew my mind. I utilized this simple color change and made it appear to “fade in” or transition like a film. This, in my mind, creates a much more pleasing visual representation of a hover rather than immediately changing the color as we may have seen in older web applications. The best part of all of it, is if it didn’t change anything in the styling of my application, I would just take it out and move on until I found something more appealing.
Although I may not be a seasoned veteran, and there is still much more to do like this simple visual transition to enhance user experience on my app, it was extremely rewarding to create something that looked and “felt” like any contemporary website. And although it felt like stealing, it really was a tool I found in my bag that I just didn’t know I had yet. All in all, through the use of Chrome Developer Tools, some luck, and modular testing I was able to create a web application that employed styling techniques used by some of the most visually cutting-edge websites of today. Just know that you can, too. All it takes are some sticky fingers.
Sources
Additional Links