Rubix is a responsive, webapp, admin template powered by Facebook's ReactJS and Bootstrap. It has a huge collection of composable React UI components (most of the Bootstrap components have been ported to React). We have also included an aesthetically beautiful, hand-crafted, touch-enabled charting library called Rubix Charts created exclusively for this template.
We also make use of SASS preprocessor for CSS (includes mixins for creating your own color schemes and themes) and Webpack for managing and automating the asset pipeline. Rubix also includes the awesome rtlcss module for generating RTL stylesheets.
Localization/Internationalization is powered by Mozilla's L20n library which aims to be a developer friendly framework that places languages in the localizer's hand to create better translations.
Rubix makes no assumptions about your backend (use Python/PHP/Ruby/Node etc). However, for automating builds, Rubix uses Node.JS.
Currently we provide the following native integrations:
- Redux + GraphQL
- Relay + GraphQL
- Laravel 5.1 LTS
- Meteor v1.4
- Ruby on Rails v5.0.0
- ASP .NET
- Plain HTML version
- Upgrade to Bootstrap 4.0.0
- Flask Integration
We have provided extensive documentation and will keep the documentation updated alongwith version releases/bug fixes.
- Develop Universal Apps
- Responsive layout (desktops/mobiles/tablets)
- Boxed/Fixed/Static/Fluid views
- Bi-di support (LTR/RTL)
- Built with Bootstrap 3.x and ReactJS 15.x
- Multiple themes
- Localization/Internationalization powered by Mozilla L20n
- Demo locale examples: English - U.S, French, Italian, German, Arabic and Chinese
- Hash-based navigation powered by React Router
- Awesome custom charting library - Rubix Charts
- Panels - Create complex layouts in addition to Twitter's grid
- Timelines (Static and Interactive)
- Gallery/Social/Blog pages
- Multiple sidebars (offcanvas)
- Codemirror code editing
- Trumbowyg Editor
- Hubspot Vex Modal and Messenger
- Ion Slider and Tab
- Datatables and Tablesaw
- Nestable Lists
- Dropzone file upload
- Image cropping using jCrop
- and much more...
- Bootstrap - CSS Frontend Framework.
- Mozilla L20n - A developer-friendly framework that places language in localizer's hands.
- React Router - A complete routing solution for React.js.
- React Hot Loader - Live edit React components without unmounting or losing their state.
- React Responsive - Media queries in your React JSX files for responsive design.
- D3.JS - Data-driven Documents.
- Modernizr - Feature detection library for HTML5/CSS3.
- html5shiv - HTML5 IE enabling script.
- EventEmitter2 - EventEmitter for the Browser.
- jQuery UI - jQuery based user-interface framework.
- Timeline JS - Beautifully crafted timelines that are easy and intuitive to use.
- jQuery Knob - Nice, downward compatible, touchable, jQuery dial.
- Hubspot Vex - Dialogs for the 21st century.
- Hubspot Pace - Automatic page load progress bar.
- Hubspot Messenger - Client-side growl-like notifications with actions and auto-retry.
- Perfect Scrollbar - Tiny but perfect jQuery scrollbar plugin.
- Ion Tabs - Easy and well done tabs with many options and skin support.
- Ion rangeSlider - jQuery range slider with skin support.
- Bootstrap Slider - Slider for Bootstrap.
- Sparklines - jQuery based sparklines library.
- Select2 - Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.
- X-Editable - In-place editing with Twitter Bootstrap.
- jQuery Steps - An all-in-one wizard plugin that is extremely flexible, compact and feature-rich.
- jQuery Validate - Makes client-side validation easy.
- Tablesaw - Responsive Tables with column toggling and sorting.
- Datatables - Table plug-in for jQuery.
- Fullcalendar - Full-sized jQuery calendar plugin.
- Nestable - Drag & drop hierarchical list with mouse and touch compatibility.
- Dropzone - DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
- jCrop - Jcrop is the quick and easy way to add image cropping functionality to your web application.
- Bootstrap Datetimepicker - Date/time picker widget for Twitter Bootstrap v3.
- Blueimp Gallery - Touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
- ChartJS - Simple, clean and engaging charts for designers and developers.
- C3.JS - D3-based reusable chart library.
- gmaps.js - google maps api with less pain and more fun.
- Trumbowyg - A lightweight WYSIWYG editor.
- Morris - Good looking charts using RaphaelJS.
- PrismJS - Syntax highlighter.
- Switchery - iOS 7 style switches for your checkboxes.
Credits (Font Icons):
- GoSquared 2600 Flags Icon Set
- Feather Icons
- Outlined icons
- ikons by Piotr Kwiatkowski
- Icon pack vol 1 - Petras Nargela
Have got any features or ideas in mind? Send us a mail at Support or contact us via the Comments section.
- Upgraded React to v15.3.1, @sketchpixy/rubix to v2.9.4.
- Upgraded React-Bootstrap to v0.30.3.
- Provided option to add custom middleware (redux-seed).
- Moved l20n out of @sketchpixy/rubix. Now available in public/js/l20n.js.
- Fixed Redux fetchData bug when using nested routes.
- Fixed Laravel windows related installation bug.
- Fixed regression in Sidebar component for touch devices.
- Added documentation for Mozilla L20n.
- Fixed Rails documentation.
- Fixed Laravel documentation.
- Fixed documentation for custom integration.
- Fixed documentation for redux and relay.
- Fixed regression in redux-router.
- Fixed a Windows specific regular expression bug in tools/webpack.client.json.
- Fixed rubix-bootstrap package.json which was causing custom builds to fail.
- Added minimize prop to Panel component.
- Updated React to v15.1.0, React Router to v3.0.0-alpha.2.
- Updated most modules to the latest versions.
- Integrated GraphiQL (a interactive in-browser GraphQL IDE).
- Integrated Redux + GraphQL.
- Integrated Relay + GraphQL.
- Integrated Laravel 5.1 LTS.
- Added Meteor v1.4 integration.
- Updated Ruby on Rails integration to v5.0.0.
- Moved from Clojurescript based rubix-bootstrap. We now use react-bootstrap with our own extensions.
- Global imports have been removed in this version. Should import the necessary modules for every page.
- File structure has been simplified. Scaffolding has been removed as it introduced a lot of complexity.
- Rubix 4.0.0 now uses nested routes. So common code (like Header, Sidebar and Footer) must be wrapped in a React component that is shared across pages (see routes.js for an example).
- SidebarNav's are now searchable.
- SidebarNavItem's now accept hidden and alias props.
- Third-party plugins are not included by default. Have to manually import the plugins required.
- Rubix is now available as an NPM module for integration into existing projects
- Implemented a distributables feature.
- Simplified the asset pipeline by removing Gulp and BrowserSync in favor of NPM scripts.
- React Hot Loader updated to v3.0.0-beta2.
- Provided SASS mixins for theming and customizing UI elements.
- Added tutorials and deployment guides for Redux + GraphQL, Relay + GraphQL, Laravel, Meteor, Rails and NodeJS.
- Improved responsiveness on Android/iOS/Windows Mobile devices.
- Sidebar closes when navigating between pages on touch devices.
- Fix Sidebar flicker bug.
- Fix iOS panel bugs.
- Fixed react-router installation bug where 1.0.0-beta4 was being installed instead of 1.0.0-beta3.
- Fixed sidebar dynamic rendering bug.
- Fixed gulpfile.js that caused build to fail when scaffolding a new app.
- Added fonts to scaffold process. New apps have default fonts. Fixes React Router errors.
- Fix Rails installation documentation.
- Fix a Windows bug that failed to load the app script.
- Added Rails integration.
- React upgraded to v0.13.3.
- Fixed server-side rendering issues.
- Added Procfile for Heroku deployments.
- React-Router upgraded to v1.0.0-beta3.
- Re-write of Bootstrap core. Added basic tests.
- Moved to BabelJS for JSX compliation. ES6/7 support.
- Simplified Dropdowns, Navs and Tabs. Removed need for referencing.
- Inputs, Textarea, Checkbox, Radio API simplified. Added deprecation warnings.
- Changes in the way Route components are defined. See routes.jsx for an example.
- [BUGFIX] Fixes an issue where one of the module dependencies (jstransform) was updated to make compiling JSX stricter which caused two documentation files (gulpfilesass.jsx and gulpfilebasics.jsx) to not compile.
- [HOTFIX] Documentation folder was not included in previous version.
- Fixed a path separator bug in gulpfile.js which prevented gulp from building the app.
- React upgraded to v0.12.2 (all packages upgraded to latest versions).
- Bootstrap upgraded to v3.3.2.
- Enabled server side rendering (currently only NodeJS backend supported).
- Changes in the way Route components are defined now as we have switched to using react-router instead of rrouter. See routes.jsx for an example.
- Faster (about 3x) build times as we switched to webpack-dev-server handled by a new Gulp task (react:development).
- Integrated with React Hot Loader and BrowserSync.
- Changes to Nav, TabPane, Sidebar and SidebarControlBtn components with regards to key property being deprecated in React v0.12.2. See respective files for differences.
- Initial Release
|Bootstrap:||Compatible with 3.3.x|
|Labels:||admin, bootstrap, dashboard, graphql, laravel, meteor, rails, reactjs, redux, relay|
|Released:||4 years ago|
|Updated:||2 years ago|
Need a front-end template?
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.
Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.
- 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: