Monday, July 24, 2017

Build the foundation faster

I've recently started to work wit foundation.js. My primary goal for work with foundation is to generate very fast mockups. After completing the first project I've taken a bit of time to learn a bit more.

Here are some insights which were difficult to discover within the documentation:


  • #slack is available but not active enough to get answers
  • Foundation is primarily sass or css framework. If you need to do anything more than build a mockup it is probably not going to have any code you need.
  • Using multiple document layouts: 
    1. managed by panini which is really  handlebars.js
    2. can speed up static prototyping. 
    3. may help with PWA using http 2.0 
    4. you need to have a {{> body}} handlebar in the template.
    5. you have to add YAML FrontMatter to to the page (is this mr Jekyll ?)
    6. the YAML needs to reference the layout ie: layout: file-name-without-ext
    7. if you reference missing layout you will get errors.
  • Panini is based on handlebars.js and handlebars may have you covered if you need a little more than the panini documentation mentions - as the documentation is not very comprehensive. So getting familiar with http://handlebarsjs.com/builtin_helpers.html can accelerate your work if you want to go to proof of concept or minimum viable product without investing in a framework.
  • Lorem Ipsum ... and http://placehold.it/ are  your friends - avoid real date as long as possible it will bifurcate the complexity of your project and slow you down.
  • Frontmatter can help you understand and prototype the data needed to introduce to merge with the static markup in order to make the site dynamic. i.e.
    • FrontMatter dataLayer is faster than
    • Mocking data say using faker.js which is faster than
    • Building a backend with fake data which is faster than
    • Building the backend with real data
  • Try to leverage partials
    1.  by splitting the html into its smallest components. This makes sense if your next step is to convert to components.
    2. If you are going to write tests you probably want to work on small isolated units first.
  • You will probably want to use the CLI based setup as it provides a flexible project to work with and allows rapid introduction of "components". Using the framework is covered in some detail at this page.