I'm using angular-base-apps v. 1.2 which I downloaded via bower. (I just switched from Foundation for Apps). When I use ModalFactory to create a dialog, and then call its activate() method, the dialog does not appear.

The modal-overlay div element is being appended to the body properly, but it does not get the 'is-active' class, so it remains hidden.

I suspect the issue was introduced in this commit but am not certain as I have not been able to track down the bug:
09eff9f

Happy to help with a fix if possible, but someone who knows the code can probably do a better job of this.

https://base-apps.github.io/angular-base-apps/#!/changelog

I'm currently considering to migrate from foundation-apps to angular-base-apps but a properly updated changelog would help a lot to understand the changes between the two.

I want to know what I'll get, and if it is actually an interesting move to make.

The main question I am wondering are:

• Is it a drop in replacement? It very much seems to be (up to 1.2.6) but it's hard to find a definitive answer. If not (or when 2.0 comes), where is the migration guide?
• What bugfixes am I getting with it?
• Any new features?
• Is that doc even up to date? There is no date or version. What version is targeted by the doc? Changelog page indicates 1.2 (no change), while CND links seem to indicate 1.2.6. Readme says it's latest release, confirming it.

So I could find the answer to most questions by browsing around, eg. #9, #35, tags history, readme. But this is not ideal.

• fork https://github.com/zurb/foundation-apps-template and update to latest version
• add section to docs for how to use the template
• migrate to angular-base-apps 2.0 prerelease
• integrate angular-dynamic-routing
• integrate base-apps-router
  • once this PR is merged, the dynamic routing build step will be capable of running outside of gulp.
• integrate angular-icons

Conversation was started on #1, but the thread has grown to include topics that shouldn't be in the initial release. I want to ensure we are all on the same page in terms expectations for upcoming releases. Here is what I'm thinking so far and will update these requirements as needed:

• Release 1.2.1 (Rebranding)
  • Description
    • Drop in replacement for Foundation for Apps 1.2. No changes should be required to consume this version.
    • Documentation for the release will still leverage Foundation for Apps docs.
  • TODO
    • Merge rebanding branch into master
    • Add gulp task to publish new version of distro files to github and tag them with the version
      • basically copy/paste example from gulp-tag-version and trigger after running build
    • Publish NPM/Bower packages
  • PRs
    • #2
    • #5
    • #8
    • #10
    • #12
• Release 1.2.2 (Bug Fixes and Documentation)
  • Description
    • Bug fixes on top of the 1.2.1 release. Minimal changes may or may not be required to consume this version.
    • Documentation for this release will be fully migrated to github pages.
  • TODO
    • Discuss changes to documentation: #4
    • Create new PRs for fixes in old fork: https://github.com/zurb/foundation-apps/pulls
• Release 1.2.3 (Bug Fixes)
• Release 1.2.4 (Tabs Fixes)
  • Improved tab functionality and documentation

I talked to Zurb’s lead engineer yesterday evening at a Meetup at Zurb. Foundation for Apps is deprecated, although not officially, yet. The people who were working on it left the company about a year ago. They are discussing making Foundation for Sites plug-ins for Angular, Ember, and React but development is sometime in the future, at least a year away. There is a plugin for Angular 1 done by someone outside the company.

Zurb’s main product for their clients is design and they deliver 5 html pages with a style guide. They don’t seem to be developing single page apps and didn’t discuss that during the Meetup. They are looking for someone to head up their Foundation projects.

Hope this information is useful. Big thank you to those contributing to this project!!!

https://base-apps.github.io/angular-base-apps/#!/button

When clicking on buttons (any of them, except those under Segmented Button Group and Input Groups) we are back to the homepage.

This is pretty annoying. It would be better to do nothing instead, so the user can test the behaviour and the different (CSS) states of clicking on a button.

Open to debate. It could be argued that it is better this way since a real button will usually lead to another page.

I was having the strangest bugs appear in my apps only on certain devices and couldn't for the life of me figure out what was going wrong. I then stumbled upon this line of code in the build:

.pipe($.autoprefixer({
  browsers: ['last 2 versions', 'ie 10']
}))

Recent browser releases have changed what this code actually does and therefore which browsers are actually supported by the framework. In my local build I've updated this to the following:

.pipe($.autoprefixer({
  browsers: ['> 1%', 'last 2 versions', 'ie >= 10', 'iOS >= 7', 'Safari >= 7', 'Opera >= 25', 'not ie <= 9']
}))

This should match the exact list provided in the compatibility docs regardless of future releases of any browser. Evergreen browsers such as firefox and chrome will autoupdate the user's browser automatically, so the first two checks should cover those browsers.

The iconic library is included as part of the distributed source code for angular base apps. This needs to changes as it messes with ES6 integration. The iconic library can be included as an additional dependency. It isn't a dependency for the core framework, but will be a dependency for #37.

Currently gulp-ruby-sass is used during testing, but gulp-sass is used to create the official distro files. Use gulp-sass for testing to be consistent.

Angular base apps should be designed to work with any icon library and angular-icons is one step in that direction. All the iconic JS code has been moved into angular-icons and will need to be manually included by developers wishing to continue to use the default iconic support.

Update the docs to include steps for how to migrate from 1.x to 2.0:

• How to use angular-front-router (#42)
  • Update project readme
• How to use angular-dynamic-routing (#42)
  • Update project readme
• Rename directive prefix from zf to ba
• Rename services and variables (#44)

Currently the build uses gulp-bump to increase the version number. When publishing a prerelease, the build will bump the patch version and create a prerelease for that version. This is why the 2.0 pre-releases are marked as 1.2.7 instead of 2.0.0.

https://base-apps.github.io/angular-base-apps/#!/labels-badges

Apparently this fork added the secondary label (great), so I believe it could be displayed on the doc with the others.

This also applies to any other colors that would have been added.

Sparked by this issue, it would be useful to have an overlayDestroy property for modals. This new property would act similar to overlayClose, except that it would also destroy the modal after closing it. This way the modal is completely removed from the DOM when the overlay is clicked. As shown in the issue above, there is a memory leak if you attempt to use overlayClose without providing an ID. Using overlayDestroy in that case would solve the issue.

The current implementation of tabs does not work well with angular and has resulted in many issues being posted against the old repository. In addition, the tabs don't conform to the internal sub/pub system as all other components, making it impossible to control outside the scope of the tabs. Tabs should be able to be opened and closed using the sub/pub system just like any other component.

https://base-apps.github.io/angular-base-apps/#!/labels-badges

When the labels are going over 2 lines (ore more) they touch each other, it would be nice to have a vertical spacing between them (using a p as the container would probably do, maybe changing line-height). Same for badges on small screens.

Is anyone aware of the usage of the $foundation-version SCSS variable in the codebase? I see the comment "Meta styles are included in all builds, as they are a dependency of the Javascript.", however, only foundation-mq is used.

I'll remove it if it is not used, otherwise, the build will need to be updated to auto update the version with each build.

Decouple the dynamic routing logic from the framework and put it in its own repository. The work was started with https://github.com/zurb/front-router to migrate the gulp task. The base.dynamicRouting and base.dynamicRouting.animations modules should also be moved.

The dynamic routing logic can then be an optional dependency included by applications and does not need to be supported with the core framework.

Create an angular service (IconManager) which will be responsible for configuring which icons to use in the application. Currently the framework supports a subset of icons from Iconic. The desire is to be able to use any icon library such as Ionicons or Material Icons (or others down the line). The framework should allow configuring which icon library to use via an IconManagerProvider. Ideally, the framework will lazy load the icon library files so that only libraries enabled are loaded.

The IconManagerProvider should provide the following functionality:

• A configuration object for iconic
  • Enabled by default
  • See current implementation for Iconic provider for other configuration options
• A configuration object for ionicons
  • Disabled by default
• A configuration object for materialicons
  • Disabled by default

The IconManager should provide the following functionality:

• Support icons from Iconic
  • See current implementation for Iconic service and zf-iconic directive
• Support icons from Ionicons
• Support icons from Material Icons
• Allow lazy loading library files
  • See https://github.com/urish/angular-load
  • Path to files can be part of config object. By default the paths can be configured to point to a CDN where the files are hosted. The developer can choose to override this with local paths if they want to host their own files.
  • Once lazy loading is supported, it should still allow the developer to not lazy load the files, in the event they want to include the icon library source in their application source for backwards compatibility.

Add following directives:

• ba-iconic
  • should be interchangeable with zf-iconic since zf-iconic will become ba-iconic after prefix rename (#31)
• ba-ionicons
  • options should be similar to ba-iconic for consistency
• ba-material-icons
  • options should be similar to ba-iconic for consistency

https://base-apps.github.io/angular-base-apps/#!/popup

• click on the popup example
• while the popup is open, click on a link on the menu
• nothing happens

The same issue is there with notifications.

https://base-apps.github.io/angular-base-apps/#!/notification

While it can be argued that modals should display this behaviour, I don't think it's great for popups and especially not for notifications.

I have a case where I'm rendering dynamic html inside a modal using markdown. The markdown has a link in it, but that link is not clickable when inside a modal. The reason is use to the usage of $event.stopPropagation() on the modal aside. This change was added with df8c446#diff-160b4a3ed4aa7fb9043eb012e68e4751.

If the framework is not supported by the browser, display an overlay indicating lack of support. Currently I use Modernizr's flex-box support as the way for determining whether the framework is supported. With Modernizr's automated custom build, the size of the additional dependencies for this feature can be minimized.

Provide steps in the docs on how to configure this in any application or possibly create an optional angular module to do it.

Currently, if you attempt to place zf-tab-content above zf-tabs, the displaced functionality will not work. Example markup shown below:

<div zf-tab-content target="displaced-tabs">
</div>
<div zf-tabs id="displaced-tabs" displaced="true">
  <div zf-tab title="Tab 1">
    Tab 1
  </div>
  <div zf-tab title="Tab 2">
    Tab 2
  </div>
  <div zf-tab title="Tab 3">
     Tab 3
  </div>
</div>

approval pending: jsdelivr/jsdelivr#12754

The following code will cause the link to not navigate to the desired page:

<div zf-close="anything">
  <a href="www.google.com" target="_blank">google</a>
</div>

As a workaround, you can use:

<div zf-close="anything">
  <a ng-click="navigate()">google</a>
</div>

Where navigate will programmatically change the url. This solution will not work for me however since the html used inside the div is generated via markdown.

Create a reusable PromptModal modal that can replace window.prompt. The implementation of PromptModal should simply use ModalFactory as shown in the docs for the ProgrammaticModal. The following JS options must be configurable for the PromptModal:

• Title
• Content
• Input Type
  • value to use for the type attribute of the input
• Enter Callback
  • callback should have one argument, that being the value entered by the user
• Cancel Callback

The class prompt-modal can be added to the modal via the ModalFactory class option. This will allows others to style the modal as needed. A more robust SCSS solution can also be implemented.

With most of the framework stabilized as of v1.2.5, I'm looking for what to work on next for this framework. If anyone has opinions on new features or enhancements to existing ones, let's talk about it! Here are the current approved features:

Loading Symbols (#38) (v2.0)

A set of loading symbol directives that make it easy to change the style and color of the loading symbol. The directive should work flawlessly with ng-if, ng-show, and ng-hide to allow controlling the visibility of the symbol (i.e. show when loading data, hide when data is loaded).

I'm thinking this library would be cool to integrate: http://tobiasahlin.com/spinkit/

Confirm Modal (#39) (v1.2.6)

A directive to replace window.confirm. The directive would be built using a modal and allow for an asynchronous confirmation in the app. Various SCSS variables can be exposed to allow styling of the confirmation modal.

Prompt Modal (#40) (v1.2.6)

A directive to replace window.prompt. The directive would be built using a modal and allow for an asynchronous prompt in the app. Various SCSS variables can be exposed to allow styling of the confirmation modal.

Replace Font Iconic (#37) (v2.0)

Its a commercial webfont and icon set and including its free parts is plain advertising. Two great replacement options are either Ionicons or Android icons. Either choice will be a much better feature for us.

Animating Views (#42) (v2.0)

Does anybody actually use them? Its not valid HTML, it belongs in route definitions and if necessary, it can be moved to a separate directive. Do we need them?

Allow positioning an icon or loading symbol to the left or right of the text for a button or button-group. Functionality should match icon-left and icon-right classes for menu bar.

I will be using firebase for an upcoming app and will be using the angularfire library to integrate with firebase. Once you integrate any type of backend with this apps framework, you'll find you need some way to block access to certain content, so it would make sense to provide a standard way to do this for any app. Once I have a better idea of the requirements I'll provide more details.

Currently, the tabs component requires one tab to be one at all times. Update the component so that it can optionally allow not having a tab open. In this case, close all tabs to start and if a tab is open, allow close it by clicking the tab (the same way it was opened).

For consistency, use the same auto-open and collapsible attributes as the accordion

Create a reusable ConfirmModal modal that can replace window.confirm. The implementation of ConfirmModal should simply use ModalFactory as shown in the docs for the ProgrammaticModal. The following JS options must be configurable for the ConfirmModal:

• Title
• Content
• Enter Callback
• Cancel Callback

The class confirm-modal can be added to the modal via the ModalFactory class option. This will allows others to style the modal as needed. A more robust SCSS solution can also be implemented.

Provide the ability to navigate between different versions of the docs in the UI. Currently navigation must be done by manually updating the url.

The wave loader does not scale properly. The spacing is off when the wave is small. The SCSS math needs to be updated so the wave looks correct for all sizes. The issues seem to do with fractional pixels.

I published the docs for the 2.0 prerelease to https://base-apps.github.io/angular-base-apps. Give it a try and post any issues you find.

@tolyo @mattgrande @gakimball @AntJanus @Seb-

Replace the internal subset of the iconic library with the open source version of iconic.

The following updates need to be made to the documentation:

• Migrate docs to github pages branch
• Enhance API documentation
• Enhance examples with more real-world scenarios
  • communication between components via sub/pub system

Allow framework to be compatible with angular 1.5, without dropping support for 1.3 or 1.4

The docs are distributed with each release. If someone needs to view the docs for a previous release, they can sync the docs from github and view them using a local web server such at http-server.

The three bounce loader does not scale properly. The dots are not perfect circles when the three bounce is small. The SCSS math needs to be updated so the three bounce looks correct for all sizes. The issues seem to do with fractional pixels.

I have no idea how displaced tabs work based on the example in the docs. No content is in the displaced html, so how is the example suppose to even showcase the feature...

Create a set of loading symbol directives that make it easy to change the style and color of the loading symbol. The loading symbols from SpinKit would be a good place to start. All the loading symbols are created with SCSS and will plug in nicely with this framework.

Add $secondary-color to $foundation-colors scss variable. This will allow using the secondary class for labels, cards, and iconic coloring. These are the only components in the codebase which currently use $foundation-colors.

The current implementation of accordions does not work well with angular and has resulted in many issues being posted against the old repository. In addition, the accordions don't conform to the internal sub/pub system as all other components, making it impossible to control outside the scope of the accordions. Accordions should be able to be opened and closed using the sub/pub system just like any other component.

Remove references to all foundation modules and files. This release will require developers use the new base modules and distro files as defined in the 1.2.1 release.

• replace zf references with ba (in framework and docs)
• remove foundation modules
• remove foundation distro files
• remove foundation in docs
• replace foundation in code base (#44)

see post on foundation forum:

http://foundation.zurb.com/forum/posts/39402-iconic-default-asset-path

The docs heavily references Zurb / Foundation and there are many links to their various sites. These references need to be removed or updated throughout the docs.

This will allow users to view the docs for 1.x and 2.x without having to manually git clone the older docs.

This will be a bit tricky though, since both sets of docs create the same angular application. The docs are hosted on github pages, so we can't simply route the urls to point to the correct version of the docs. Some type of master controller can be added which can bootstrap the correct version of the docs, though that may be overkill.

Perhaps we can simply host the docs for 1.2.6 somewhere else and leave the github pages to always be the latest version. Maybe create a separate repo for the 1.2.6 docs and host those through github pages? This isn't scalable for the future, but would be enough for 2.0.

We need to release angular-base to NPM but before that gets done, there is a lot of work to do, mainly having to do with other open source projects related to Foundation for Apps, and branding as well as deciding on the structure of the leadership behind this fork.

The auto-generated _settings.scss file is not being generated with the build