I’m a math guy, a numbers dude, and and analytical person at my core. The one thing about web design that scared me the most is the front-end. Have you seen my artistic side? One time I drew a stick figure and the paper exploded. True story. Thankfully, things like Twitter Bootstrap and Foundation exist for artistically inept people such as myself to look like we majored in a liberal art.
For those who don’t know, Foundation is basically just a huge CSS library that makes your website actually look visually appealing. You can add class attributes to your HTML elements for control over your layout and other basic functions. For a rails app, here is the long and tedious process to install Foundation:
The main thing you should know when styling your page with Foundation, is that each “row” is split up into 12 the width of 12 columns. All the neat features are in classes you add as attributes to your tags. For example:
1 2 3 4 5 6 7 8 9
As you can see, the number of columns in a row add up to 12, as should be. You can also nest rows and columns inside other rows and columns. For a stylistically challenged person such as myself, this simplicity is invaluable.
But let’s say you want to style your links so that text link fonts are red. Remember that foundation_and_overrides file I talked about earlier? Go to that file and look for anchor tag styling … ah, here it is!
1 2 3 4
Now all you do is uncomment the font color and replace it with hex red:
1 2 3 4
Pretty easy huh. You can still go and define your own CSS if you want, but this process makes things much easier.
One thing I was most worried about when getting the front-end all nice and pretty was the navigation bar. With foundation, key in a few div tags and you’re done.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
The div class sticky makes it so if you scroll down, the nav bar remains fixed to the top of your screen. I don’t like that, but I thought I’d show you anyway. Everything else is pretty intuitive, just make sure you add the right class to your tags and you’re good to go.
In all, Foundation is a quick way to make your website actually visually appealing in no time at all. And if you’re artistically retarded such as myself, it makes you passable for at least starving-artist status.