Fedil's Blog

A unique individual with a unique perspective

Technology

Tutorial: Foundation for Apps Setup With AngularJS Best Practices – Part 3

Fedil
Foundation for Apps is an awesome responsive framework that utilizes the power of AngularJS.
Foundation for Apps is an awesome responsive framework that utilizes the power of AngularJS.

This part of the tutorial assumes that you have already followed the previous steps of the tutorial. The first part of the tutorial will walk you through setting up all the prerequisites and dependencies. The second part of the tutorial sets up the build script. If you have not gone through these yet, please visit the first part of the tutorial: Foundation for Apps Setup with AngularJS Best Practices and the second part of the tutorial: Foundation for Apps Setup with AngularJS Best Practices – Part 2.

Build the Web App

With all the prerequisites out of the way we can now start building our web app. Let’s start with the index.html page. This page will be used to bootstrap our web application with everything that’s needed.

Let’s start with just the basic html structure for our index.html page:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Angular Seed</title>
  </head>
  <body>
    
  </body>
</html>

This should be easy to understand and really doesn’t need much explanation. If you loaded this page in a browser it would be blank with the words “Foundation Angular Seed” in the browser title bar. Since this is very boring let’s go ahead and start adding in the fun pieces. We will begin with loading the necessary includes.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Angular Seed</title>
    <link href="/css/app.css" rel="stylesheet" type="text/css">
         <script src="/components/lib/foundation.js"></script>
         <script src="/app.js"></script>
         <script src="/view1/view1.js"></script>
         <script src="/view2/view2.js"></script>
         <script src="/components/version/version.js"></script>
         <script src="/components/version/version-directive.js"></script>
         <script src="/components/version/interpolate-filter.js"></script>
  </head>
  <body>
    
  </body>
</html>

Again this is pretty boring because it doesn’t do anything. But these pieces are very important. The app.css file has all the styling that our web app will need. This is where the whole look and feel is defined. The foundation.js file is what includes the foundation and AngularJS frameworks.

<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Angular</title>
    <link href="/css/jcp.css" rel="stylesheet" type="text/css">
    <script src="/components/lib/foundation.js"></script>
    <script src="/jcp.js"></script>
    <script src="/view1/view1.js"></script>
    <script src="/view2/view2.js"></script>
    <script src="/components/version/version.js"></script>
    <script src="/components/version/version-directive.js"></script>
    <script src="/components/version/interpolate-filter.js"></script>
  </head>
  <body>
    <div class="grid-frame vertical">
              <div class="grid-content shrink">
                  <ul class="primary condense menu-bar">
                      <li><a><strong>Foundation for Apps</strong></a></li>
                      <li><a ui-sref="home">Home</a></li>
                      <li><a ui-sref="about">About</a></li>
                  </ul>
              </div>
              <div class="grid-content">
                  <div class="grid-container">
                      <div ng-class="['ui-animation']" ui-view></div>
                  </div>
              </div>
        </div>
  </body>
</html>

Now the file is really shaping up. We started adding the content of our web app. We wrap everything in our grid-frame div. This will tell foundation how to layout our page. The app frame always takes up 100% of the width and 100% of the height of the user’s browser window. The grid-content class is used on divs that will hold pieces of content. Foundation for apps tries to separate layout structures from content structures to make it easier to design your layout. The grid-container class is similar to the row class of Foundation 5.

Looking at the first grid-content div, you can probably guess that this will be our navigation menu. Inside it you can see the list of links that we will use to navigate around our sample app.

So the full file should look like:

src/app/index.html

<!doctype html>
<html lang="en" ng-app="application">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Angular</title>
    <link href="/css/jcp.css" rel="stylesheet" type="text/css">
    <script src="/components/lib/foundation.js"></script>
    <script src="/jcp.js"></script>
    <script src="/view1/view1.js"></script>
    <script src="/view2/view2.js"></script>
    <script src="/components/version/version.js"></script>
    <script src="/components/version/version-directive.js"></script>
    <script src="/components/version/interpolate-filter.js"></script>
  </head>
  <body>
    <div class="grid-frame vertical">
      <div class="grid-content shrink" style="padding: 0;">
        <ul class="primary condense menu-bar">
          <li><a><strong>Foundation for Apps</strong></a></li>
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="about">About</a></li>
          <li><a ui-sref="home">News</a></li>
          <li><a ui-sref="home">Contact</a></li>
        </ul>
      </div>
      <div class="grid-content">
        <div class="grid-container">
          <div ng-class="['ui-animation']" ui-view></div>
        </div>
      </div>
    </div>
  </body>
</html>

Web App Initialization

For our web app we’ll need a file that tells angular how everything is setup and configured. This includes letting angular know what modules the web app needs. You can see these listed out in the “application” module definition. Since this is a fairly simple app, there aren’t many dependencies. We have also gone ahead and setup the initial routing states. You can see this in the config function.

src/app/app.js

(function() {
  'use strict';

  angular.module('application', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',

    // Subsection Views
    'myApp.view1',
    'myApp.view2',
    'myApp.version'
  ])
    .config(config)
    .run(run)
  ;

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

})();

Styles

Now that we have our web app’s basic structure done, we need to setup the foundation styling. This is done with just a couple files. First let’s create our apps sass file. This will simply be called app.scss and we’ll place it in the scss directory. It just has two lines:

src/app/scss/app.scss

@import "settings";
@import "foundation";

This just tells the sass preprocessor to include the foundation scss file (this is included from when we installed foundation for apps) and the settings.scss file. We will make that file now:

src/app/scss/_settings.scss

//  FOUNDATION FOR APPS SETTINGS
//  ----------------------------
//
//  Table of Contents:
//
//  1.  CSS Exports
//  2.  Global Styles
//  3.  Breakpoints
//  4.  Typography
//  5.  Grid
//  6.  Accordion
//  7.  Action Sheet
//  8.  Block List
//  9.  Button Group
//  10. Button
//  11. Card
//  12. Extras
//  13. Forms
//  14. Iconic
//  15. Label
//  16. Menu Bar
//  17. Modal
//  18. Motion UI
//  19. Notification
//  20. Off-canvas
//  21. Panel
//  22. Popup
//  23. Switch
//  24. Tabs
//  25. Title Bar

@import "helpers/functions";

// 1. CSS Exports
// - - - - - - - - - - - - - - -

// Change any value in this map from "true" to "false" to disable that component's CSS class output. You'll still be able to use the component's mixins, but none of our pre-written classes will be in your CSS.

// $include-css: (
//   accordion: true,
//   action-sheet: true,
//   block-list: true,
//   button: true,
//   button-group: true,
//   card: true,
//   coloring: true,
//   extras: true,
//   forms: true,
//   grid: true,
//   iconic: true,
//   label: true,
//   badge: true,
//   list: true,
//   menu-bar: true,
//   modal: true,
//   motion: true,
//   notification: true,
//   off-canvas: true,
//   panel: true,
//   popup: true,
//   switch: true,
//   tabs: true,
//   title-bar: true,
//   typography: true,
//   utilities: true,
// ); 

// 2. Global Styles
// - - - - - - - - - - - - - - -

// This sets 1rem to be 16px
// $rem-base: 16px;

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
// $base-font-size: 100%;

// $base-line-height is 24px while $base-font-size is 16px
// $base-line-height: 1.5;

// Text selector helpers
// $headers: "h1,h2,h3,h4,h5,h6";

// We use these to define default font weights
// $font-weight-normal: normal;
// $font-weight-bold: bold;

// We use these to control various global styles
// $body-background: #fff;
// $body-font-color: #222;
// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
// $body-font-weight: $font-weight-normal;
// $body-font-style: normal;
// $body-antialiased: true;

// Application Colors
// $primary-color: #00558b;
// $secondary-color: #f1f1f1;
// $alert-color: #F04124;
// $info-color: #A0D3E8;
// $success-color: #43AC6A;
// $warning-color: #F08A24;
// $dark-color: #232323;
// $gray: #dfdfdf;
// $gray-dark: darken($gray, 8);
// $gray-light: lighten($gray, 8);

// We use these to make sure border radius matches unless we want it different.
// $global-radius: 4px;
// $global-rounded: 1000px;

// We use this for default spacing
// $global-padding: 1rem;
// $global-spacing: rem-calc(15); 

// 3. Breakpoints
// - - - - - - - - - - - - - - -

// These are our named breakpoints. You can use them in our breakpoint function like this: @include breakpoint(medium) { // Medium and larger styles }
// $breakpoints: (
//   small: rem-calc(0),
//   medium: rem-calc(640),
//   large: rem-calc(1200),
//   xlarge: rem-calc(1440),
//   xxlarge: rem-calc(1920),
// );

// All of the names in this list will be output as classes in your CSS, like small-12, medium-6, and so on.
// $breakpoint-classes: (small medium large);

// 4. Typography
// - - - - - - - - - - - - - - -

// We use these to control header font styles
// $header-font-family: $body-font-family;
// $header-font-weight: $font-weight-normal;
// $header-font-style: $font-weight-normal;
// $header-font-color: #222;
// $header-line-height: 1.4;
// $header-top-margin: .2rem;
// $header-bottom-margin: .5rem;
// $header-text-rendering: optimizeLegibility;

// We use these to control header font sizes
// $h1-font-size: rem-calc(44);
// $h2-font-size: rem-calc(37);
// $h3-font-size: rem-calc(27);
// $h4-font-size: rem-calc(23);
// $h5-font-size: rem-calc(18);
// $h6-font-size: 1rem;

// We use these to control header size reduction on small screens
// $h1-font-reduction: rem-calc(10);
// $h2-font-reduction: rem-calc(10);
// $h3-font-reduction: rem-calc(5);
// $h4-font-reduction: rem-calc(5);
// $h5-font-reduction: 0;
// $h6-font-reduction: 0;

// These control how subheaders are styled.
// $subheader-line-height: 1.4;
// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
// $subheader-font-weight: $font-weight-normal;
// $subheader-top-margin: .2rem;
// $subheader-bottom-margin: .5rem;

// A general <small> styling
// $small-font-size: 60%;
// $small-font-color: scale-color($header-font-color, $lightness: 35%);

// We use these to style paragraphs
// $paragraph-font-family: inherit;
// $paragraph-font-weight: $font-weight-normal;
// $paragraph-font-size: 1rem;
// $paragraph-line-height: 1.6;
// $paragraph-margin-bottom: rem-calc(20);
// $paragraph-aside-font-size: rem-calc(14);
// $paragraph-aside-line-height: 1.35;
// $paragraph-aside-font-style: italic;
// $paragraph-text-rendering: optimizeLegibility;

// We use these to style <code> tags
// $code-color: grayscale($primary-color);
// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
// $code-font-weight: $font-weight-normal;
// $code-background-color: scale-color($secondary-color, $lightness: 70%);
// $code-border-size: 1px;
// $code-border-style: solid;
// $code-border-color: scale-color($code-background-color, $lightness: -10%);
// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);

// We use these to style anchors
// $anchor-text-decoration: none;
// $anchor-text-decoration-hover: none;
// $anchor-font-color: $primary-color;
// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);

// We use these to style the <hr> element
// $hr-border-width: 1px;
// $hr-border-style: solid;
// $hr-border-color: #ddd;
// $hr-margin: rem-calc(20);

// We use these to style lists
// $list-font-family: $paragraph-font-family;
// $list-font-size: $paragraph-font-size;
// $list-line-height: $paragraph-line-height;
// $list-margin-bottom: $paragraph-margin-bottom;
// $list-style-position: outside;
// $list-side-margin: 1.1rem;
// $list-ordered-side-margin: 1.4rem;
// $list-side-margin-no-bullet: 0;
// $list-nested-margin: rem-calc(20);
// $definition-list-header-weight: $font-weight-bold;
// $definition-list-header-margin-bottom: .3rem;
// $definition-list-margin-bottom: rem-calc(12);

// We use these to style blockquotes
// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
// $blockquote-padding: rem-calc(9 20 0 19);
// $blockquote-border: 1px solid #ddd;
// $blockquote-cite-font-size: rem-calc(13);
// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
// $blockquote-cite-link-color: $blockquote-cite-font-color;

// Acronym styles
// $acronym-underline: 1px dotted #ddd; 

// 5. Grid
// - - - - - - - - - - - - - - -

// $container-width: rem-calc(900);
// $block-padding: $global-padding;
// $total-columns: 12;
// $block-grid-max-size: 6; 

// 6. Accordion
// - - - - - - - - - - - - - - -

// $accordion-border: 1px solid $gray-dark;

// $accordion-title-background: $gray-light;
// $accordion-title-background-hover: smartscale($accordion-title-background, 5%);
// $accordion-title-background-active: smartscale($accordion-title-background, 3%);
// $accordion-title-color: isitlight($accordion-title-background);
// $accordion-title-color-active: isitlight($accordion-title-background);

// $accordion-title-padding: $global-padding;
// $accordion-content-padding: $global-padding; 

// 7. Action Sheet
// - - - - - - - - - - - - - - -

// $actionsheet-background: white;
// $actionsheet-border-color: #ccc;
// $actionsheet-animate: transform opacity;
// $actionsheet-animation-speed: 0.25s;
// $actionsheet-width: 300px;
// $actionsheet-radius: 4px;
// $actionsheet-shadow: 0 -3px 10px rgba(black, 0.25);
// $actionsheet-padding: $global-padding;
// $actionsheet-tail-size: 10px;

// $actionsheet-popup-shadow: 0 0 10px rgba(black, 0.25);

// $actionsheet-link-color: #000;
// $actionsheet-link-background-hover: smartscale($actionsheet-background); 

// 8. Block List
// - - - - - - - - - - - - - - -

// $blocklist-background: #fff;
// $blocklist-fullbleed: true;
// $blocklist-fontsize: 1rem;

// $blocklist-item-padding: 0.8rem 1rem;
// $blocklist-item-color: isitlight($blocklist-background, #000, #fff);
// $blocklist-item-background-hover: smartscale($blocklist-background, 4.5%);
// $blocklist-item-color-disabled: #999;
// $blocklist-item-border: 1px solid smartscale($blocklist-background, 18.5%);

// $blocklist-item-label-color: scale-color($blocklist-item-color, $lightness: 60%);
// $blocklist-item-icon-size: 0.8;

// $blocklist-header-fontsize: 0.8em;
// $blocklist-header-color: smartscale($blocklist-item-color, 40%);
// $blocklist-header-uppercase: true;

// $blocklist-check-icons: true; 

// 9. Button Group
// - - - - - - - - - - - - - - -

// $btngroup-background: $primary-color;
// $btngroup-color: #fff;
// $btngroup-radius: $button-radius; 

// 10. Button
// - - - - - - - - - - - - - - -

// $button-padding: 0.85em 1em;
// $button-margin: 0 $global-padding $global-padding 0;
// $button-style: solid;
// $button-background: $primary-color;
// $button-color: auto;
// $button-radius: 0;
// $button-sizes: (
//   tiny: 0.7,
//   small: 0.8,
//   medium: 1,
//   large: 1.3,
// );
// $button-font-size: 0.9rem;
// $button-opacity-disabled: 0.5;
// $button-tag-selector: true; 

// 11. Card
// - - - - - - - - - - - - - - -

// $card-background: #fff;
// $card-color: isitlight($card-background);
// $card-border: 1px solid smartscale($card-background, 7%);
// $card-radius: $global-radius;
// $card-shadow: 0 1px 2px rgba(#000, 0.2);
// $card-padding: $global-padding;
// $card-margin: 0.5rem;

// $card-divider-background: smartscale($card-background, 7%); 

// 12. Extras
// - - - - - - - - - - - - - - -

// $closebutton-position: (top right);
// $closebutton-size: 2em;
// $closebutton-lineheight: 0.5;
// $closebutton-color: #999;
// $closebutton-color-hover: #333;

// $thumbnail-padding: 0.5rem;
// $thumbnail-shadow: 0 3px 15px rgba(black, 0.25); 

// 13. Forms
// - - - - - - - - - - - - - - -

// Basic form variables
// $form-fontsize: 1rem;
// $form-padding: 0.5rem;

// Text fields
// $input-color: #000;
// $input-color-hover: $input-color;
// $input-color-focus: $input-color;
// $input-background: #fff;
// $input-background-hover: $input-background;
// $input-background-focus: $input-background;
// $input-border: 1px solid #ccc;
// $input-border-hover: 1px solid #bbb;
// $input-border-focus: 1px solid #999;

// Select menus
// $select-color: #000;
// $select-background: #fafafa;
// $select-background-hover: smartscale($select-background, 4%);
// $select-arrow: true;
// $select-arrow-color: $select-color;

// Labels
// $form-label-fontsize: 0.9rem;
// $form-label-margin: 0.5rem;
// $form-label-color: #333;

// Inline labels
// $inlinelabel-color: #333;
// $inlinelabel-background: #eee;
// $inlinelabel-border: $input-border;

// Range slider
// $slider-background: #ddd;
// $slider-height: 1rem;
// $slider-radius: 0px;
// $slider-thumb-height: 1.5rem;
// $slider-thumb-color: $primary-color;
// $slider-thumb-radius: 0px;

// Progress and meter
// $meter-height: 1.5rem;
// $meter-background: #ccc;
// $meter-fill: $primary-color;
// $meter-fill-high: $success-color;
// $meter-fill-medium: #e7cf00;
// $meter-fill-low: $alert-color;
// $meter-radius: 0; 

// 14. Iconic
// - - - - - - - - - - - - - - -

// $iconic-primary-fill: $primary-color;
// $iconic-primary-stroke: $primary-color;
// $iconic-accent-fill: $iconic-primary-fill;
// $iconic-accent-stroke: $iconic-accent-fill; 

// 15. Label
// - - - - - - - - - - - - - - -

// $label-fontsize: 0.8rem;
// $label-padding: ($global-padding / 3) ($global-padding / 2);
// $label-radius: 0;
// $label-background: $primary-color;
// $label-color: isitlight($primary-color);

// $badge-fontsize: 1em;
// $badge-padding: .1em .61em;
// $badge-radius: $global-rounded;
// $badge-background: $primary-color;
// $badge-font-color: #fff; 

// 16. Menu Bar
// - - - - - - - - - - - - - - -

// $menubar-fontsize: 1rem;
// $menubar-background: #fff;
// $menubar-background-hover: smartscale($menubar-background, 7%);
// $menubar-background-active: $menubar-background-hover;
// $menubar-color: isitlight($menubar-background);
// $menubar-color-hover: $menubar-color;
// $menubar-color-active: $menubar-color-hover;

// $menubar-item-padding: $global-padding;
// $menubar-icon-size: 25px;
// $menubar-icon-spacing: $menubar-item-padding; 

// 17. Modal
// - - - - - - - - - - - - - - -

// $modal-background: #fff;
// $modal-border: 0;
// $modal-radius: 0px;
// $modal-shadow: none;
// $modal-zindex: 1000;
// $modal-sizes: (
//   tiny: 300px,
//   small: 500px,
//   medium: 600px,
//   large: 800px,
// );

// $modal-overlay-class: 'modal-overlay';
// $modal-overlay-background: rgba(#333, 0.7); 

// 18. Motion UI
// - - - - - - - - - - - - - - -

// Classes to use when triggering in/out animations
// $motion-class: (
//   in: "ng-enter",
//   out: "ng-leave",
// );
// $motion-class-active: (
//   in: "ng-enter-active",
//   out: "ng-leave-active",
// );

// Set if movement-based transitions should also fade the element in and out
// $motion-slide-and-fade: false;
// $motion-hinge-and-fade: true;
// $motion-scale-and-fade: true;
// $motion-spin-and-fade: true;

// Default speed for transitions and animations
// $motion-duration-default: 700ms;
// Slow and fast modifiders
// $motion-duration-slow: 1.4s;
// $motion-duration-fast: 300ms;

// Default timing function for transitions and animations
// $motion-timing-default: ease;
// Built-in and custom easing functions
// Every item in this map becomes a CSS class
// $motion-timings: (
//   linear: linear,
//   ease: ease,
//   easeIn: ease-in,
//   easeOut: ease-out,
//   easeInOut: ease-in-out,
//   bounceIn: cubic-bezier(0.485, 0.155, 0.240, 1.245),
//   bounceOut: cubic-bezier(0.485, 0.155, 0.515, 0.845),
//   bounceInOut: cubic-bezier(0.760, -0.245, 0.240, 1.245),
// );

// Default delay for all transitions and animations
// $motion-delay-default: 0;
// Short and long delay modifiers
// $motion-delay-short: 300ms;
// $motion-delay-long: 700ms; 

// 19. Notification
// - - - - - - - - - - - - - - -

// $notification-default-position: right top;
// $notification-width: rem-calc(400);
// $notification-offset: $global-padding;

// $notification-background: $primary-color;
// $notification-color: white;
// $notification-padding: $global-padding;
// $notification-radius: 4px;

// $notification-icon-size: 60px;
// $notification-icon-margin: $global-padding;
// $notification-icon-align: top; 

// 20. Off-canvas
// - - - - - - - - - - - - - - -

// $offcanvas-size-horizontal: 250px;
// $offcanvas-size-vertical: 250px;

// $offcanvas-background: #fff;
// $offcanvas-color: isitlight($offcanvas-background);
// $offcanvas-padding: 0;
// $offcanvas-shadow: 3px 0 10px rgba(black, 0.25);
// $offcanvas-animation-speed: 0.25s;

// $offcanvas-frame-selector: '.grid-frame'; 

// 21. Panel
// - - - - - - - - - - - - - - -

// $panel-size-horizontal: 300px;
// $panel-size-vertical: 300px;
// $panel-padding: 0;

// $panel-background: #fff;
// $panel-shadow: 3px 0 10px rgba(black, 0.25);
// $panel-animation-speed: 0.25s; 

// 22. Popup
// - - - - - - - - - - - - - - -

// $popup-width: rem-calc(300);
// $popup-background: #fff;
// $popup-border: 0;
// $popup-radius: 0;
// $popup-shadow: 0 0 10px rgba(#000, 0.25); 

// 23. Switch
// - - - - - - - - - - - - - - -

// $switch-width: rem-calc(50);
// $switch-height: rem-calc(32);
// $switch-background: #ccc;
// $switch-background-active: $primary-color;
// $switch-border: 0;
// $switch-radius: 9999px;
// $switch-animation-speed: 0.15s;

// $switch-paddle-color: white;
// $switch-paddle-offset: 4px; 

// 24. Tabs
// - - - - - - - - - - - - - - -

// $tabstrip-background: transparent;

// $tab-title-background: $gray-light;
// $tab-title-background-hover: smartscale($tab-title-background, 5%);
// $tab-title-background-active: smartscale($tab-title-background, 3%);
// $tab-title-color: isitlight($tab-title-background);
// $tab-title-color-active: $tab-title-color;

// $tab-title-padding: $global-padding;
// $tab-content-padding: $global-padding; 

// 25. Title Bar
// - - - - - - - - - - - - - - -

// $titlebar-center-width: 50%;
// $titlebar-side-width: (100% - $titlebar-center-width) / 2;
// $titlebar-background: #eee;
// $titlebar-color: #000;
// $titlebar-border: 1px solid #ccc;
// $titlebar-padding: $global-padding;
// $titlebar-item-classes: (
//   center: 'center',
//   left: 'left',
//   right: 'right',
//   title: 'title',
// );

This is a pretty long file, but you will notice that most of it is commented out. That’s because these are the default settings. You can uncomment a line and change the values to use your own styles. We will not go into changing these in this tutorial.

At this point you can go back to the root directory of your project and run gulp. This will compile what you have so far and start a web server. You can then go to http://localhost:8080 and see the results.

# gulp
The pieces are starting to fall into place. Now we just need to create some content to go with our web app's structure.
The pieces are starting to fall into place. Now we just need to create some content to go with our web app’s structure.

You can see that only the structure of our web app is showing up. Since we haven’t made our views yet, there is nothing to display in the middle section. We’ll go into that in Part 4 of Foundation for Apps Setup With AngularJS Best Practices.

Facebook comments:

Fedil

I was originally born in Missouri, but traveled around most of my childhood. My mom finally got tired of moving while we were in Dallas, Texas and I have been here ever since. After high school I started college at the University of North Texas (UNT) and started working in the computer field. I currently work for JCPenney as a front end software engineer for their e-commerce website. Before this I worked for AT&T about 12 years and started with them in 1999 (when they were Southwestern Bell). I have many passions and I really love photography. Besides photography I also love sports. I not only like to watch it, but I also love to play. Currently my friends and I play indoor soccer and flag football.

3 thoughts on “Tutorial: Foundation for Apps Setup With AngularJS Best Practices – Part 3”

  • Really interesting articles. I would appreciate if you could publish part 4, and show there how to start developing some angular services, factory or controllers.
    Thank you anyway, you teached me a lot from gulp.

    Reply

    • Sorry…been slammed at work. Hopefully will have part 4 published here in week.

      Reply

  • This is a great Tutorial!
    Where is part 4 onwards? These are the juicy bits I was hoping to see.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *