One-Nexus

The documentation pages are still being written, please bear with us.

Quick Look

Button

<button class="button">Button</button>
<div class="button-brand-2">Button</div>
<a href="#" class="button-round-brand-3">Button</a>
<span class="button-round-brand-3-border">Button</span>
<input type="submit" class="button-round-success" value="Button" />
<a href="#" class="button-oval-dribbble"><i class="fa fa-dribbble"></i> Button</a>

Sass

Load the button styles by including the buttons() mixin:

@include buttons();

The following options can be passed to the mixin to customize the buttons:

Option	Description	Default
`name`	The name used when generating the CSS selector	`'button'`
`color`	The default text-color for buttons	`color('greyscale', 'white')`
`background`	The default background for buttons	`color('greyscale', 'grey-4')`
`transition`	The transition speed primarily used for the hover effect	`core('transition')`
`h-padding`	Thepadding for the left and right of buttons	`1em`
`v-padding`	Thepadding for the tpp and bottom of buttons	`0.65em`
`line-height`	The line height for buttons	`1`
`font-weight`	The default font weight for buttons	`normal`
`font-family`	The default font family for buttons	`typography('typefaces', 'primary')`
`border-width`	The border width for buttons with the `border` modifier	`1px`
`border-style`	The border style for buttons with the `border` modifier	`solid`
`active-background`	The background for buttons with the `active` modifier	`color('brand', 'brand-1')`
`active-color`	The text color for buttons with the `active` modifier	`color('greyscale', 'white')`
`disabled-opacity`	The opacity for disabled buttons	`0.6`
`round-radius`	The radius for buttons with the `round` modifier	`0.4em`
`group-spacing`	The spacing between buttons within a group component	`0.5em`
`group-stack`	The width at which buttons in a group component should stack ontop of one another	`'break-1'`
`sizes`	Map containing list of font-sizes to create a modifier for	`typography-config('sizes')`
`palettes`	A list of color palettes to create modifiers for	`('brand', 'greyscale', 'alert', 'social')`
`sizes`	Options to pass to the `font-sizes()` mixin to determine button font-sizes	`('break-3': 0.85)`

The above options can be passed to the mixin like so:

@include buttons((
    'background': blue,
    'group-spacing': 10px,
    'sizes':(
        'small': 8px,
        'large': 20px
    )
));

Color Palettes

This option accepts a list of palettes defined in the Color Palette module.

@include buttons((
    'palettes': ('brand', 'greyscale', 'alert', 'social')
));

This will create a modifier for each color in each palette, with the color's key as the modifier name.

If you only want to create modifiers for specific colors in a certain palette, you can pass the keys like so:

@include buttons((
    'palettes': (
        'brand', // entire 'brand' palette
        ('greyscale': ('grey-1', 'grey-3', 'grey-4')), // only specific colors from 'greyscale' palette
        'alert', 
        ('social': ('facebook', 'twitter')
    )
));

You can also pass new colors as a regular map:

@include buttons((
    'palettes': (
        'brand', 'greyscale', 'alert', 'social', 
        ('foo': blue, 'bar': #FF5733)
    )
));

Using your new values like so:

<button class="button-foo">Button</button>
<button class="button-foo-round">Button</button>
<button class="button-bar">Button</button>
<button class="button-bar-border">Button</button>

Examples

Sizes

size-1
size-2
size-3
size-4
size-5
size-6
size-7
size-8
size-9

<button class="button-size-7">Size 7 Button</button>

Colors

Brand

brand-1
brand-2
brand-3

<button class="button-brand-3">Brand 3 Button</button>

Greyscale

white
grey-1
grey-2
grey-3
grey-4
grey-5
grey-6
black

<button class="button-grey-3">Grey 3 Button</button>

Alert

error
success
help
info

<button class="button-success">Success Button</button>

Social

facebook
twitter
linkedin
github
skype
pinterest
instagram
rss
youtube
flickr
vimeo
dribbble
behance
deviantart
reddit
google-plus
email
stumbleupon

<button class="button-dribbble">Dribbble Button</button>

Modifiers

block
border
disabled
round
circle/oval
sharp
icon
active

<button class="button-block">Button</button>

<button class="button-border">Button</button>

<button class="button-disabled">Button</button>

<button class="button-round">Button</button>

<button class="button-oval">Button</button>

<button class="button-sharp">Button</button><!-- ensure button corners are never rounded -->

<button class="button"><i class="fa fa-download"></i> Button</button>

<button class="button-icon"><i class="fa fa-download"></i></button>

<button class="button-active">Button</button>

Modifiers can be combined:

<button class="button-icon-oval-rss-size-6"><i class="fa fa-rss"></i></button>
<button class="button-icon-oval-border-youtube"><i class="fa fa-youtube"></i></button>
<button class="button-border-disabled-active">Button</button>

Tip: Combine commonly reused modifiers

If you are commonly reusing the same combination of modifiers multiple times, you can combine them into a new modifier:

@include buttons((
    'combine':(
        'primary' : ('round', 'size-4', 'brand-1'),
        'social'  : ('icon', 'oval', 'size-6')
    )
));

<button class="button-primary">Primary Action</button>
<button class="button-social-rss"><i class="fa fa-rss"></i></button>

Which is the equivilent of:

<button class="button-round-size-4-brand-1">Primary Action</button>
<button class="button-icon-oval-size-6-rss"><i class="fa fa-rss"></i></button>

Components

Button Group

<div class="button_group">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

Button Group - Pills

<div class="button_group-pills">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

Button Group - Round Pills

<div class="button_group-pills-round">
    <button class="button">Button</button>
    <button class="button">Button</button>
    <button class="button">Button</button>
</div>

Buttons