Ractive.js components for Foundation v5 markup and styles.
End goal is to build up a library of reusable components for Foundation v5.
sudo npm install -g gulp
Install the package via npm, all dependencies will be in the
$ npm install ractive-foundation --save
Or download and add the dependencies. (again all dependencies will be in the
Example use of components:
Clone the repo, then from the root folder:
gulp wing --name ux-blah to create a new
ux-blah folder (and files) in
$ gulp wing --name ux-blah[07:22:07] Using gulpfile ~/dev/projects/ractive-foundation/Gulpfile.js[07:22:07] Starting 'wing'...[07:22:07] Finished 'wing' after 1.16 ms
gulp wing --help for more info
Important note: Any file in public folder is copied there as part of the gulp build process.
src folder for original files to edit.
Dynamic components are a feature for integrating with your backend systems on page load, feeding dynamic data to a component on the page.
That component needs to be built to work with dynamic data - see
ux-iconbar for an example.
If you pass
datamodel to a component, it will have that data assigned to it. It can be an escaped JSON string, or
passed down from a parent component. Example:
is basically the same as:
ractive-foundation uses a11y with gulp for automated accessibility testing.
# Build and audit entire component list gulp a11y # Skip the build process, just audit gulp a11y-only # Single component with all its use cases gulp a11y --component=ux-button gulp a11y -c ux-button gulp a11y-only --component=ux-button # Run only a single use case gulp a11y --component ux-button --usecase ClickMe gulp a11y -c ux-button -u ClickMe gulp a11y-only --component=ux-button --usecase=ClickMe
Example usage (failure):
$ gulp a11y-only -c ux-button -u BuyNow [17:59:54] Using gulpfile ~/dev/projects/ractive-foundation/gulpfile.js [17:59:54] Starting 'a11y-connect'... [17:59:55] Finished 'a11y-connect' after 139 ms [17:59:55] Starting 'a11y-only'... [17:59:55] Server started http://localhost:8089 [17:59:56] a11y FAIL http://localhost:8089/testRunner.html#!/component/ux-button/use-case/BuyNow *** Begin accessibility audit results *** An accessibility audit found Warnings: Warning: AX_COLOR_01 (Text elements should have a reasonable contrast ratio) failed on the following element: #childComponent > .button See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_color_01 for more information. Warning: AX_FOCUS_03 (Avoid positive integer values for tabIndex) failed on the following element: #childComponent > .button See https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03 for more information. *** End accessibility audit results *** [17:59:56] 'a11y-only' errored after 1.37 s One or more a11y tests failed, see log.
You need the SDK installed for each platform you wish to target.
To create a Cordova app within your project:
gulp cordova-build --android
This will also install the Android platform if the Android SDK is installed on your machine.
The cordova project will be saved in the
To then run:
gulp cordova-run --android