Mixing and Matching Components for Zurb Foundation 6 Sites & Apps

Question

Is it possible to mix and match components for Zurb Foundation 6 for Sites/Apps? For example, can I use the the Card component of Zurb Foundation 6 for Apps in a Foundation 6 for Sites installation?

If so, how is this possible?

Answer 1

Its is very much possible and I've been using them in my works. Simply make sure to include appropriate css and js files.

For example :

<!--Scripts-->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/foundation.min.js"></script>
    <script type="text/javascript" src="js/foundation-apps.min.js"></script>
    <script type="text/javascript" src="js/foundation.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script type="text/javascript" src="js/iconic.min.js"></script>
    <script type="text/javascript" src="js/motion-ui.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>

<!--Styles-->
    <link rel="stylesheet" href="css/foundation-apps.min.css"/>
    <link rel="stylesheet" href="css/foundation.min.css"/>
    <link rel="stylesheet" href="css/motion-ui.min.css"/>
    <link rel="stylesheet" href="css/app.css"/>

You this for local development and if you want, you can compress all files into one minified (.min) file for production.