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:
- Open http://localhost:9080/ in your browser
Creating a new component
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
Everything in public folder is temporary!
Important note: Any file in public folder is copied there as part of the gulp build process.
src folder for original files to edit.
Static and Dynamic components
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.
Run on Device
You need the SDK installed for each platform you wish to target.
Building the App
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
Run the App
To then run:
gulp cordova-run --android