--- name: changelog url: /changelog title: Changelog ---
If you're updating a project built with our template stack, the CLI will help you update:
It's also possible to update by hand. Open the bower.json
and change your foundation-apps
dependency to the version you want:
Save the file and then update with Bower:
March 17, 2015
npm update -g foundation-cli
to get it.components
folder in a public directory! This method still works, but you can also just include the templates.js
file and you're good to go.
dist/js/foundation-apps-templates.js
.These Sass variables changed. If you're upgrading an existing project, you'll need to update your _settings.scss
file manually.
$button-background-hover: scale-color($button-background, $lightness: -15%)
$motion-class-showhide: (in: "ng-hide-remove", out: "ng-hide-add");
$motion-class-showhide-active: (in: "ng-hide-remove-active", out: "ng-hide-add-active");
$input-background-disabled: smartscale($input-background)
$input-cursor-disabled: not-allowed
$button-tag-selector
is now false
(previously true
)$panel-animation-speed
You don't need to add the new variables to your settings file, unless you want to change their default values.
The old variables are still in the codebase, but aren't being used. They'll be permanently removed in version 1.2.
templates.js
file, instead of being referenced using hardcoded paths to HTML files.ui-view
elements no longer need the attribute ng-class="['ui-animation']"
to animate properly; just having ui-view
is enough.animation
property to the state object.$background-hover
parameter to the button-style()
mixin. You can pass in a color, or the auto
keyword to automatically set a color based on the $background
parameter.<input>
element with the disabled
or readonly
attributes, or a <fieldset>
with disabled
. The styles can also be added manually by adding the .disabled
class.zf-iconic
directive uses to search for icon files can now be changed width the IconicProvider
provider. Use IconicProvider.setAssetPath(path)
to set the path. Thanks to @gjungb for implementing this!abstract: true
to a view template to make it go.ng-show
and ng-hide
..noscroll
class for grid blocks and content blocks. I bet you can guess what it does!ModalFactory
, by passing it through the contentScope
property on the modal's configuration object.<input type="range">
elements are properly styled in Internet Explorer 10+.$digest already in progress
error from occuring with panels and off-canvas.FoundationApi
service now has an unsubscribe
method, which allows us to remove event listeners from elements that have been removed from the DOM.color
attribute of static notifications not applying.scope.$root
could be null
after a state change.autoclose
not automatically closing under some circumstances.ModalFactory
factory will fetch the modal template before initialization.$panel-animation-speed
, an unused Sass variable for panels. It will be removed in a future version of the framework..ng-hide
class.<button>
tag is no longer styled as a .button
element by default.zf-open
, zf-close
, or zf-toggle
applied gets the cursor: pointer
property.<select>
elements.-webkit-transform-style: preserve3d
..iconic-color-secondary
).The British physicist John Tyndall was the first person to ascend Weisshorn. When the climb was at its most bleak, Tyndall strengthened his resolve with patriotic thoughts:
I thought of Englishmen in battle, of the qualities which had made them famous: it was mainly the quality of not knowing when to yield - of fighting for duty even after they had ceased to be animated by hope. Such thoughts helped to lift me over the rocks.
February 16, 2015
dist
folder, which contains compiled CSS and JavaScript files, in minified and unminified flavors.These Sass variables changed. If you're updating an existing project, you'll need to update your _settings.scss
file manually.
$badge-diameter: 1.5rem
$badge-font-color
is now $badge-color
$badge-padding
$badge-radius
The old variables are still in the codebase but aren't being used. They'll be permanently removed in version 1.1.
The Gulpfile used in the template stack now uses the gulp-load-plugins
library to streamline use of plugins. If you have an existing project, you don't need to change anything to upgrade.
ng-repeat
, you can now add a stagger class to make items animate in sequence. Add the class .stagger
, .short-stagger
, or .long-stagger
to an element to enable the stagger effect..info
and .dark
coloring classes to buttons..align-right
, .align-center
, .align-justify
, or .align-spaced
. These classes mimic the behavior of the grid alignment classes.autoclose
attribute. The value of autoclose
is the number of milliseconds to wait before closing.CSS:
<button>
and <input>
elements can be used as prefix/postfix elements in forms now, in addition to <a>
.<select>
elements to prevent the text from overlapping with the arrow.grid-block()
mixin.<select>
elements in Firefox..dialog
class and sizing classes of modals not working.<a>
) or any element with the ui-sref
attribute.JavaScript:
zf-close
not working when placed outside of a component.pin-at
directive not passing its value to Tether.$scope.params
property on the DefaultController controller.December 23, 2014
Foundation for Apps is now on npm! npm install foundation-apps
Upgrading from an older version? We changed how our Angular plugins are structured, which means an existing app's build process will need to be changed slightly.
Gulpfile.js
with the new Gulpfile.client/assets/js/
.bower_components/foundation-apps/js/angular/**/*.js
.app.js
file. You can use our template stack's file as a baseline to write your own.bower_components/foundation-apps/js/angular/components/**/*.html
.Codebase changes:
app.js
file. Instead, a sample file has been included in the client
folder of the template stack.gulp sass:test
to run the test suite.gulp settings
. The settings parser plguin will be maintained as a separate codebase. The plugin pulls the variables out of each Sass file, after which:
New features:
hm-swipeup
and hm-pinchin
.
zf-touch-close
, which allows you to trigger the close
event on an element by swiping. We'll add more features in future versions.condense
, medium-condense
, large-condense
, medium-expand
, large-expand
.menu-bar-group
container, which allows two menu bars to sit on the same row, aligned to the left and the right. Learn more here.src
attribute of an Iconic icon can now be dynamically inserted. Instead of data-src
, define the icon's source with the dyn-src
attribute on a zf-iconic
element.December 12, 2014
Lots of fixes for the Sass, JavaScript, and documentation. Thanks so much to everyone who's been giving feedback, reporting bugs, and most importantly, fixing our typos this past week.
Welcome to Foundation for Apps 1.0.0! Thanks for swinging by to try it out.
Our initial release of the framework includes:
The framework also includes these sweet components:
These components are also available as Angular directives:
We love feedback! Help us find bugs and suggest improvements or new features. Follow us on Twitter at [@ZURBFoundation](https://twitter.com/zurbfoundation) to keep up-to-date with what's new, or to just shoot the breeze.
If you find a problem or have an idea, open a [new issue](https://github.com/zurb/foundation-apps/issues) on GitHub. When filing a bug report, make sure you specify the browser and operating system you're on, and toss us a screenshot or show us how we can recreate the issue.
It's our 1.0 release candidate! Thanks for stopping by to take a look.
If you want a quick way to jump in, check out our starter template, which has a basic directory structure and a blank index file for you to work with. Follow the instructions in the readme to get going.
The first thing you'll probably want to check out is the grid. If you compile this repo on your machine, you can find the grid documentation at http://localhost:8080/#!/grid. You can also view the source of that file here.
To incorporate our Sass components and Angular directives into your own project, install Foundation using Bower:
The JavaScript is organized into common components, specific directives, and vendor files. There's also a sample `app.js` that shows how to import the Foundation modules, but you'll likely want to set up your Angular application your own way.
We love feedback! We have a few discussion topics open on our issue tracker, but if you have more specific feedback, please open a new issue! If you encounter any bugs, let us know as well. Be sure to specify the browser and operating system you're using, and show us how we can recreate the issue. Code samples are great!
The codebase is very close to feature-complete. Here are the things we're still working on: