Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    Build Status Code Quality bitHound Score Dependencies Status Join the chat at


    Ractive.js components for Foundation v5 markup and styles.

    Building Ractive.js components based on Foundation markup and styles.

    Current repository is a work in progress. When it's finished, you'll be able to build websites using this instead of Foundation v5 JavaScript.

    End goal is to build up a library of reusable components for Foundation v5.


    • nodejs
    • sudo npm install -g gulp

    Getting Started

    Install the package via npm, all dependencies will be in the dist folder.

    $ npm install ractive-foundation --save

    Or download and add the dependencies. (again all dependencies will be in the dist folder)

    <script src='ractive.js'></script>
    <script src='hammer.min.js'></script>
    <script src='lodash-compat.js'></script>
    <script src='ractive-touch.js'></script>
    <script src='ractive-events-tap.umd.js'></script>
    <script src='ractivef.js'></script>

    Example use of components:

        <ux-col class="large-12 medium-12 small-12">
            <ux-header level="1">Hello World</ux-header>

    Get Involved

    Clone the repo, then from the root folder:

    1. npm start
    2. Open http://localhost:9080/ in your browser

    Creating a new component

    Use gulp wing --name ux-blah to create a new ux-blah folder (and files) in src/components.

    $ 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

    Use 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.

    See 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:

    <ux-iconbar datamodel="{&quot;class&quot;:&quot;label-right&quot;,&quot;items&quot;:[{&quot;href&quot;:&quot;/&quot;,&quot;src&quot;:&quot;images/fi-home.svg&quot;,&quot;label&quot;:&quot;Home&quot;},{&quot;href&quot;:&quot;/path/to/blah&quot;,&quot;src&quot;:&quot;images/fi-bookmark.svg&quot;,&quot;label&quot;:&quot;Bookmark&quot;},{&quot;src&quot;:&quot;images/fi-info.svg&quot;,&quot;label&quot;:&quot;Info&quot;,&quot;class&quot;:&quot;disabled&quot;},{&quot;src&quot;:&quot;images/fi-mail.svg&quot;,&quot;label&quot;:&quot;Mail&quot;},{&quot;src&quot;:&quot;images/fi-like.svg&quot;,&quot;label&quot;:&quot;Like&quot;}]}"></ux-iconbar>

    is basically the same as:

    <ux-iconbar class="label-right">
        <ux-iconbaritem src="images/fi-home.svg">Home</ux-iconbaritem>
        <ux-iconbaritem src="images/fi-bookmark.svg">Bookmark</ux-iconbaritem>
        <ux-iconbaritem src="images/fi-info.svg" class="disabled">Info</ux-iconbaritem>
        <ux-iconbaritem src="images/fi-mail.svg">Mail</ux-iconbaritem>
        <ux-iconbaritem src="images/fi-like.svg">Like</ux-iconbaritem>

    Accessibility (a11y)

    ractive-foundation uses a11y with gulp for automated accessibility testing.

    Example uses:

    # 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
    Warning: AX_COLOR_01 (Text elements should have a reasonable contrast ratio) failed on the following element:
    #childComponent > .button
    See for more information.
    Warning: AX_FOCUS_03 (Avoid positive integer values for tabIndex) failed on the following element:
    #childComponent > .button
    See 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 /.cordova directory.

    Run the App

    To then run:

    gulp cordova-run --android




    npm i ractive-foundation

    Downloadslast 7 days







    last publish


    • avatar