One-Nexus is open-source, built using open-source tools. All bugs, issues and feature requests are handled on Github.
With so many frameworks and libraries out there, what makes One-Nexus different?
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 - use whatever method of compiling you are comfortable with (requires Sass 3.4+).
Most plugins for One-Nexus require jQuery. The demo templates which you can build from come with it included via CDN.
One Nexus comes with 39 premade modules with thousdands of unique combinations
See the below pseudo examples to see just what's possible with One-Nexus/Synergy
@mixin palettes($custom: ()) {
$palettes: config((
'brand':(
'brand-1' : #2E3882,
'brand-2' : #06d2ff,
'brand-3' : #04CEC0
),
'alert':(
'error' : #D9434E,
'help' : #F5BA42,
'info' : #4B8CDC,
'success' : #3BB85D
),
'validation':(
'valid' : #00B16A,
'invalid' : #D91E18
)
), $custom) !global;
}
// Function to get desired color from specific palette
@function color($palette, $color) {
@return map-get(map-get($palettes, $palette), $color);
}
// Config
...
$theme : 'MyTheme';
// Vendor Files
...
// Tools
...
// Utilities
@import 'modules/utilities/palettes';
...
// Elements
...
// Objects
...
// Themes
@import 'themes/MyTheme/MyTheme';
...
@if $theme == 'MyTheme' {
// Utilities
@include palettes((
'brand':(
'brand-1': pink,
'brand-4': #ea4c88
),
'validation':(
'invalid': rgba(255, 0, 0, 1)
)
));
...
// Elements
...
// Objects
...
}
@include module('testObject') {
background-color: color('brand', 'brand-1');
border: 1px solid color('brand', 'brand-3');
@include modifier('invalid') {
background-color: color('validation', 'invalid');
}
}
/* ... */
.testObject,
[class*='testObject-'] {
background-color: pink;
border: 1px solid #04CEC0;
}
[class*='testObject-'][class*='-invalid'] {
background-color: rgba(255, 0, 0, 1);
}
/* ... */
One-Nexus comes with a bunch of premade modules just like the example shown here! View modules
@mixin buttons($custom: ()) {
// Configuration
$buttons: config((
'name' : 'button',
'color' : #FFFFFF,
'background' : #444444,
'padding' : 1em,
'colors' : map-get($palettes, 'brand'),
'sizes': (
'small' : 0.8em,
'large' : 1.25em
)
), $custom);
// Module
@include module {
display: inline-block;
color: this('color');
background: this('background');
padding: this('padding');
// 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;
}
}
}
}
// Config
...
$theme : 'MyTheme';
// Vendor Files
...
// Tools
...
// Utilities
@import 'modules/utilities/palettes';
...
// Elements
@import 'modules/elements/buttons/buttons';
...
// Objects
...
// Themes
@import 'themes/MyTheme/MyTheme';
...
@if $theme == 'MyTheme' {
// Utilities
@include palettes((
'brand':(
'brand-1': pink,
'myBrand': #2093db
),
));
...
// Elements
@include buttons((
'padding' : 0.75em 1.25em,
'sizes': (
'xlarge' : 1.5em
)
));
...
// Objects
...
}
.button,
[class*='button-'] {
display: inline-block;
color: #FFFFFF;
background: #444444;
padding: 0.75em 1.25em;
}
[class*='button-'][class*='-brand-1'] {
background-color: pink;
}
[class*='button-'][class*='-brand-2'] {
background-color: #06D2FF;
}
[class*='button-'][class*='-brand-3'] {
background-color: #04CEC0;
}
[class*='button-'][class*='-myBrand'] {
background-color: #2093DB;
}
[class*='button-'][class*='-small'] {
font-size: 0.8em;
}
[class*='button-'][class*='-large'] {
font-size: 1.25em;
}
[class*='button-'][class*='-xlarge'] {
font-size: 1.5em;
}
<button class="button">Button</button>
<button class="button-myBrand">Button</button>
<button class="button-xlarge">Button</button>
<button class="button-myBrand-small">Button</button>
<button class="button-large-brand-3">Button</button>
One-Nexus comes with a bunch of premade modules just like the example shown here! View modules
@mixin header($custom: ()) {
// Configuration
$header: config((
'name' : 'appHeader',
'sticky' : false, // this value will be used in the JS module
'offset' : 0, // this value will be used in the JS module
'bg-color': #444444
), $custom) !global;
// Module
@include module() {
position: absolute;
top: this('offset');
background: this('bg-color');
@include modifier('fixed') {
position: fixed;
top: 0;
}
}
}
$.fn.header = function(custom) {
var $module = 'appHeader';
// Configuration
var options = $.extend({
// these default values are fetched from the Sass module
// using the custom _option() function
sticky : _option($module, 'sticky'),
offset : _option($module, 'offset')
}, custom);
var header = $(this);
if (options.sticky) {
$(window).on('load scroll', function() {
var scroll = $(window).scrollTop();
if (scroll > options.offset) {
header.addClass($module + '-fixed');
} else {
header.removeClass($module + '-fixed');
}
});
}
}
// Config
...
$theme : 'MyTheme';
// Vendor Files
...
// Tools
...
// Utilities
...
// Elements
...
// Objects
@import 'modules/objects/header/header';
...
// Themes
@import 'themes/MyTheme/MyTheme';
...
@if $theme == 'MyTheme' {
// Utilities
...
// Elements
...
// Objects
@include header((
'sticky' : true, // JS module initially looks at this value
'offset' : 50px,
'bg-color': black
));
...
}
$(document).ready(function() {
// Utilities
...
// Elements
...
// Objects
$(_appHeader).header({ // _appHeader is an automatically generated global variable
// passing a value here overrides the value set in the Sass module
sticky: false
});
...
});
.appHeader,
[class*="appHeader-"] {
position: absolute;
top: 50px;
background: black;
}
[class*="appHeader-"][class*="-fixed"] {
position: fixed;
top: 0;
}
<!-- If 'sticky' is enabled, header will become fixed
when the top reaches top of the viewport: -->
<header class="appHeader">
...
</header>
<!-- Or for a permanently fixed header: -->
<header class="appHeader-fixed">
...
</header>
One-Nexus comes with a bunch of premade modules just like the example shown here! View modules
One-Nexus offers more than the average framework/boilerplate
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.
.scss file
One-Nexus lets you build websites with a beautiful mobile experience
Kayzen is built on our own custom grid system: Kayzen GS, which is based off inline-block columns.
Kayzen is touch/swipe ready for mobile touch screen devices for various UI elements such as carousels.
All jQuery plugins and CSS elements have been built with mobiles in mind, ensuring any animations run smoothly.
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.
See the below pseudo exampe to see just what's possible with One-Nexus/Kayzen-GS
<div class="portfolioItem_wrapper">
<div class="portfolioItem">
...
</div>
<div class="portfolioItem">
...
</div>
<div class="portfolioItem">
...
</div>
<div class="portfolioItem">
...
</div>
</div>
@include module('portfolioItem') {
// Create the semantic row
@include component('wrapper') {
@include row();
}
// Create the semantic columns
@include column((
'width' : (3, 12)
));
}
.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%;
}
}
One-Nexus comes with a bunch of premade modules just like the example shown here! View modules
Change the entire look and feel of your website by creating different themes
