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.

span-6
span-6

span-4
span-4
span-4

span-3
span-3
span-3
span-3

span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
span-1
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:

  • text-left
  • text-center
  • text-right
centered
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:

  • va-top
  • va-middle
  • va-bottom

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

vertical align top
vertical align middle
vertical align bottom
lorem ipsum dolor amet

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.

Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
Flow Column
FC
FC
FC
FC
FC
FC
FC
FC
FC
FC
FC
FC

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.

magic column
magic column

magic column
magic column
magic column
magic column
magic column

magic column
magic column
magic column
magic column
magic column
magic column
magic column

MC
MC
MC
MC
MC
MC
MC
MC
MC
MC
MC
MC

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:

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





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.

Block Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et elit posuere, convallis ipsum vitae, accumsan nisl.

Block Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et elit posuere, convallis ipsum vitae, accumsan nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et elit posuere, convallis ipsum vitae, accumsan nisl.

Block Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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


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).

How much does a website cost?

The cost of a website comes down to many factors. How many pages does it have? How much functionality does it require? How complex is it? Each case is unique, and once we've had the chance to properly analyse your requirements we can then provide an estimation.

How long does a website take to make?

The time taken to build a website can vary from a couple of weeks for small and simple websites, to a few months for large and complex ones. Once we've had chance to properly analyse your requirements, we can provide you with a closer estimate.

Who is responsible for providing the content?

Most jobs will require some form of content or media, particularly for websites. We currently do not offer media production or copywriting services. Although we can source stock images, photographs and videos, all other content which is not digital design (eg; icons) should be provided by you. In general, this includes product photos, videos and text content. We can layout the sitemap and structure of your web pages to help you with providing exactly the right content.

Do you offer service x/y/z?

If you have a requirement but are unsure if we can help you, feel free to get in touch with us anyway. We will happily look at each individual case and see if there's any way we can provide a benefit. If it's to do with websites or digital design, there's a good chance we'll be able to help.

This will also work...

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:

  • alert-help
  • alert-error
  • alert-success
  • alert-info
This is a help alert bar.
This is an error alert bar.

This is a success alert bar.
This is an information alert bar.

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.

Lorem ipsum dolor sit amet consectetuer mollis sapien urna ut a. Eu nonummy condimentum fringilla tempor pretium platea vel nibh netus Maecenas. - John Doe


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

Color Variants

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

  • -brand-1
  • -brand-2
  • -brand-3

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

Size Variants

  • -small
  • -large

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

Style Variants

  • -block
  • -border
  • -disabled
  • -round
  • -oval

Block Button

Border Button Disabled Button Round Button Oval Button

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


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.

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.

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.


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.





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.





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.

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:







Radio & Checkbox Lists

Checkbox List
Radio List

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.


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.

Regular Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.

Uppercase Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.

Thin Text Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.



Heavy Text Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.

Colourful Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.

Highlighted Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.

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

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

Combining Styles

This is a Colorful, Heavy Heading

Or:


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

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.

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.

Color Variants

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

  • -brand-1
  • -brand-2
  • -brand-3
Size Variants
  • -small
  • -large
Style Variants
  • -border
  • -round
  • -circle
Combining Parameters

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


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

Image Shapes


Lists

List with no padding and margin:
  • Lorem Ipsum
  • Dolor Sit Amet
  • Billy Madison
List with no padding, margin and list-style:
  • Lorem Ipsum
  • Dolor Sit Amet
  • Billy Madison
Arrow List
  • Lorem Ipsum
  • Dolor Sit Amet
  • Billy Madison
Grid System Integration
  • Eu nonummy condimentum
  • Lorem ipsum dolor sit amet
  • Hac molestie amet justo quis
  • Hac molestie amet justo quis
  • Eu nonummy condimentum
  • Lorem ipsum dolor sit amet

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.

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


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.

Lorem Ipsum

Dolor Sit Amet

Maximus Iaculis

Lorem Ipsum

Lorem Ipsum

Dolor Sit Amet

Maximus Iaculis

Lorem Ipsum

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.


Tables

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

Optional Table Header
COLOR DESCRIPTION COUNT
blue Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida diam at nisi auctor. 12
green Vestibulum vel nisl dictum, posuere lorem vitae. Maximus iaculis mauris bibendum ligula. 108
red Phasellus pulvinar varius nisi ut tristique. Morbi sed diam tortor massa tempor. 65
Optional Table Footer
With fixed-layout:
COLOR NUMBER VEHICLE
blue 24 car
green 38 bike
red 55 train

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

  • Lorem Ipsum
  • Dolor Amet
  • Aliquam Sodales

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

  • Lorem Ipsum
  • Dolor Amet
  • Aliquam Sodales

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in.


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.

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


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

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


Footer

Key Points

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

With Multi-Level Dropdown Menu


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


Logo

Plain Text Logo

Image Logo


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.

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.

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

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.


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.

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.

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