Outdated plugins:
$ npm-check-updates

"babel" can be updated from ^5.6.4 to ^5.8.23 (Installed: 5.8.23, Latest: 5.8.23)
"babel-core" can be updated from ^5.5.8 to ^5.8.23 (Installed: 5.8.23, Latest: 5.8.23)
"babel-loader" can be updated from ^5.1.4 to ^5.3.2 (Installed: 5.3.2, Latest: 5.3.2)
"browser-sync" can be updated from ^2.7.10 to ^2.8.2 (Installed: 2.8.2, Latest: 2.8.2)
"classnames" can be updated from ^2.1.2 to ^2.1.3 (Installed: 2.1.3, Latest: 2.1.3)
"compression" can be updated from ^1.5.0 to ^1.5.2 (Installed: 1.5.2, Latest: 1.5.2)
"del" can be updated from ^1.2.0 to ^2.0.0 (Installed: 1.2.1, Latest: 2.0.0)
"express" can be updated from ^4.12.4 to ^4.13.3 (Installed: 4.13.3, Latest: 4.13.3)
"gulp-insert" can be updated from ^0.4.0 to ^0.5.0 (Installed: 0.4.0, Latest: 0.5.0)
"gulp-minify-css" can be updated from ^1.1.6 to ^1.2.1 (Installed: 1.2.1, Latest: 1.2.1)
"gulp-replace" can be updated from ^0.5.3 to ^0.5.4 (Installed: 0.5.4, Latest: 0.5.4)
"gulp-sass" can be updated from ^2.0.1 to ^2.0.4 (Installed: 2.0.4, Latest: 2.0.4)
"gulp-ttf2woff" can be updated from ^1.0.2 to ^1.1.0 (Installed: 1.1.0, Latest: 1.1.0)
"gulp-uglify" can be updated from ^1.2.0 to ^1.4.0 (Installed: 1.4.0, Latest: 1.4.0)
"gulp-util" can be updated from ^3.0.5 to ^3.0.6 (Installed: 3.0.6, Latest: 3.0.6)
"jsdom" can be updated from ^3.1.2 to ^6.3.0 (Installed: 3.1.2, Latest: 6.3.0)
"map-stream" can be updated from 0.0.5 to 0.0.6 (Installed: 0.0.5, Latest: 0.0.6)
"mocha" can be updated from ^2.2.5 to ^2.3.0 (Installed: 2.3.0, Latest: 2.3.0)
"react-hot-loader" can be updated from ^1.2.7 to ^1.3.0 (Installed: 1.3.0, Latest: 1.3.0)
"react-router" can be updated from 1.0.0-beta3 to 0.13.3 (Installed: 1.0.0-beta3, Latest: 0.13.3)
"run-sequence" can be updated from ^1.1.0 to ^1.1.2 (Installed: 1.1.2, Latest: 1.1.2)
"webpack" can be updated from ^1.9.11 to ^1.12.0 (Installed: 1.12.0, Latest: 1.12.0)
"webpack-dev-server" can be updated from ^1.9.0 to ^1.10.1 (Installed: 1.10.1, Latest: 1.10.1)
"webpack-stream" can be updated from ^2.0.0 to ^2.1.0 (Installed: 2.1.0, Latest: 2.1.0)
"yargs" can be updated from ^3.10.0 to ^3.23.0 (Installed: 3.23.0, Latest: 3.23.0)
Specify version of your node.js/io.js
Doesn't build dependencies with io.js 3.2
builds fine with iojs v.2.5.0
Update to 1.0.0-beta4 and
install histrory package

We wont update to react-router 1.0.0-beta4 until the documentation for beta4 is out. The latest documentation available is : https://rackt.github.io/react-router/tags/v1.0.0-beta3.html

Width dropdown is not the same size as the header
This theme is UNusable with React chrome dev tools


hard for debugging
BUG: Click back on Dropdown doesn't collapse the dropdown
Replied to your queries in the mail.
When I try to refresh certain page. I get this error Cannot GET /pageName and after that I get blank page. Where can the problem be?
Replied to your mail.
Has anyone met this problem?
ESC[1mESC[31mERROR in ./src/global/router.jsx
Module not found: Error: Cannot resolve module 'react-router/lib/Location' in /Users/chenhui/Documents/development/rubix/rails/demo/src/global
@ ./src/global/router.jsx 9:30-66ESC[39mESC[22m

ESC[1mESC[31mERROR in ./src/jsx/app/routes.jsx
Module not found: Error: Cannot resolve module 'react-router/lib/BrowserHistory' in /Users/chenhui/Documents/development/rubix/rails/demo/src/jsx/app
@ ./src/jsx/app/routes.jsx 13:36-78ESC[39mESC[22m

ESC[1mESC[31mERROR in ./src/jsx/app/routes.jsx
Module not found: Error: Cannot resolve module 'react-router/lib/HashHistory' in /Users/chenhui/Documents/development/rubix/rails/demo/src/jsx/app
@ ./src/jsx/app/routes.jsx 17:33-72ESC[39mESC[22m
webpack: bundle is now VALID.
We already fixed this in the latest version. This is happening because the react-router team moved history/location source to a separate repository in 1.0.0-beta4. However, you can fix it yourself by just uninstalling react-router and re-installing [email protected] like so:

$ npm uninstall react-router
$ npm install [email protected]

We'll default to beta4 once the react-router team releases documentation for it.
mattheyj PURCHASED

that does not work, even updating to [email protected]
No please install only [email protected] Any other version of react-router won't work. I'm positive you have a different react-router version installed.

how do we run the run the demo in "production" mode.

Thx a lot
You can directly launch the app like so:

$ NODE_ENV=production RTL=true PORT=80 APP=<app-name> node server.js

However, if you want to run Rubix as a service, you can follow these steps:

1. Once you are done with development, run:

$ gulp --rtl --name <app-name> --production

The above command generates assets for your production environment.

2. Push to your server.

3. Install pm2 like so (use sudo if you are not root):

$ npm install -g pm2

4. Add a processes.json file in the home directory of your instance like so:

$ cd ~
$ touch processes.json
$ nano processes.json

Paste the following into your processes.json file (substitute the <path> to your Rubix root, <app-name> to the name of your app):

"apps" : [{
"name" : "rubix",
"script" : "/<path>/server.js",
"cwd" : "/<path>/",
"exec_mode" : "fork_mode",
"env": {
"NODE_ENV": "production",
"RTL": true,
"PORT": 80,
"APP": "<app-name>"

5. Now launch your service like so:

$ pm2 start ~/processes.json
OK. It works ! Thx a lot !!
Hi admin,
do you have a rubix only client side version
When we start using the Modals, there is this error on the console:
Uncaught TypeError: Cannot read property 'firstChild' of undefined

This answer http://stackoverflow.com/questions/27153166/typeerror-when-using-react-cannot-read-property-firstchild-of-undefined says it is because two versions of React are used alongside. I did a global search on the files, but I cant find where do you also require React.

Thank you

Recently purchased the theme, but I cannot figure out how to integrate with the rails server/database.

Working on a tight deadline so any help would be appreciated.

Replied to your email.
Hi - can you please share this info? - it looks like we need the same directions... thanks
ERROR in ./src/jsx/demo/routes/app/dataObject.json
Module parse failed: C:\Users\George\Desktop\rubix\src\jsx\demo\routes\app\dataObject.json Line 3: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "timeline":
| {
| "headline":"Revolutionary User Interfaces",
@ ./src/jsx/demo/routes/app/interactive-timeline.jsx 7:17-45

how can I fix this problem, please help me, (OS windows 10)
Are you using the latest Rubix version? It seems to be a bug which we fixed in an older version. Let me know if you are still facing this issue in the latest version.
<script type='text/javascript' src='{appscript}'></script>

{appscript} =/js/demo/demo.js

when I paste "/js/demo/demo.js" in index.html file demo version not runs, on rubix version 2.3 it`s works
how can I correct this error
Is it allowed to provide us the git repository access rather than downloading the zip package every time?
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:114:14)
gyp ERR! stack at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:69:11
gyp ERR! stack at FSReqWrap.oncomplete (evalmachine.<anonymous>:95:15)
gyp ERR! System Windows_NT 6.3.9600
gyp ERR! command "node" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd E:\dendi\xampp\htdocs\rubix-3.0\node_modules\browser-sync\node_modules\socket.io\node_modules\socket.io-client\node_modules\engine.io-client\node_modules\ws\node_modules\bufferutil
gyp ERR! node -v v0.12.7
gyp ERR! node-gyp -v v2.0.1
gyp ERR! not ok
npm WARN optional dep failed, continuing [email protected]
npm WARN deprecated [email protected]: use [email protected]+, it does all the things
npm WARN optional dep failed, continuing [email protected]

I have this error on rubix 3.0
can you help my
From the error it seems like you don't have Python installed. The installation documentation mentions this: "Windows users need to ensure they have Python 2.7.3 installed along with Microsoft Visual Studio C++ 2010/2012/2013 for building some node modules that have C/C++ bindings."

See the documentation for more info: http://rubix303.sketchpixy.com/app/docs/installation
mattheyj PURCHASED
[09:56:15] module.js:338
throw err;
Error: Cannot find module 'react-router/lib/Location'
at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:286:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/mattheyj/dev/fuisz/rjs/rubix3/default/rubix-3.0/server.js:16:16)
at Module._compile (module.js:430:26)
at Object.Module._extensions..js (module.js:448:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:471:10)
gundamex PURCHASED
Can i disable the panel--controls (refresh button, minus buttonm, and the close button when hover the panel)?
Or can i controller the minus and closed status fo the panel?
You can. Just add a "plain" prop to PanelContainer.
gundamex PURCHASED
I try this in the login.jsx of demo.The color of page become strange. I think [<PanelContainer noControls>] in the login.jsx can do this . But it is no use.
The color of page becomes strange because the background is not set for "plain" PanelContainer's. You can set the background of the PanelContainer to white in your CSS or using inline styles.
How do we deploy this to a non-node environment? Building with gulp --production does not generate an index.html file and does not appear to copy any of the react files to the public folder. Am I missing something in the documentation that helps with this?
You need to follow these steps:

1. gulp --rtl --name <app-name> --production
2. Use an index.html file similar to this: https://gist.github.com/shripadk/798b87a90fb3836c5ac3 and place it inside the public folder

Then copy the contents of public folder to the root of your web server. Your static file server's root directory should then look something like this:

Static File Server Root
├── index.html
├── bower_components
├── css
├── favicon.ico
├── favicons
├── fonts
├── imgs
├── js
├── locales
└── video
On mobile, scrolling on the landing page doesn't work.

I'm only able to scroll a few pixels on Android using chrome 45.0.2454.84.
When I emulate an iPhone4 using chrome 45.0.2454.93 (64-bit) on my mac, I can't scroll at all.

This is a deal breaker.
grbspltt PURCHASED
I have no issues scrolling on mobile. I did notice that if your finger first touches one of the chart controls on your swipe up, it will not scroll. Touch the background, works just fine. If that's a deal breaker then do not use the chart in your app.
Hi, I'm not talking about for the graphs. I'm talking about the Landing page itself. i.e. The page you're immediately met with when you go here:

bwessels PURCHASED

Great work guys.

I only have one important question: How do I debug?

It seems that the build process creates only one huge concatenated file without source maps even in development mode.

But that makes it almost impossible to debug my code.

Is there a way to tell the build process to output individual files with source maps in development mode?

Thank you
Replace your gulpfile.js with this: https://gist.github.com/shripadk/3f91bc030a6a1ef9e2c3

Currently, source-maps only works with webpack-dev-server. To load the source map just add a script tag in your index.html pointing to: localhost:8079/scripts/bundle.js.map

We'll include this option in the main release when source-maps is enabled for webpack-stream which Rubix uses to build JSX files (see this issue for more details: https://github.com/shama/webpack-stream/issues/40)
gundamex PURCHASED
<NavItem className='logout' href='javascript:void(0)' onClick={() => {alert('onClock');}}>
<Icon bundle='fontello' glyph='off-1' />
When click this NavItem,
"onClock" was showed twice.
How can i make it show only once?
Use onItemSelect for Nav component instead of adding an onClick for individual NavItems. onItemSelect is passed props of each NavItem. You can then distinguish the NavItem by checking the props for a unique ID.

var onItemSelect = (props) => {
if(props.className === 'logout') {

<Nav onItemSelect={onItemSelect}>
<NavItem className='logout' href='javascript:void(0)'>
<Icon bundle='fontello' glyph='off-1' />
darkgaro PURCHASED
Is there an easy way to know which library belongs to which component so that I know which libraries to disable from being loaded ?
For example I will not need to use every component that comes with rubix so I don't want those components that I don't end up using to be slowing down the app.

Maybe if there is a list of minimum core components and js libraries that always need to be included ?
webacad1 PURCHASED
Hopefully a simple question: I'm trying to persist data over multiple screens in an SPA. Things like login information (user name, id, etc) and user choices (which account they're in, etc.) Much of the info online talks about setting state in the "top level component". In Rubix, where is that top-level component? I've set up multiple routes and the navigation is working, but I want a value that is set in one screen to be accessible by all the others.

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $24
  • HTML Template
Bootstrap: Compatible with 3.3.x
  • Responsive
  • Fluid
  • Fixed-width
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Labels: admin, bootstrap, dashboard, graphql, laravel, meteor, rails, reactjs, redux, relay
Released:4 years ago
Updated:2 years ago
Sold exclusively on WrapBootstrap


Signed up 4 years ago

Need a front-end template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation