{"id":6908,"date":"2015-09-09T16:15:22","date_gmt":"2015-09-09T13:15:22","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6908"},"modified":"2015-09-06T11:51:57","modified_gmt":"2015-09-06T08:51:57","slug":"getting-running-foundation-apps","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/","title":{"rendered":"Getting Up and Running With Foundation for Apps"},"content":{"rendered":"

I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web development and web apps.<\/p>\n

One thing that interests me a lot on the front-end side of development are frameworks. A framework can give you everything you need to get up and running and prototyping.<\/p>\n

In\u00a0this article I will\u00a0show you how to get up and running with ZURB\u2019s Foundation for Apps<\/a>.<\/p>\n

Foundation for Apps is a front-end framework for developing fully responsive web apps. It is built on AngularJS, and they have templatized Angular. One can make a simple app without writing any Angular code. The framework also uses Motion UI to add motion to views so users can see content changes.<\/p>\n

Install<\/h2>\n

Foundation for Apps has two ways to get up and running. If starting from scratch you can use the CLI for a quick install. If you have an existing project that you would like to add Foundation for Apps to there is also the manual install. For my purposes I will be using the CLI install.<\/p>\n

The CLI install downloads a template project that will include everything to get you up and running. To get started with Foundation for Apps make sure you have both Node.js<\/a>\u00a0and Git<\/a>\u00a0installed. If you already have Node installed, make sure that npm is up to date.<\/p>\n

With everything installed that is needed, run the following command from the command line.<\/p>\n

$ npm install -g foundation-cli bower gulp<\/pre>\n
This will give you access to `foundation-apps` and also install Bower<\/a>\u00a0and Gulp<\/a>.<\/p>\n
To build a new project navigate where you would like the new project to live and run the following command from the command line.<\/p>\n
$ foundation-apps new myApp<\/pre>\n
Where `myApp` is the name of your app. In my case I will be using myTraining.<\/p>\n
Once you are done with that navigate into the directory using:<\/p>\n
$ cd myTraining<\/pre>\n
The directory structure will look something like this:<\/p>\n
+-- myTraining\r\n\t|\t +-- bower_components\r\n\t|\t +-- bower.json\r\n\t|\t +-- client\r\n\t|\t +-- etc\r\n\t|\t +-- gulpfile.js\r\n\t|\t +-- node_modules\r\n\t|\t +-- package.json\r\n\t|\t +-- readme.md<\/pre>\n
Now just run:<\/p>\n
$foundation-apps watch<\/pre>\n
This assembles all of the the pieces into a build directory. The command also sets up a temporary server that will point to your app and display the template in the browser. Now all you need to do is start building your next web app.<\/p>\n
Final Thoughts<\/h3>\n
Currently I have been wanting to build a mapping app. I was looking for a framework I could get up and running quickly with a layout that I liked, and Foundation for Apps has delivered for me.<\/p>\n
There are other frameworks out there \u2013 probably the biggest competitor would be Bootstrap. Both frameworks are comparable and I am not sure I could 100% pick one or the other. To me it is a matter of personal preference to which may suit your needs better. That being said, give Foundation for Apps a try and see what you think of it.<\/p>\n
\n\n\n\n
Reference: <\/span><\/td>\nGetting Up and Running With Foundation for Apps<\/a> from our WCG partner<\/a> Keyhole Software at the Keyhole Software<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web development and web apps. One thing that interests me a lot on the front-end side of development are frameworks. A framework can give you everything you need to get up …<\/p>\n","protected":false},"author":22,"featured_media":927,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[239],"class_list":["post-6908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-foundation-for-apps"],"yoast_head":"\nGetting Up and Running With Foundation for Apps - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Getting Up and Running With Foundation for Apps - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"http:\/\/facebook.com\/keyholesoftware\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-09T13:15:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Keyhole Software\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@http:\/\/twitter.com\/keyholesoftware\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keyhole Software\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\"},\"author\":{\"name\":\"Keyhole Software\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2\"},\"headline\":\"Getting Up and Running With Foundation for Apps\",\"datePublished\":\"2015-09-09T13:15:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\"},\"wordCount\":496,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"keywords\":[\"Foundation for Apps\"],\"articleSection\":[\"Web Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\",\"name\":\"Getting Up and Running With Foundation for Apps - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"datePublished\":\"2015-09-09T13:15:22+00:00\",\"description\":\"I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Dev\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Getting Up and Running With Foundation for Apps\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2\",\"name\":\"Keyhole Software\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g\",\"caption\":\"Keyhole Software\"},\"description\":\"Keyhole is a midwest-based consulting firm with a tight-knit technical team. We work primarily with Java, JavaScript and .NET technologies, specializing in application development. We love the challenge that comes in consulting and blog often regarding some of the technical situations and technologies we face.\",\"sameAs\":[\"http:\/\/keyholesoftware.com\/\",\"http:\/\/facebook.com\/keyholesoftware\",\"http:\/\/linkedin.com\/company\/keyhole-software\",\"https:\/\/x.com\/http:\/\/twitter.com\/keyholesoftware\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/keyhole-software\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Getting Up and Running With Foundation for Apps - Web Code Geeks - 2026","description":"I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/","og_locale":"en_US","og_type":"article","og_title":"Getting Up and Running With Foundation for Apps - Web Code Geeks - 2026","og_description":"I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web","og_url":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"http:\/\/facebook.com\/keyholesoftware","article_published_time":"2015-09-09T13:15:22+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","type":"image\/jpeg"}],"author":"Keyhole Software","twitter_card":"summary_large_image","twitter_creator":"@http:\/\/twitter.com\/keyholesoftware","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Keyhole Software","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/"},"author":{"name":"Keyhole Software","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2"},"headline":"Getting Up and Running With Foundation for Apps","datePublished":"2015-09-09T13:15:22+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/"},"wordCount":496,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","keywords":["Foundation for Apps"],"articleSection":["Web Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/","url":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/","name":"Getting Up and Running With Foundation for Apps - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","datePublished":"2015-09-09T13:15:22+00:00","description":"I have been programming for 9 years now, mostly focused on Java EE development. One area that I\u2019m always interested in exploring is front-end web","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/web-dev-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/web-development\/getting-running-foundation-apps\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"Web Dev","item":"https:\/\/www.webcodegeeks.com\/category\/web-development\/"},{"@type":"ListItem","position":3,"name":"Getting Up and Running With Foundation for Apps"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/10701460d97ebefdaf658a4f4535fff2","name":"Keyhole Software","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/68be341bef51b95ced09befd6a7e0ca930461d95f3a64285e03e7925b8f5de47?s=96&d=mm&r=g","caption":"Keyhole Software"},"description":"Keyhole is a midwest-based consulting firm with a tight-knit technical team. We work primarily with Java, JavaScript and .NET technologies, specializing in application development. We love the challenge that comes in consulting and blog often regarding some of the technical situations and technologies we face.","sameAs":["http:\/\/keyholesoftware.com\/","http:\/\/facebook.com\/keyholesoftware","http:\/\/linkedin.com\/company\/keyhole-software","https:\/\/x.com\/http:\/\/twitter.com\/keyholesoftware"],"url":"https:\/\/www.webcodegeeks.com\/author\/keyhole-software\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6908","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6908"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6908\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/927"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}