Today’s page was about taking a psd file and turning it into code!
I decided to write the css in Sass. I set up sass and got it to watch the precss file for changes. It was fun to try writing in sass but I found I had a lot of ‘nested’ classes which made the resulting css quite bulky. Even after consolidating classes and styles, I still had seemingly repetitive styles for all the different colors. I felt like I was not using the full power of sass. Then again, first page using sass, let’s not get too ambitious here.
As I don’t have Photoshop, I used Pixelmator, a free photo editing tool for Mac. Using the slice tool, I got the background photo image files. Navigating the different layers of the psd file took some clicking and unclicking. I feel like there should be an easy way to select which layers you want…layers should be sorted by the sections they affect!
I did a funny thing with the buttons: from the psd, I got the colors and set the styles individually for the light green and blue buttons. I assumed that the three buttons on the image backgrounds were the ones with less opacity. After setting all the button styles, I looked again and had a moment of realization: the light blue and light green buttons were just white buttons as well. White plus blue equals lighter blue… good old colors.
Day 58 – Webinars