A UI Toolkit From Out Of This World

What is One-Nexus?

One-Nexus is a front-end boilerplate and UI toolkit built using the Synergy framework, combined with a custom grid system; Kayzen-GS. Together they form a powerful framework for building responsive websites with modular and configurable components.

Get One-Nexus or Learn More

Free & Open-Source - Hosted on Github

One-Nexus is open-source, built using open-source tools. All bugs, issues and feature requests are handled on Github.

Why Choose One-Nexus?

With so many frameworks and libraries out there, what makes One-Nexus different?

Custom Grid System

One-Nexus uses Kayzen-GS, a powerful grid system custom built for One-Nexus.

Unique Modules

Built using Synergy, One-Nexus offers a unique approach for building modules.

Powerful Theming

Create multiple themes by passing different configuration data to modules.

Quick & Easy to Use

Getting started can be as simple as including a single .js and .css file on your page

One-Nexus requires only plain old HTML5, leaving you to handle templates however you want - just load the required assets.

Styles are compiled from .scss files - One-Nexus comes with a bunch of useful Sass tools and mixins (requires Sass 3.4+).

The JavaScript for One-Nexs is written using the latest ES6 syntax and is transpiled using Babel for use with browsers.

Built With Synergy

Star

Each One-Nexus component is a configurable module built using Synergy.

Creating a Module

See the below stripped examples to see just what's possible with One-Nexus/Synergy

  • Utility
  • Element
  • Object
File Structure

                                    |-- modules
                                    |   |-- utilities
                                    |   |   |-- colors
                                    |   |   |   |-- _colors.scss
                                    |   |   |   |-- colors.js
                                    |   |   |   |-- colors.json
                                    |-- themes
                                    |   |-- one-nexus
                                    |   |   |-- one-nexus.scss
                                    |   |   |-- one-nexus.js
                                    |   |   |-- one-nexus.json
                                    |-- _app.scss
                                    |-- app.js
                                
/modules/utilities/colors/colors.json

                                    {
                                        "colors": {
                                            "brand": {
                                                "brand-1": "#2E3882",
                                                "brand-2": "#06d2ff",
                                                "brand-3": "#04CEC0"
                                            },
                                            "greyscale":{
                                                "grey-1": "#F4F4F4",
                                                "grey-2": "#F5BA42",
                                                "grey-3": "#444444"
                                            },
                                            "alert":{
                                                "error": "#D9434E",
                                                "help": "#F5BA42",
                                                "info": "#4B8CDC",
                                                "success": "#3BB85D"
                                            },
                                            "validation":{
                                                "valid": "#00B16A",
                                                "invalid": "#D91E18"	
                                            }
                                        }
                                    }
                                
/modules/utilities/colors/_colors.scss

                                    // path is relative to '/themes/one-nexus/'
                                    @import '../../modules/utilities/colors/colors.json';

                                    @mixin colors($custom: custom('colors')) {
                                        $colors: config($colors, $custom) !global;
                                    }

                                    // Function to get desired color palette
                                    @function palette($palette) {
                                        @return map-get($colors, $palette);
                                    }

                                    // Function to get desired color from specific palette
                                    @function color($palette, $color) {
                                        @return map-get(palette($palette), $color);
                                    }
                                
/modules/utilities/colors/colors.js

                                    import * as app from '../../../app';
                                    import defaults from './colors.json';

                                    export function colors(custom) {
                                        app.config.colors = app.parse(defaults.colors, app.custom('colors', custom));
                                    }
                                
/_app.scss

                                    @import '../node_modules/Synergy/dist/synergy';

                                    @import 'modules/utilities/colors/colors';
                                
/app.js

                                    import * as app from './app';
                                    import Synergy from 'Synergy';

                                    import { colors } from './modules/utilities/colors/colors';

                                    export { colors };
                                
/themes/one-nexus/one-nexus.scss

                                    @import '../../app';
                                    @import './config.json';

                                    @include colors;
                                
/themes/one-nexus/one-nexus.js

                                    import * as app from '../../app';
                                    import config from './config.json';

                                    app.theme  = config.app;

                                    app.colors();
                                
/themes/one-nexus/one-nexus.json

                                {
                                    "app": {
                                        "colors": {
                                            "brand": {
                                                "brand-1": "#D32AED",
                                                "brand-4": "#1FE0BD"
                                            },
                                            "alert":{
                                                "error": "#FF0000",
                                                "neutral": "#544E68"
                                            }
                                        }
                                    }
                                
Sass

                                    @include module('testObject') {
                                        background-color: color('brand', 'brand-1');
                                        border: 1px solid color('brand', 'brand-4');

                                        @include modifier('neutral') {
                                            background-color: color('alert', 'neutral');
                                        }
                                    }
                                
JavaScript

                                    app.Synergy('testObject', function(el) {
                                        el.style.backgroundColor = app.config.colors.brand['brand-1'];
                                        el.style.border = app.config.colors.brand['brand-4'];

                                        if (el.modifier('neutral')) {
                                            el.style.backgroundColor = app.config.colors.alert.neutral;
                                        }
                                    });
                                
  • File Structure
  • Default Confguration
  • Module Sass
  • Module JavaScript
  • Import Module
  • Include Module
  • Customize
  • Usage

View Full Docs

One-Nexus comes with a bunch of premade modules just like the example shown here! View modules

File Structure

                                    |-- modules
                                    |   |-- elements
                                    |   |   |-- buttons
                                    |   |   |   |-- _buttons.scss
                                    |   |   |   |-- buttons.js
                                    |   |   |   |-- buttons.json
                                    |   |-- utilities
                                    |   |   |-- colors
                                    |-- themes
                                    |   |-- one-nexus
                                    |   |   |-- one-nexus.scss
                                    |   |   |-- one-nexus.js
                                    |   |   |-- one-nexus.json
                                    |-- _app.scss
                                    |-- app.js
                                
/modules/elements/buttons/buttons.json

                                {
                                    "buttons": {
                                        "name": "button",
                                        "color": "white",
                                        "background": ["#COLOR", "greyscale", "grey-3"],
                                        "padding": "0.65em 1em",
                                        "line-height": "1",
                                        "colors": {
                                            "brand-2": ["#COLOR", "brand", "brand-2"],
                                            "error": ["#COLOR", "alert", "error"]
                                        },
                                        "sizes": {
                                            "small": "0.85em",
                                            "large": "1.25em"
                                        },
                                        "active": {
                                            "background": ["#COLOR", "brand", "brand-1"],
                                            "color": "white"
                                        }
                                    }
                                }
                                
/modules/elements/buttons/_buttons.scss

                                    // path is relative to '/themes/one-nexus/'
                                    @import '../../modules/elements/buttons/buttons.json';

                                    @mixin buttons($custom: custom('buttons')) {

                                        // Configuration
                                        $buttons: config($buttons, $custom);

                                        @include module {
                                            display: inline-block;

                                            // Colors
                                            @each $key, $value in this('colors') {
                                                @include modifier($key) {
                                                    background-color: $value;
                                                }
                                            }

                                            // Sizes
                                            @each $key, $value in this('sizes') {
                                                @include modifier($key) {
                                                    font-size: $value;
                                                }
                                            }
                                        }

                                    }
                                
/_app.scss

                                    @import '../node_modules/Synergy/dist/synergy';

                                    // Utilities
                                    @import 'modules/utilities/colors/colors';

                                    // Elements
                                    @import 'modules/elements/buttons/buttons';
                                
/themes/one-nexus/_one-nexus.scss

                                    @import '../../app';
                                    @import './config.json';

                                    // Utilities
                                    @include colors;

                                    // Elements
                                    @include buttons;
                                
/themes/one-nexus/one-nexus.json

                                {
                                    "app": {
                                        "colors": {
                                            "brand": {
                                                "brand-1": "#D32AED",
                                                "brand-4": "#1FE0BD"
                                            },
                                            "alert":{
                                                "error": "#FF0000",
                                                "neutral": "#544E68"
                                            }
                                        },
                                        "buttons": {
                                            "colors": {
                                                "neutral": ["#COLOR", "alert", "neutral"]
                                            },
                                            "sizes": {
                                                "small": "0.8em",
                                                "xlarge": "1.5em"
                                            }
                                        }
                                    }
                                
/dist/one-nexus/one-nexus.css

                                    .button, [class*='button-'] {
                                        display: inline-block;
                                        color: white;
                                        background: #444444;
                                        padding: 0.65em 1em;
                                        line-height: 1;
                                    }
                                    [class*='button-'][class*='-brand-2'] {
                                        background-color: #06d2ff;
                                    }
                                    [class*='button-'][class*='-error'] {
                                        background-color: #FF0000;
                                    }
                                    [class*='button-'][class*='-neutral'] {
                                        background-color: #544E68;
                                    }
                                    [class*='button-'][class*='-small'] {
                                        font-size: 0.8em;
                                    }
                                    [class*='button-'][class*='-large'] {
                                        font-size: 1.25em;
                                    }
                                    [class*='button-'][class*='-xlarge'] {
                                        font-size: 1.5em;
                                    }
                                
/templates/partials/header.hbs

                                    <button class="button">Button</button>
                                    <button class="button-brand-2">Button</button>
                                    <button class="button-xlarge">Button</button>
                                    <button class="button-brand-2-small">Button</button>
                                    <button class="button-large-neutral">Button</button>
                                
  • File Structure
  • Default Confguration
  • Module Sass
  • Import Module
  • Include Module
  • Customize
  • CSS Output
  • HTML Usage

View Full Docs

One-Nexus comes with a bunch of premade modules just like the example shown here! View modules

File Structure

                                    |-- modules
                                    |   |-- elements
                                    |   |   |-- buttons
                                    |   |-- objects
                                    |   |   |-- header
                                    |   |   |   |-- _header.scss
                                    |   |   |   |-- header.js
                                    |   |   |   |-- header.json
                                    |   |-- utilities
                                    |   |   |-- colors
                                    |-- themes
                                    |   |-- one-nexus
                                    |   |   |-- one-nexus.scss
                                    |   |   |-- one-nexus.js
                                    |   |   |-- one-nexus.json
                                    |-- _app.scss
                                    |-- app.js
                                
/modules/objects/header/header.json

                                {
                                    "header": {
                                        "name": "header",
                                        "background": ["#COLOR", "brand", "brand-1"],
                                        "height": "100px",
                                        "text-color": ["#COLOR", "greyscale", "grey-1"],
                                        "link-color": "white",
                                        "logo": {
                                            "image-path": "../../images/logo.png",
                                            "height": "50px",
                                            "width": "200px",
                                            "padding": "20px 0"
                                        },
                                        "dark": {
                                            "enabled": false,
                                            "background": ["#COLOR", "greyscale", "grey-3"],
                                            "text-color": ["#COLOR", "greyscale", "grey-1"],
                                            "link-color": ["#COLOR", "brand", "brand-1"]
                                        },
                                        "sticky": {
                                            "enabled": false,
                                            "offset": 0
                                        }
                                    }
                                }
                                
/modules/objects/header/_header.scss

                                    // path is relative to '/themes/one-nexus/'
                                    @import '../../modules/objects/header/header.json';

                                    @mixin header($custom: custom('header')) {

                                        // Configuration
                                        $header: config($header, $custom);

                                        @include module {

                                            color: this('text-color');

                                            a {
                                                color: this('link-color');
                                            }

                                            @include component('logo') {
                                                background-image: url(this('logo', 'image-path'));
                                                background-size: cover;
                                                display: inline-block;
                                                vertical-align: middle;
                                            }

                                            @include modifier('fixed') {
                                                position: fixed;
                                                width: 100%;
                                                top: 0;
                                            }

                                            @include option('dark') {
                                                color: this('dark', 'text-color');

                                                a {
                                                    color: this('dark', 'link-color');
                                                }
                                            }

                                        }

                                    }
                                
/modules/objects/header/header.js

                                    import * as app from '../../../app';
                                    import defaults from './header.json';

                                    export function header(custom = {}) {

                                        custom = app.custom('header', custom);

                                        app.Synergy('header', (header, options) => {

                                            const stickyOffset = options.sticky.offset || header.offsetTop;
                                            const logo = header.component('logo')[0];

                                            if (options.sticky.enabled || header.modifier('sticky')) {
                                                window.addEventListener('load', stickyHeaderHandler);
                                                window.addEventListener('scroll', stickyHeaderHandler);
                                            }

                                            function stickyHeaderHandler() {
                                                const operator = (window.scrollY > stickyOffset) ? 'set' : 'unset';

                                                header.modifier('fixed', operator);
                                                logo.modifier('small', operator);
                                            }

                                        }, defaults, custom);

                                    }
                                
/_app.scss

                                    // Import Synergy
                                    @import '../node_modules/Synergy/dist/synergy';

                                    // Utilities
                                    @import 'modules/utilities/colors/colors';

                                    // Elements
                                    @import 'modules/elements/buttons/buttons';

                                    // Objects
                                    @import 'modules/objects/header/header';
                                
/app.js

                                    import * as app from './app';
                                    import Synergy from 'Synergy';

                                    // Utilities
                                    import { colors } from './modules/utilities/colors/colors';

                                    // Objects
                                    import { header } from './modules/objects/header/header';

                                    export { colors, header };
                                
/themes/one-nexus/one-nexus.scss

                                    @import '../../app';
                                    @import './config.json';

                                    // Utilities
                                    @include colors;

                                    // Elements
                                    @include buttons;

                                    // Objects
                                    @include header;
                                
/themes/one-nexus/one-nexus.js

                                    import * as app from '../../app';
                                    import config from './config.json';

                                    app.theme  = config.app;

                                    // Utilities
                                    app.colors();

                                    // Objects
                                    app.header();
                                
/themes/one-nexus/one-nexus.json

                                {
                                    "app": {
                                        "colors": {
                                            "brand": {
                                                "brand-1": "#D32AED",
                                                "brand-4": "#1FE0BD"
                                            },
                                            "alert":{
                                                "error": "#FF0000",
                                                "neutral": "#544E68"
                                            }
                                        },
                                        "buttons": {
                                            "colors": {
                                                "neutral": ["#COLOR", "alert", "neutral"]
                                            },
                                            "sizes": {
                                                "small": "0.8em",
                                                "xlarge": "1.5em"
                                            }
                                        },
                                        "header": {
                                            "dark": {
                                                "enabled": true,
                                                "background": ["#COLOR", "alert", "neutral"]
                                            }
                                        }
                                    }
                                
/dist/one-nexus/one-nexus.css

                                    .header, [class*='header-'] {
                                        background: #544E68;
                                        color: #F4F4F4;
                                        height: 100px;
                                    }
                                    .header a, [class*='header-'] a {
                                        color: #D32AED;
                                    }
                                    .header_logo, [class*='header_logo-'] {
                                        background-image: url('../../images/logo.png');
                                        background-size: cover;
                                        display: inline-block;
                                        vertical-align: middle;
                                        height: 50px;
                                        width: 200px;
                                        padding: 20px 0;
                                    }
                                    [class*='header-'][class*='-fixed'] {
                                        position: fixed;
                                        width: 100%;
                                        top: 0;
                                    }
                                
/templates/partials/header.hbs

                                    <!-- If `options.sticky.enabled` is `true`, header will become fixed
                                    when the top reaches top of the viewport: -->
                                    <header class="header">
                                        ...
                                    </header>

                                    <!-- Or for a permanently fixed header: -->
                                    <header class="header-fixed">
                                        ...
                                    </header>
                                
  • File Structure
  • Default Confguration
  • Module Sass
  • Module JavaScript
  • Import Module
  • Include Module
  • Customize
  • CSS Output
  • HTML usage

View Full Docs

One-Nexus comes with a bunch of premade modules just like the example shown here! View modules

More Features...

One-Nexus comes with everything you need for your next project

Modular-Scale Typography

One-Nexus comes with truly responsive typography using modular scale values. Learn More.

Optimised Performance

One-Nexus encourages best practices with a focus on better performing websites.

Dependencies Via NPM

All dependencies are handled via NPM and are included in the package.json file.

Configurable Modules

Built using Synergy, One-Nexus comes with a bunch of configurable UI modules.

Google Maps

Easily include Google maps and customize them to use your theme's colors. Learn More.

Print Stylesheet

One-Nexus comes with the HTML5 Boilerplate print stylesheet for printed media. Learn More.

Fully Responsive

One-Nexus is built using a customizable and fully responsive grid system, Kayzen-GS.

Talk Between Sass/JS

Share configuration data between your module's JavaScript and Sass. Learn More.

Touch/Swipe Support

One-Nexus is touch/swipe ready for touch screen devices for various UI elements such as carousels.

SassDoc/JSDoc

Document your modules using SassDoc and JSDoc, using the built in Grunt toools.

Sass/JS Unit-Testing

Unit-test your modules using Sass True and Mocha, using the built in Grunt toools.

Automated Build Tools

Easily build and compile the various One-Nexus assets using the provided Grunt tools.

Integrates Into Any Workflow

Built For Experts & Beginners of All Levels

One-Nexus can be used with tools you already love and are familiar with. Getting started can be as simple as importing a single .js and .css file.

  • Watch and compile a single .scss file
  • Resuable Handlebars templates included
  • Adaptable Gruntfile to build One-Nexus assets included

Mobile Optimised

One-Nexus lets you build websites with a beautiful mobile experience

Kayzen-GS

Custom grid system

One-Nexus is built using a custom grid system: Kayzen GS, which is based off inline-block columns.

Touch/Swipe Support

Optimised for touch devices

One-Nexus is touch/swipe ready for mobile touch screen devices for various UI elements such as carousels.

Smooth Performance

Optimised for mobile browsing

All JavaScript plugins and CSS elements have been built with mobiles in mind, ensuring any animations run smoothly.

Smooth Performance

Optimised for mobile browsing

All JavaScript plugins and CSS elements have been built with mobiles in mind, ensuring any animations run smoothly.


Kayzen-GS

Star

Kayzen-GS is a powerful framework for building responsive grid systems. Built using Sass and based off inline-block columns, Kayzen-GS is a one of a kind framework custom built for One-Nexus.

Creating Semantic Grids

See the below pseudo exampe to see just what's possible with One-Nexus/Kayzen-GS

/pages/portfolio/index.html

                                <div class="portfolioItem_wrapper">
                                    <div class="portfolioItem">
                                        ...
                                    </div>

                                    <div class="portfolioItem">
                                        ...
                                    </div>

                                    <div class="portfolioItem">
                                        ...
                                    </div>

                                    <div class="portfolioItem">
                                        ...
                                    </div>
                                </div>
                            
/modules/_portfolio-items.scss

                                @include module('portfolioItem') {

                                    // Create the semantic row
                                    @include component('wrapper') {
                                        @include row();
                                    }

                                    // Create the semantic columns
                                    @include column((
                                        'width' : (3, 12)
                                    ));

                                }
                            
/dist/one-nexus/app.css

                                .portfolioItem,
                                [class*='portfolioItem-'] {
                                    display: inline-block;
                                    vertical-align: top;
                                    margin-left: 3%;
                                    width: 22.75%;
                                }
                                .portfolioItem_wrapper,
                                [class*='portfolioItem_wrapper-'] {
                                    letter-spacing: -1em;
                                    display: table;
                                    width: 100%;
                                }
                                .opera-only :-o-prefocus,
                                .portfolioItem_wrapper,
                                [class*='portfolioItem_wrapper-'] {
                                    word-spacing: -0.43em;
                                }
                                .portfolioItem:first-child,
                                [class*='portfolioItem-']:first-child {
                                    margin-left: 0;
                                }
                                @media (max-width: 940px) {
                                    .portfolioItem,
                                    [class*='portfolioItem-'] {
                                        display: block;
                                        left: auto;
                                        margin-left: 0;
                                        width: 100%;
                                    }
                                }
                            
  • HTML Sample
  • Sass Sample
  • CSS Output

View Full Docs

One-Nexus comes with a bunch of premade modules just like the example shown here! View modules

The Power of Themes

Change the entire look and feel of your website by creating different themes

One Goal, One Solution: One-Nexus.

Start your next project with One-Nexus to unlock a new way of building

Share The Love

Follow Edmund Reed on Social Media to keep up-to-date with One-Nexus