After doing many projects and prototypes, we decided to create a new website for codinum.com. We already had experience with many modern web-related tools and libraries such as bootstrap and grunt, but we wanted to try out something new. After some reading and playing, we decided to use the Foundation 5 framwork and kick-start the project with yeoman. After some searching, the zf5 generator looked so nice, so we installed it as follows.
$ sudo npm install -g yo # if you haven't done it earlier $ sudo npm install -g generator-zf5
After this, we generated the initial project:
$ mkdir ~/projects/codinum.com; cd ~/projects/codinum.com/ $ yo zf5
The result was pretty good: the directory structure together with a grunt configuration and an initial Foundation project were set up. During the development, grunt starts a live preview server on the port 9000 that refreshes the web page right after any content is changed. Not bad in five minutes!
Next, we dug into the details of Foundation that has a brilliant documentation and many other resources. There is a lot of interesting info on their academy site, not only for Foundation but for other web developers as well.
There is a particular feature of Foundation that we like very much. The SASS configuration. With that, you can adjust most of the properties of the Foundation framework for your needs. They provide a
_settings.scss containing all the default values, categorized by features. So basically, you have to change the default values to get 99% of the customization.
Actually, for that we created a separate scss file called
_mysettings.scss that was included right after the default
_settings.scss file, and keep the latter untouched and only override its values.
As Foundation is highly customizable and gives great control, we were able to minimize both the CSS and JS part of the framework. With that, we were able to save many bytes for the visitors. Checking the results with psi we are satisfied.
It was fun as always.