WilliM company website build on FoundationCMS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



FoundationCMS is our attempt at creating a user-friendly Content Management System.

Zurb Foundation framework

The main focus of this CMS is the use of the Zurb Foundation framework. The Zurb Foundation framework is an advanced responsive front-end framework. It enables fast front-end development, is widely supported and has an active community.


The building blocks of FoundationCMS are called Widgets (Yeah...not very creative). These widgets are small blocks of front-end code which can be inserted in a webpage. Literally these are just blocks of HTML code with some specific CSS classes so it can be edited and repositioned.

Back-end code

At the back-end, the code of a widget encompasses a little bit more. Widgets are all placed in a certain folder on the webserver. This is a well-known location and all widgets placed in this folder will be automagically loaded. This makes it very easy to add new widgets. A widget consists of the following parts:

  • The normal view/controller - this is shown on the page
  • The edit view/controller - this is shown in the Edit modal dialog.


On every first edit of the day, the placement of the widgets are archived. This makes it possible to revert to a previous version of the website. It is also possible to create a snapshot manually.

Do note that this is only a snapshot of the widgets and its placement on the website. The content is not archived. What this means in practice is that reverting to a previous version of the website will result in the same layout but with the latest content. However, the latest content could affect how the website looks in that version because the field classes is also stored as part of the content.


FoundationCMS uses one type of content for all of its widgets. The so called content item is dynamic. The number and type of fields which a content item has is determined by the widget it is related to. This might sound a bit confusing at first, but I'll do my best to explain this the best I can to show how logical it actually is.

Because a widget in itself is nothing more than just a window to the content. The widget itself determines what parts of the content it wants to display and how it should be displayed.

For instance, we take a content item consisting of the fields: title, leadtext, content and classes. The FoundationPanel widget will display all the fields and incorporate the classes into the class="" attribute of the encapsulating HTML element.

But when we display that very same content in the FoundationHeading widget it will only show the title field and incorporate the classes into the class="" attribute of the encapsulating HTML element. The rest of the fields are unused.

Editing content

Content items can only be added/modified/hidden through a widget. Clicking on a particular widget in edit mode will bring up a dialog which allows you to edit its content. Only the fields supported by the widget are shown and editable. The user should not need to concern about what other unused fields exist for that content item in this particular context.


There are some exceptions where content are actually bound to the widget. For instance the photos uploaded using the FoundationPhotos widget are bound to that specific widget. The photos can't be transferred. Deleting the widget will also delete the photos.


FoundationCMS uses the following technologies:

Technology Description Included in FoundationCMS
Zurb Foundation framework Responsive framework Yes
GruntJS Grunt task manager No
Compass CSS authoring framework (scss/sass) No
RequireJS JavaScript file and module loader Yes
jQuery jQuery Yes
Slick Carousel Yes
Dice PHP Dependency Injection Container Yes
PHP PHP Hypertext preprocessor No
MySQL MySQL Database No
Technologies not included needs to be installed separately. Check their respective websites for installation instructions.


In order to distribute FoundationCMS you need to compile it first. This is easily done by running grunt in the root of the project folder on the command-line.


The distributable code will be placed in the dist folder. There you can find the cleaned-up, optimized and compiled FoundationCMS. When installing FoundationCMS to a webserver running PHP you can use the code in the dist folder.