I’ve had a serious obsession with CodePen lately, so I decided to create a little quote generator for our 2016 presidential candidates. Maybe you want to torture your friends with endless Bernie quotes, or maybe your favorite future POTUS has a few uplifting words you would like to share on Twitter. Whatever the case may be, this gen is for you… 😉Check it out HERE
Other than creating the generator itself, I had three additional goals:
1. Get started with Foundation CSS – I had no problems here. I’ve been heavy into Bootstrap CSS since the company I work for uses it for everything we do, but Foundation has looked for cool to me for a while. I particularly like the overall flatness of the ui elements. Little did I know the grid system, helper classes, etc.. are very familiar to bootstrap and possibly even more user friendly. Setting up the interface for this gen was seriously a breeze. I especially like the centered columns class, which allows a column to be horizontally centered when collapsing on smaller screens. Also, text-center is used for everything. Bootstrap relies on text-center for text elements and center-block for anything else. It’s the small workflow things like this that have already got me leaning toward Foundation for future projects. This could be a full blog post by itself.
2. Create a responsive generator – I’ve seen a lot of fixed width generators like mine, since it’s way easier to setup a static image and then use positioning to place the text over it. No calculation is required if you go that route. However, I really wanted this generator to not only work on mobile, but look great doing it. I ended up testing a few 3rd party plugins like fittext.js and textfit.js, but they didn’t meet my needs fully since I needed the text to also recalculate based on how large the image it sits on resizes to. I ended up creating a function that stores the main image height in a variable and then makes a font size adjustment based on it. The JQuery resize function is used to trigger all of this.
3. Allow the user to download the generated image – This was probably the easiest part of this little project. html2canvas is a super cool JS plugin that makes converting canvas elements to popular image formats a breeze.
If you have any comments or suggestions, please reach out via the comments or email. I’d love to discuss ways to improve my code.