Foundation for sites: HTML front-end framework

  • Introduction to Foundation components

    Foundation is a responsive front-end framework for web developement. It is included in SPHPlaygound framework and therefore also all of Foundation clientside properties are available. SPHPlayground implement many Foudation HTML component in PHP.


    Foundation is tested across many browsers and devices, and works back as far as IE9 and Android 2. Therefore all corresponding SPHPlayground components share the same support.

    What Won't Work?

    • The Grid: Foundation's grid uses box-sizing: border-box to apply gutters to columns, but this property isn't supported in IE8.
    • Desktop Styles: Because the framework is written mobile-first, browsers that don't support media queries will display the mobile styles of the site.
    • JavaScript plugins use a number of handy ECMAScript 5 features that aren't supported in IE8.
  • Foundation 6 Buttons and Button containers

    This namespace includes Foundation 6 styled buttons for many purposes. Because buttons are a core interactive element, it's important to use the right one for each occasion. A basic Foundation styled button can be based on almost any HTML tag that has one CSS-class.

    Navigation component examples:

  • Foundation Form components:

  • Foundation Grid components:

  • Foundation Media components:

  • Foundation 6 Navigation components:

    This namespace includes many Foundation 6 navigation patterns implemented in object oriented PHP. These navigation components can be combined to form more complex, robust responsive navigation solutions. For example this namespace contains a complex top bar that supports dropdown navigation, sidebars and many other menu structures.

    Navigation component examples: