Building a New House of Beor Website with Foundation 6

Its been somewhat embarrassing for quite some time that our main website www.houseofbeor.net has a less than ideal responsive layout – ok fine its not responsive at all. This impacts our site at Tarn Aeluin too. Building a new House of Beor website is something I have just pushed off for a few years, I suppose because I’m more interested in other things (android, swift, node.js, beer, etc.). Finally with the company opening, it is time to take this on. Foundation 6 is a modern website framework that I’ll use to do a complete re-write.

Current State

Current state (September 2016) shows that the site, originally written in 2012, is a pretty basic HTML5/CSS/JS site. I’m using modernizr and jQuery. There’s a few Google APIs mixed in for fonts and of course traffic monitoring. The site has a fixed width and completely unresponsive design. Yeah – kinda sad 🙁

The last time I worked on this I really didn’t need much so I just rolled my own, grabbing a few things from here and there. This time around I would like to be a bit more “out of the box” and work with a complete framework.

There isn’t really too much content either, partially because I didn’t have much need for content while HOB was a closed company. Now that the company is transitioning to an “open for business” company this will change a bit.

Future State

Like I said this time around I think starting with a complete framework is the best idea for making this easy and robust for future needs. I don’t have a ton of additional requirements, but there are a few things I can think of:

1. Responsive design is a must
2. It would be cool to include a “latest posts” from our blog site here (via REST calls from our WordPress site)
3. My son’s novels that are getting published and we need a marketing section
4. Perhaps an interactive “contact” form would be good since we are becoming a “real” company.
5. Might be nice to have some kind of “social” page that shows activity from our G+, Twitter, etc. pages.

Frameworks A Plenty

There’s no shortage of web frameworks out there. Bootstrap, Sensha – yikes, how’s a dev supposed to make a decision. Well – I’m not sure, but I looked at a bunch of them and I decided to go with Foundation. Why? Well – intuition I guess. I looked at the docs (quite good), I looked at how to install it and they had a GUI (Yeti) and an npm command line (cool) that could pump out starter projects, and it seemed to cover all the basics in terms of SASS/CSS, JS, and HTML5 without imposing too much overhead.

I definitely liked the idea of working with either a CSS site or with a base SCSS project. Bootstrap looks ok, but maybe I’m just anti-Twitter or something (don’t think so), but I just don’t want to use it. Difficult call – but seems like a decent direction. I’m not going to go into all the features, you can do that, but I’ll be using Foundation 6.

Getting Going with Foundation 6

There’s a bunch of docs and some decent tutorials on youtube.com, this one in particular is good. Depending on your familiarity with the tools (HTML5, CSS3, JS) getting started can be really easy or require a bunch of work. I’m familiar with most of the concepts, although I don’t do a lot of web stuff anymore so I’ll go thru most of the tutorials since they are pretty easy to get thru. I’m not sure what I want my new website to look like so maybe I’ll get some good ideas. You can also go straight to the Foundation documentation.

HTML5/CSS/JS Tips & Tricks

Here’s some tips and tricks, not necessarily Foundation 6 things, I learned while learning about Foundation 6:

• To keep a section centered, with with a sliding margin use this handy CSS selector:

  margin: 0 auto;

• Grids can be confusing – remember that when the page gets narrow (phone screens) you need to take up more columns, not less. Foundation has several grid systems. Flexbox is the most sophisticated. I need to get this project done and the Flexbox documentation is not that great. I used the standard grid.
• There’s an interesting way to set hover effects with a CSS tag. This tag when applied to a div will slightly darken the div:

  background-color: rgba(0,0,0,0.1);

• Media queries are critical to get your breakpoints for mobile and tablets working. They are also a PITA to remember. Mozilla Developer Network has a good post called Using Media Queries on how to use them.
• Definitely Google Chome dev tools has a killer feature not in Firefox for Devs. When you change the screen size with the Dev Tools open in Chrome it tells you the size of the browser window in pixels. Very handy indeed!
• If you splurge on an IDE like PHPStorm, you can configure it with yuicompressor to minify your CSS.

Results – That’s What its all About!

Foundation is really cool – there’s lots more to learn and I really like the framework. We’ve released out new site for www.houseofbeor.net and it looks really great. What is even better is that it is much simpler and easier to work with. I’ll go thru image optimization still to reduce the footprint, but so far I really do like how things have come out.

The look is based on the hero image taken from a vacation to Town Bank NJ a few years ago. The footprints are my son’s and that is a setting sun. Readers will find that the fonts from Google and are designed to invite and be very easy to read. I hope eventually to have a running list of the latest posts from Tarn Aeluin here, but no promises. 🙂