Be sure to check out our complete documentation for more information.

One Nexus Cheatsheet

Responsive Grid System

Regular columns

A row of regular columns can contain any number of columns with different span widths so long as the total number doesn't exceed the value defined by the $columns variable. By default, this number is set to 12, so our column-spans should add up to this number.

<div class="row"> 
    <div class="span-4">regular column</div>
    <div class="span-4">regular column</div>
    <div class="span-4">regular column</div>
</div>
<br />
<div class="row"> 
    <div class="span-3">regular column</div>
    <div class="span-3">regular column</div>
    <div class="span-3">regular column</div>
    <div class="span-3">regular column</div>
</div>

Horizontal Aligning

It is possible to set the horizontal aligning of your columns by changing the text-align property of the row that contains your columns. Alternatively, you can use one of the following helper classes:

<div class="row text-center">
    <div class="span-6">
        ...
    </div>
</div>

Vertical Aligning

You can also set the vertical aligning of your columns (relative to the tallest column in the row). This is achieved by setting the vertical-align property of each column in your row. This can also be done by adding one of our helper classes to your column:

By default, the columns have their vertical align set to top.

<div class="row">
    <div class="span-3 va-top">
        ...
    </div>
    <div class="span-3 va-middle">
        ...
    </div>
    <div class="span-3 va-bottom">
        ...
    </div>
    <div class="span-3 va-middle" style="min-height: 175px;">
        ...
    </div>
</div>

Flow Columns

Flow columns work exactly like regular columns except that each row of columns doesn't need to be placed in it's own row wrapper - you can wrap all of your columns for every row inside just one main row container.

<div class="row flow-columns">
    <div class="span-6">Flow Column</div>
    <div class="span-6">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-4">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    <div class="span-3">Flow Column</div>
    ...
</div>

Magic Columns

"Magic" columns are so named as each row of magic columns can automatically detect the number of columns within its row, and set the width of each column accordingly (without using any JavaScript!). Each column in a row of magic columns will always be the same width, and will always add up to 100% width. Perfect for cases where you know each column will always be the same width, or where you need any "widow" columns to take up any remaining space.

<div class="row">
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
</div>
<br />
<div class="row">
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
</div>
<br />
<div class="row">
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
    <div class="span-m">magic column</div>
</div>

Adaptive Columns

Adaptive columns, instead of stacking vertically on-top of each other on small resolutions, transform into a carousel when the number of columns in the row exceeds the limit. They work off the Owl-Carousel plugin, and are a great way to present your information to users on mobiles, allowing them to swipe horizontally instead of vertically.

A row of adaptive columns can contain any number of columns, but only the number you specify will be visible in the carousel container by default. To create a row of adaptive columns, you need to add the following 3 classes to your row:

• adaptive-columns - this is required to style the individual columns
• span-x - this is number of columns your row should show by default; replace x with any number between 1 and 12.
• carousel - this is required for the carousel functonality

The adaptive columns do not work off the $columns variable; they are hard-coded to allow a maximum of 12 columns.

<!-- this row will turn into a carousel on mobiles/tablets -->
<div class="row adaptive-columns 4-cols carousel">
    <div class="span">adaptive column</div>
    <div class="span">adaptive column</div>
    <div class="span">adaptive column</div>
    <div class="span">adaptive column</div>
</div>
<!-- this row will turn into a carousel on desktops -->
<div class="row adaptive-columns 3-cols carousel">
    <div class="span">adaptive column</div>
    <div class="span">adaptive column</div>
    <div class="span">adaptive column</div>
    <div class="span">adaptive column</div>
</div>

Block Columns

Block columns are similar to regular columns except that they have no gutter (no margin) and they are all equal height to each other.

To create a row of block columns, simply add the block-columns class to your row which contains the target columns.

<div class="row block-columns">
    <div class="span-4">
        ...
    </div>
    <div class="span-4">
        ...
    </div>
    <div class="span-4">
        ...
    </div>
</div>

UI Elements

Accordions

The One Nexus accordions are built to be as dynamic as possible - meaning they do not require any specific markup or classes (other than the main accordion class on the parent) - they just need to be in the correct format and wrapped in a container with the accordion class. If you want a section to be open be default, you need to add the active class to the appropriate tags (see below).

<div class="accordion">
    <section>
        <h4>Accordion Title 1</h4>
        <article>
            <!-- accordion content -->
        </article>
    </section>
    <!-- open by default -->
    <section class="active">
        <h4>Accordion Title 2</h4>
        <article class="active">
            <!-- accordion content -->
        </article>
    </section>
    <section>
        <h4>Accordion Title 3</h4>
        <article>
            <!-- accordion content -->
        </article>
    </section>
    <section>
        <h4>Accordion Title 4</h4>
        <article>
            <!-- accordion content -->
        </article>
    </section>
</div>

This will also work...

<div class="accordion">
    <div>
        <div>Accordion Title 1</div>
        <div>
            <!-- accordion content -->
        </div>
    </div>
    <!-- open by default -->
    <div class="active">
        <div>Accordion Title 2</div>
        <div class="active">
            <!-- accordion content -->
        </div>
    </div>
    <div>
        <div>Accordion Title 3</div>
        <div>
            <!-- accordion content -->
        </div>
    </div>
    <div>
        <div>Accordion Title 4</div>
        <div>
            <!-- accordion content -->
        </div>
    </div>
</div>

Alert Bars

Alert bars are a great way to draw your users to important bits of information. One Nexus comes with four different styles of alert bars to use for different scenarios. To use each alert bar, simply add one of the following classes to any element:

<div class="alert-help">
    This is a <b>help</b> alert bar.
</div>

Blockquotes

One Nexus comes with a clean, default style for blockquote elements, ready for you to build upon. To create a blockquote (with optional cite tag), simply create a paragraph with p HTML tags wrapped in blockquote html tags.

<blockquote>
    <p>Lorem ipsum dolor sit amet... <cite>- John Doe</cite></p>
</blockquote>

Buttons

One Nexus makes it easy to create your own custom reusable buttons, and comes with a generous set of prepared buttons in different shapes, sizes and colors for you to use out-the-box. To create a basic button, add the button class your element (usually an a or button HTML tag). You can then chain extra paremeters onto the end of your class to add further styles.

Button

<a class="button" href="#">Button</a>

Color Variants

If you add more brand colors in the config file, they will automatically be available to use in your buttons.

Brand-1 Button Brand-2 Button Brand-3 Button

<a class="button-brand-1" href="#">Brand-1 Button</a>

Size Variants

Brand-1 Button Brand-2 Button Brand-3 Button

<a class="button-small" href="#">Small Button</a>

Style Variants

Block Button

Border Button Disabled Button Round Button Oval Button

<a class="button-round" href="#">Round Button</a>

Combining Parameters

It is possible to combine parameters in whatever combination or order you desire. If you're feeling crazy, you can do something like this:

Large Round Block Disabled Brand-3 Button

<a class="button-large-round-full-width-disabled-brand-3" href="#">
    Large Round Block Disabled Brand-3 Button
</a>

Carousels

The popular Owl-Carousel jQuery plugin is used for carousels - visit their homepage for the full documentation, only the most basic example will be covered here. To create a basic carousel, create a container of similar elements (ie same HTML tag) and add the carousel class and assign a unique ID to the container. You then need to call the plugin on your container, as shown below.

<div id="demo-carousel" class="carousel">
    <img src="http://skyux.com/stock-photos/stock6.jpg">
    <img src="http://skyux.com/stock-photos/stock16.jpg">
    <img src="http://skyux.com/stock-photos/stock2.jpg">
</div>

$(document).ready(function() {

    //-----------------------------------------------------------------
    // Demo Carousel
    //-----------------------------------------------------------------

    var demoCarousel = $("#demo-carousel");

    demoCarousel.owlCarousel({
        items: 1,
        loop: true,
        dots: true,
        nav: true,
        margin: 31,
        slideBy: 1,
        navText: [],
        responsive:{
            460 :{                
                items: 2
            },
            720 :{                
                items: 3
            },
            940 :{                
                items: 4
            }
        }
    });

}); // end document.ready  

Make sure to call the plugin inside a document.ready function as shown in the above example.

For a full list of available options for your carousel (which there's a lot of!) visit the Owl-Carousel homepage.

Fonts

The actual font-family names are declared in the project's config by default, but feel free to move them here.

Adding/Replacing Fonts

By default there are two fonts included with One Nexus. The first option is used for your project's main font (which in our case is the Lato Google Font), and then either delete/amend/add more fonts as desired.

//-----------------------------------------------------------------
// Font 1
//-----------------------------------------------------------------

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);

.font-1 {
    font-family: $font-1;
}

//-----------------------------------------------------------------

In the config file, we declare the actual typeface names as reusable variables. You can of course then add the font to any element in your CSS by adding font-family: $font-1; as shown above.

//-----------------------------------------------------------------
// Typography
//-----------------------------------------------------------------

// Fonts

$font-1                :   "Lato", sans-serif;
$font-2                :   "Raleway", sans-serif;

// Font Sizes

$base-font-size        :   1rem;

$font-size-1           :   0.9rem;
$font-size-2           :   1rem;
$font-size-3           :   1.2rem;
$font-size-4           :   1.4rem;
$font-size-5           :   1.6rem;
$font-size-6           :   2rem; 

//-----------------------------------------------------------------

Forms

One Nexus makes use of the new available HTML5 input attribute types as well as other new HTML5 features. These new elements will get ignored by older browser, and will render as plain text input fields. To create a form (or any form element), create a container with the form class.

Please note that the below examples are for visual demonstration only, and do not have any name or ID attributes.

<form class="form">
    <fieldset>
        <label>
            Username
            <input type="text" required placeholder="example: username" />
        </label>
        <br />
        <label>
            Password
            <input type="password" pattern=".{3,}" required placeholder="example: 123" />
        </label>
        <br />
        <label>
            Select Dropdown
            <select name="browser" required>
                ...
            </select>
        </label>
    </fieldset>
    <br />
    <label>
        Your Message
        <textarea rows="5" cols="50" required placeholder="enter your message..."></textarea>
    </label>
    <fieldset class="row">
        <span class="span va-middle">
            <button class="button-brand-1" type="submit">Submit</button>
        </span>
        <label class="span va-middle"> 
            <input type="checkbox" />
            Subscribe to our SPAM newsletters?
        </label>
    </fieldset>
</form>

To manually set the width of the field, you can use the span-x class, where x is any integer between 1 and 12 (or whatever value you have set for $columns in the config file). This doesn't transform the field into a column, it merely inherits the class's width.

<form class="form">
    <fieldset>
        <label>
            Username
            <input class="span-5" type="text" required placeholder="example: username" />
        </label>
        <br />
        <label>
            Password
            <input class="span-5" type="password" pattern=".{3,}" required placeholder="example: 123" />
        </label>
        ...
    </fieldset>
    <br />
    <label>
        Your Message
        <textarea class="span-8" rows="5" cols="50" required placeholder="enter your message..."></textarea>
    </label>
    ...
</form>  

Inline Form

You can easily create an inline form or fieldset group by wrapping each field in an HTML tag that has the inline-field class.

<form class="form"> 
    <fieldset>
        <div class="inline-field">
            <label>Username</label>
            <input type="text" required placeholder="example: username" />
        </div>
        <div class="inline-field">
            <label>Password</label>
            <input type="password" pattern=".{3,}" required placeholder="example: 123" />
        </div>
        <div class="inline-field">
            <button class="button-brand-1-block" type="submit">Submit</button>
        </div>
        <div class="inline-field"> 
            <input type="checkbox" />
            <label>Remember Me?</label>
        </div>
    </fieldset>
</form> 

Grid System Integration

The most reliable and efficient way to structure your form is by integrating it with our grid system. By doing so, you can create a form layout for pretty much any purpose. See the below examples for some common layouts:

<form class="form span-6">
    <fieldset class="row">
        <label class="span-3 va-middle">
            Username
        </label>
        <div class="span-9 va-middle">
            <input type="text" required placeholder="example: username">
        </div>
    </fieldset>
    <br />
    <fieldset class="row">
        <label class="span-3 va-middle">
            Password
        </label>
        <div class="span-9 va-middle">
            <input type="password" required placeholder="example: 123">
        </div>
    </fieldset>
    <br />
    <fieldset class="row">
        <label class="span-9 va-middle"> 
            <input type="checkbox">
            Remember Me
        </label>
        <span class="span-3 va-middle text-right">
            <button class="button-brand-1" type="submit">Submit</button>
        </span>
    </fieldset>
</form>

<form class="form span-8">
    <fieldset class="row">
        <label class="span-6">
            Username
            <input type="text" required placeholder="example: username">
        </label>
        <label class="span-6">
            Password
            <input type="password" required placeholder="example: 123">
        </label>
    </fieldset> 
    ... 
    <br /> 
    <fieldset>
        <label>
            Select Dropdown
            <select name="browser" required="">
                ...
            </select>
        </label> 
        <br /> 
        <label>
            Your Message
            <textarea rows="5" cols="50" required placeholder="enter your message..."></textarea>
        </label>
    </fieldset>
    <br />
    <fieldset class="row">
        <label class="span-10 va-middle"> 
            <input type="checkbox" />
            Subscribe to our SPAM newsletters?
        </label>
        <span class="span-3 va-middle text-right">
            <button class="button-brand-1" type="submit">Submit</button>
        </span>
    </fieldset>
</form>

Radio & Checkbox Lists

<form class="form">
    <fieldset>
        <legend>Checkbox List</legend>
        <br />
        <ul class="reset">
            <li>
                <label> 
                    <input type="checkbox" checked />
                    Lorem ipsum dolor sit amet
                </label>
            </li>
            <li>
                <label> 
                    <input type="checkbox" checked />
                    Vestibulum vel nisl dictum
                </label>
            </li>
            ...
        </ul>
    </fieldset>
</form>

HTML5 Elements (Experimental)

The below elements are only partially supported by modern browsers, but we have included them as they require practically no extra markup, and supporting new elements is alaways good moving forward (where appropriate) so long as a fallback is povided.

<form class="form">
    <!-- Date Picker -->
    <fieldset> 
        <label>
            Pick Date
            <input type="date" min="2015-01-01" max="2020-01-01">
        </label> 
    </fieldset>
    <!-- Range Input -->
    <fieldset>
        <label>
            Range Input
            <input type="range" min="0" value="10" max="100" step="10">
        </label>
    </fieldset> 
    <!-- Color Picker --> 
    <fieldset> 
        <div><label>Pick Color</label></div>
        <input type="color" value="#F62459">
        <input type="color" value="#22A7F0">
        <input type="color" value="#03C9A9">
    </fieldset>
</form>

Headings

To create a heading, add the heading class to any element, along with any optional additional styles. These classes only affect the heading's visual appearance, and do not affect the font-size. By default, all heading sizes will be the default browser-applied ones.

Using the available HTML elements, we have assigned different styles to differen tags, following their semantic meanings.

<h4 class="heading">Regular Heading</h4>

<h4 class="heading"><strong>Uppercase Heading</strong></h4>

<h4 class="heading"><em>Thin Text Heading</em></h4>

<h4 class="heading"><b>Heavy Text Heading<b></h4>

<h4 class="heading"><i>Colourful Heading</i></h4>

<h4 class="heading-highlight"><b>Highlighted Heading</b></h4>

Alternatively, you can also chain the available styles as classes:

<h4 class="heading-uppercase">Uppercase Heading</h4>

<h4 class="heading-light">Thin Text Heading</h4>

<h4 class="heading-heavy">Heavy Text Heading</h4>

<h4 class="heading-brand-1">Colourful Heading</h4>

Combining Styles

<h4 class="heading"><b><i>This is a Colorful, Heavy Heading</i></b></h4>

Or:

<h4 class="heading-brand-1-heavy">This is a Colorful, Heavy Heading</h4>

Icons

One Nexus comes equipped with the Font Awesome icon font set, giving you instant access to over 500 vector icons to use as you please. These icons can easily be resized, reshaped and recolored using CSS.

One Nexus references the CDN version of Font Awesome by default, but also comes with an optional self hosted version.

One Nexus uses Font Awesome 4.3.0.

This is only a tiny list of the 500+ icons available to you with font awesome.

For a full list of available icons, visit the Font Awesome website.

Single Icon Example

<i class="fa fa-desktop"></i>

Using With Buttons

One of the most common use cases of Font Awesome is for creating buttons with icons. Creating a basic button with an icon is simple with One Nexus, just add the icon markup inside your button markup, next to the button text.

<a class="button-brand-2" href="#">
    <i class="fa fa-envelope"></i> Button With Icon
</a>

Styled Icons

To create a styled icon, create a wrapper element with the icon class, and place the regular Font Awesome code within. You can then chain extra paremeters onto the end of your class to add further styles.

<a class="icon" href="#">
    <i class="fa fa-facebook"></i>
</a>

Color Variants

If you add more brand colors in the config file, they will automatically be available to use in your buttons.

<a class="icon-brand-1" href="#">
    <i class="fa fa-desktop"></i>
</a>

Size Variants

<a class="icon-small" href="#">
    <i class="fa fa-facebook"></i>
</a>

Style Variants

<a class="icon-round" href="#">
    <i class="fa fa-linkedin"></i>
</a>

Combining Parameters

It is possible to combine parameters in whatever combination or order you desire to create a whole new style:

<a class="icon-large-brand-2-circle-border" href="#">
    <i class="fa fa-facebook"></i>
</a> 

Images

By default, all images are responsive thanks to the addition of max-width: 100%; in the CSS, meaning they will never be larger than their container. One Nexus comes with a small set of classes for you to style your images with.

Thumbnails

<img src="http://skyux.com/stock-photos/stock1.jpg" class="thumbnail">

Image Shapes

<!-- Square Image -->
<div class="square">
    <img src="http://skyux.com/stock-photos/stock2.jpg">
</div>

<!-- Circle Image -->
<div class="circle">
    <img src="http://skyux.com/stock-photos/stock14.jpg">
</div>

Lists

List with no padding and margin:

<ul class="clear">
    <li>Lorem Ipsum</li>
    <li>Dolor Sit Amet</li>
    <li>Billy Madison</li>
</ul>

List with no padding, margin and list-style:

<ul class="reset">
    <li>Lorem Ipsum</li>
    <li>Dolor Sit Amet</li>
    <li>Billy Madison</li>
</ul>

Arrow List

<ul class="arrow-list">
    <li>Lorem Ipsum</li>
    <li>Dolor Sit Amet</li>
    <li>Billy Madison</li>
</ul>

Grid System Integration

<ul class="row flow-columns arrow-list">
    <li class="span-4">Eu nonummy condimentum</li>
    <li class="span-4">Lorem ipsum dolor sit amet</li>
    <li class="span-4">Hac molestie amet justo quis</li>
    <li class="span-4">Hac molestie amet justo quis</li>
    <li class="span-4">Eu nonummy condimentum</li>
    <li class="span-4">Lorem ipsum dolor sit amet</li>
</ul>

Modals

As of version 2.0, One Nexus now uses LeanModal.js, an extremely simple and lightweight modal jQuery plugin.

To create a modal popup, create your content inside an element with the modal-content class, and assign it a unique ID. To load the content in a modal popup, create an anchor tag with rel="modal" and href="#YOURID", replacing #YOURID with the ID of your custom modal content.

<div id="demo-modal" class="modal-content">
    Demo modal!
    <div class="modal-close">
        <i class="fa fa-times"></i>
    </div>
</div>

<a href="#demo-modal" rel="modal">Click Me</a>

The modal initialisation call is included in the global.js JavaScript file.

$("[rel*="modal"]").leanModal({ 
    closeButton: ".modal-close" 
});

Progress Bars

Progress bars are part of the HTML5 spec, but are only partially supported by modern browsers, so we have provided a fallback for those browsers which don't support it.

<progress max="100" value="50">
    <div class="progress-bar">
        <div class="progress" data-progress="50%"></div>
    </div>
</progress>

The progress bars use the following script found in the global.js file. The code grabs the data-progress attribute value and applies it as an inline-style to set the width, keeping your source code clean and inline-style free.

$(".progress").each(function() {
    attrProgress = $(this).attr("data-progress");
    $(this).css({ width : attrProgress }); 
});

Tables

To create a styled table, add the table class to your main table element.

<table class="table">
    <thead>
        <tr>
            <td colspan="3">Optional Table Header</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>COLOR</td>
            <td>DESCRIPTION</td>
            <td>COUNT</td>
        </tr>
        <tr>
            <td>blue</td>
            <td>Lorem ipsum dolor sit amet...</td>
            <td>12</td>
        </tr>
        ...
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3"><small>Optional Table Footer</small></td>
        </tr>
    </tfoot>
</table>

With fixed-layout:

<table class="table-fixed">
    ...
</table>

Tabs

Creating a set of tabs requires two things; a tab navigation , and the tab contents. The tab navigation is an unordered list with the nav class. Next, create a set of section tags, one for each tab item. You can than put any HTML content you desire for your tabs. To choose the default active tab, add the active class to the appropriate tags (see below). Finally, all of that needs to be wrapped up in a container with the tabs class.

<div class="tabs">
    <ul class="nav">
        <li class="active">Tab 1</li>
        <li>Tab 2</li>
        <li>Tab 3</li>
    </ul>
    <section class="active"> 
        <!-- tab content -->
    </section>
    <section> 
        <!-- tab content -->
    </section>
    <section> 
        <!-- tab content -->
    </section>
</div>

To create a set of tabs with full-width navigation items, use the tabs-full class.

<div class="tabs-full">
    ...
</div>

Tooltips

As of version 2.0, One Nexus now uses the tipsy jQuery plugin to handle tooltips. Make sure to visit the plugin's homepage for the full documentation.

<a rel="tooltip" href="#" tooltip="Demo Tooltip">Hover Me</a>

The tooltip initialisation call is included in the global.js JavaScript file.

$(function() {
    $("a[rel*="tooltip"]"").tipsy({
        fade: true, 
        gravity: "s"
    });
});

Modules

Header

The header module makes use of two other modules: _logo.scss and _navigation.scss

The header module by default consists of the logo module and the main nav module (note that these modules are not imported in the header SCSS file). The header has been designd to be as simple to build upon as possible whilst still retaining all traditional concepts of a website header.

Key Points

• The ID of app-nav is used as a jQuery selector for creating the Flyout Navigation.
• The header-wrapper class acts as a faux table, providing flexibility for the logo and navigation's positioning.
• Both the logo and app-nav elements are displayed as faux table-cells, so they can be both horizontally and vertically aligned whilst retianing full scalability.

<header class="app-header">
    <div class="container">
        <div class="header-wrapper">
            <!-- Logo -->
            <div class="logo">
                <a href="/">
                    <img src="assets/images/logo.png" alt="One Nexus" />
                </a>
            </div>
            <!-- Main-Nav -->
            <nav class="app-nav" id="app-nav">
                <ul>
                    <li><a href="#">Header Link 1</a></li>
                    <li><a href="#">Header Link 2</a></li>
                    <li><a href="#">Header Link 3</a></li>
                </ul>
            </nav>
        </div>
    </div>
</header>

For semantic purposes we recommend using the <header> HTML5 element for your header's wrapper element.

Footer

Key Points

• The footer-wrapper class acts as a faux table, providing flexibility for the copyright and navigation's positioning.
• Both the copyright and footer-nav sections are displayed as faux table-cells, so they can be both horizontally and vertically aligned whilst retianing full scalability.

<footer class="app-footer">
    <div class="container">
        <div class="footer-wrapper">
            <!-- Copyright Section -->
            <h4 class="copyright">© Your Website 2014</h4>
            <!-- Footer Navigation -->
            <nav class="footer-nav"> 
                <ul>
                    <li><a href="#">Footer Link 1</a></li>
                    <li><a href="#">Footer Link 2</a></li>
                    <li><a href="#">Footer Link 3</a></li>
                </ul>
            </nav>
        </div>
    </div>
</footer>

For semantic purposes we recommend using the <footer> HTML5 element for your footer's wrapper element.

Main Nav

This module also contains the _dropdown-nav.scss module.

The markup for the main navigation is a regular un-ordered list (which can accommodate an infinite number of sub-menus), wrapped up in an element with the app-nav class.

Basic Example

<nav class="app-nav" id="app-nav">
    <ul>
        <li><a href="#">Lorem Ipsum</a></li>
        <li><a href="#">Alpha Bravo</a></li>
        <li><a href="#">Dolor Sit Amet</a></li>
    </ul>
</nav>

With Multi-Level Dropdown Menu

<nav class="app-nav" id="main-nav">
    <ul>
        <li><a href="#">Lorem Ipsum</a></li>
        <li>
            <a href="#">Dropdown Menu</a>
            <ul>
                <li><a href="#">Alpha Alpha</a></li>
                <li><a href="#">Bravo Alpha</a></li>
                <li>
                    <a href="#">Dropdown Alpha</a>
                    <ul>
                        <li><a href="#">Alpha Bravo</a></li>
                        <li><a href="#">Bravo Bravo</a></li>
                        <li><a href="#">Charlie Bravo</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Dolor Sit Amet</a></li>
    </ul>
</nav>

For semantic purposes we recommend using the <nav> HTML5 element for your navigation's wrapper element.

Logo

Plain Text Logo

<div class="logo">
    <a href="/">One Nexus</a>
</div>

Image Logo

<div class="logo">
    <a href="/">                              
        <img src="/assets/images/logo.png" alt="One Nexus" />
    </a>
</div>

Breadcrumb

One Nexus comes with a basic breadcrumb module ready to build upon. The markup for a breadcrumb is an un-ordered list wrapped in an element with the breadcrumb class.

<nav class="breadcrumb">
    <ul>
        <li><a href="/">One Nexus</a></li>
        <li><a href="/documentation/">Documentation</a></li>
        <li><a href="/documentation/modules/">Modules</a></li>
        <li>Breadcrumb</li>
    </ul>
</nav>

For semantic purposes we recommend using the <nav> HTML5 element for your breadcrumb's wrapper element.

Flyout navigation

The flyout navigation is a clone of the app-navigation, which is located off-canvas by default. It's visibility can be toggled by creating an element with an ID of flyout-trigger (the navigation is toggled when this element is clicked). The reason this module has been included is because it is perfect for use on mobile devices, and we feel every website should have such a solution.

We have provided a default navigation trigger button for you to use - to avoid having extra CSS to create a unique icon, the provided icon is built using our framework classes. The class max-break-3 means only show the element when the resolution is at most the value defined by $breakpoint-3.

<span class="icon-lrg flyout-trigger max-break-3" id="flyout-trigger">
    <i class="fa fa-bars nav-open"></i>
    <i class="fa fa-times nav-close"></i>
</span>

The below code is neccessery so the flyout-navigation script has a place to clone the app-navigation into.

<nav class="flyout-container" id="flyout"></nav>

Finally, the site-overlay, which is hidden by default and made visible when the flyout-navigation is triggered. It is used as a physical mask to focus attention to the flayout-navigation and also acts as a clickable trigger to close the menu.

<div class="site-overlay" id="site-overlay"></div>

Scroll to Top

One Nexus comes with a "scroll-to-top" button, which works off the smooth-scroll script.

The below code can be placed anywhere; by default it is placed outside of the #site-content wrappear and appears in the bottom right of the page. The button links to the #site-content ID by default, but you can change this to any other ID.

<a class="icon-lrg-border-grey scroll-top" href="#site-content">
    <i class="fa fa-angle-up"></i>
</a> 

By default, the button appears after 350 pixels have been scrolled. Change this value in the below code to also change when the button should appear.

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 350) {
        $(".scroll-top").addClass("active");
    } else {
        $(".scroll-top").stop().removeClass("active");
    }
});

Be sure to check out our complete documentation for more information.