Ractive components for Foundation 5
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 listgulp a11y# Skip the build process, just auditgulp a11y-only# Single component with all its use casesgulp a11y --component=ux-buttongulp a11y -c ux-buttongulp a11y-only --component=ux-button# Run only a single use casegulp a11y --component ux-button --usecase ClickMegulp a11y -c ux-button -u ClickMegulp 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[17:59:56] a11y FAIL #!/component/ux-button/use-case/BuyNow*** Begin accessibility audit results ***An accessibility audit foundWarnings:Warning: AX_COLOR_01 (Text elements should have a reasonable contrast ratio) failed on the following element:#childComponent > .buttonSee for more information.Warning: AX_FOCUS_03 (Avoid positive integer values for tabIndex) failed on the following element:#childComponent > .buttonSee 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