Here’s how we added some simple styling to our app and made it responsive for different screen sizes.
We decided on using Zurb Foundation as a CSS framework for our app.
There are several different ways to get Foundation working with Rails, as we needed something lightweight, quick, and with no JavaScript, we chose to use a custom download selecting only the bits that we needed.
We then copied the stylesheet, and pasted the styles directly into the application.
css file.
Making it responsiveThe newest version or Foundation uses a grid they call an XY Grid.
As I haven’t used this type of grid before we downloaded the older Flex Grid version which uses Flexbox, a layout system which I’ve used in the past.
The grid works by giving a container the class of ‘row’.
Anything inside the row class can be split into a total of 12 columns.
You use the the class small, medium, and large to tell the browser how many columns an element should take up depending on viewport size.
As we were taking a ‘mobile first’ approach, we styled how things would look on a small screen first, and then how they would grow and move as the viewport size increased.
Custom stylingThe Foundation framework has some great styling out of the box, but to help get across the feeling of our app we created some custom styles.
The primary colour that comes with Foundation is a light blue.
This will be the default colour of buttons and links etc.
it also comes with some useful hover effects that darken the colour when a user holds the mouse cursor over the element.
If we were to overwrite this colour in the stylesheet it would mean that we would also need to rewrite all of the hover transitions too.
This is where custom downloads come in handy.
By changing the colours used you can keep the built-in functionality and create more of a unique look.
The colour we chose was #23F0C7 a bright turquoise colour which we both felt helped the apps UI to pop.
Our app was a social place to review and share computer games.
We wanted to use a font found on Google Fonts that has an 8bit pixel vibe for our site title to act as a logo and for the main headlines of each page.
To include this font in our app we linked to the hosted version of the font at the top of the application.
html.
erb file in the layouts folder.
Then to style the app title in the menu and main headline text we added the following to the CSS file.
Star ratingWe have a feature on our app that lets users rate games they have played.
Rather than show this as a simple number out of 5, we wanted to show the actual number of stars.
For this, we used a simple Ruby method to get all of the ratings for a particular game and then divide the total by the amount of ratings to find the average.
For the stars we used Font Awesome’s icons.
These are font icons that can be styled with CSS just like normal text.
We linked to Font Awesome at the top of the application.
html.
erb file.
In the view file that we wanted to show the stars on, we looped through the average rating, printing out the tag with the star class on each iteration.
ConclusionTaking this approach to styling our app was great for what we needed it for.
I’d do something similar if I ever needed to show a prototype of an app that I was building.
For a full-scale Rails app, I either would use Foundation with Sass and JavaScript, installing it through the command line as detailed here, or use a more lightweight framework such as Bourbon.
.. More details