Rubix Documentation

Basics

Once you have everything setup (if you haven't go back to the Installation page and finish the installation) you'll notice a file structure similar to this:

.
├── CHANGELOG.md
├── globals.js
├── gulpfile.js
├── launch.js
├── node_modules
├── package.json
├── plugins.js
├── prebuild
├── public
│   ├── css
│   │   ├── app
│   │   ├── demo
│   │   ├── fonts
│   │   └── vendor
│   ├── favicons
│   ├── fonts
│   │   ├── Lato-others
│   │   ├── dropbox
│   │   │   ├── app
│   │   │   └── demo
│   │   └── glyphicon
│   ├── imgs
│   ├── js
│   │   ├── app
│   │   ├── common
│   │   ├── demo
│   │   ├── minified
│   │   ├── polyfills
│   │   └── vendor
│   └── locales
│       ├── app
│       └── demo
├── scaffold.js
├── server.jsx
└── src
    ├── global
    │   ├── requires
    │   ├── sass
    │   └── vendor
    ├── jsx
    │   ├── app
    │   └── demo
    └── sass
        ├── app
        └── demo
The src directory is where your source files are located and it contains three folders:
  • global: This directory contains files shared by all projects. Do not alter these files unless you know what you are doing.
  • jsx: This directory contains project sources (JSX files). By default there are two projects that ship with your purchase:
    • app: this is a blank starter project
    • demo: this is the demo project which can be used for reference
  • sass: This directory contains project sources (SASS files) and has two folders:
    • app: this is a blank starter project
    • demo: this is the demo project which can be used for reference

Rubix Documentation: main.jsx

This file is the starting point of your app. Look for it in the src/jsx/app folder.

The first few lines of the file contain a snippet of code that initializes Mozilla L20n. The first parameter passed to the locale is your project name (in this case it is simply 'app'). All your locales are stored in public/locales/app (For reference see the locales stored in public/locales/demo). You can pass your locales to the locales option and also set the default locale.

l20n.initializeLocales('app', {
  'locales': ['en-US'],
  'default': 'en-US'
}});

Store all your routes in src/jsx/app/routes folder and require them in routes.jsx. An example route pointing to a blank page is show in the routes.jsx file:

/* APP PAGES */
var blank = require('./routes/app/blank.jsx');

Now, we define routes to the blank page. You can also nest routes. Refer to the demo's main.jsx for a complex route nesting example. You can see from this snippet that we have referenced the variable to the blank page we required earlier.

/* ROUTES */
module.exports = (
  <Route handler={ReactRouter.RouteHandler}>
    <DefaultRoute handler={blank} />
    <Route path='/' handler={blank} />
    <NotFoundRoute handler={notfound} />
  </Route>
);

Now we initialize our Router. If the browser supports HTML5 history then we use History based routing else we fallback to Hash based routing to support IE9. The key points to note here is that before every page is rendered we perform a cleanup by removing any attached listeners while using Rubix charts. Pace preloader is restarted (this is optional and can be removed). If you're going to use Google Analytics to track your pages then we have also included a snippet that helps you do the same (this snippet is necessary as Google Analytics does not support pageview reporting on hash-based page navigation by default).

Mozilla L20n is activated only once the entire page is rendered. If you inspect the index.html file within your src/jsx/app folder you'll notice that we have added a fade-out class to the body element to add a nice fade effect on page load. This can also be removed.

The page itself is rendered within the div#app-container element.

var InitializeRouter = function(View) {
  // cleanup
  if(window.Rubix) window.Rubix.Cleanup();
  Pace.restart();
  if(window.hasOwnProperty('ga') && typeof window.ga === 'function') {
    window.ga('send', 'pageview', {
     'page': window.location.pathname + window.location.search  + window.location.hash
    });
  }

  React.render(<View />, document.getElementById('app-container'), function() {
    // l20n initialized only after everything is rendered/updated

    l20n.ready();
    setTimeout(function() {
      $('body').removeClass('fade-out');
    }, 500);
  });
};

if(Modernizr.history)
  ReactRouter.run(routes, ReactRouter.HistoryLocation, InitializeRouter);
else
  ReactRouter.run(routes, InitializeRouter);

Rubix Documentation: blank.jsx

This is an example file and should serve as a starting point for creating various routes in your app. When you open the file you'll immediately notice that there are 3 files required:

var Header = require('../../common/header.jsx');
var Sidebar = require('../../common/sidebar.jsx');
var Footer = require('../../common/footer.jsx');

The above 3 files (header.jsx, sidebar.jsx and footer.jsx) are stored in a common folder for the app. All of the above files are optional and are only required if you want a full blown dashboard layout. For instance, when designing a homepage you wouldn't need any of the above files.

Then we have a Body component which contains a Container#body component. All your main application code should be written within this component.

var Body = React.createClass({
  render: function() {
    return (
      <Container id='body'>
        {this.props.children}
      </Container>
    );
  }
});

Finally we have a Page component which renders the entire page. It contains a Container#container component which has Sidebar, Header, Body and Footer components.

It is important to note that we also include a SidebarMixin which takes care of all the boilerplate code required to show/hide the sidebar on smaller viewport. The variable 'classes' stores the state of the Sidebar and is used for toggling the Sidebar.

var Page = React.createClass({
  mixins: [SidebarMixin],
  render: function() {
    var classes = React.addons.classSet({
      'container-open': this.state.open
    });
    return (
      <Container id='container' className={classes}>
        <Sidebar />
        <Header />
        <Body />
        <Footer />
      </Container>
    );
  }
});

Rubix Documentation: sidebar.jsx

sidebar.jsx file contains the Sidebar section of the page. The sidebar section consits of a div#avatar container, SidebarControls component and the div#sidebar-container.

The SidebarControls component is optional (if you're going to have only 1 sidebar) and can be removed. If you are going to be removing it, you need to also make a small change in src/global/sass/rubix/overrides/_variables.scss by making sure the variable $sidebar-controls-visibility is set to hidden. If you don't want a global setting that affects all your projects you can add it to the top of your src/sass/app/main.scss file which restricts the setting to the specific project.

The sidebar props passed to each SidebarControlBtn controls the relevant Sidebar component.

var SidebarSection = React.createClass({
  render: function() {
    return (
      <div id='sidebar' {...props}>
        <div id='avatar'>
          ...
        </div>
        <SidebarControls>
          <SidebarControlBtn bundle='fontello' glyph='docs' sidebar={0} />
        </SidebarControls>
        <div id='sidebar-container'>
          <Sidebar sidebar={0} active>
            <ApplicationSidebar />
          </Sidebar>
        </div>
      </div>
    );
  }
});

Here is an example of a Sidebar navigation component defined in ApplicationSidebar component. You can nest multiple SidebarNav's to have multiple menu levels.

<SidebarNav>
  <SidebarNavItem glyph='icon-fontello-gauge' name='Blank' href='/' />
  <SidebarNavItem glyph='icon-feather-mail' name={<span>Menu <BLabel className='bg-darkgreen45 fg-white'>3</BLabel></span>}>
    <SidebarNav>
      <SidebarNavItem glyph='icon-feather-inbox' name='Inbox' href='#' />
      <SidebarNavItem glyph='icon-outlined-mail-open' name='Mail' href='#' />
      <SidebarNavItem glyph='icon-dripicons-message' name='Compose' href='#' />
    </SidebarNav>
  </SidebarNavItem>
</SidebarNav>