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