blockquotes

mixins

vf-blockquotes

Since 0.0.3 
@mixin vf-blockquotes() { ... }

Description

Default blockquote styling

Parameters

None.

Example

<blockquote>
  ...
</blockquote>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-pull-quotes

Since 0.0.3 
@mixin vf-pull-quotes() { ... }

Description

Pull quote styling

Parameters

None.

Example

  <blockquote class="pull-quotes">
    ...
  </blockquote>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-row-quote

Since 0.0.3 
@mixin vf-row-quote() { ... }

Description

Row quote styling

Parameters

None.

Example

  <div class="row row-quote">
    ...
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

boxes

mixins

vf-boxes

Since 0.0.2 
@mixin vf-boxes() { ... }

Description

Box class

Parameters

None.

Example

  <div class="box">
    <h2>A heading</h2>
    <p>Your content here</p>
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

breadcrumbs

mixins

vf-breadcrumbs

Since 0.0.3 
@mixin vf-breadcrumbs() { ... }

Description

Default breadcrumbs styling

Parameters

None.

Example

<nav role="navigation" class="nav-secondary clearfix" id="breadcrumbs">
    <ul class="breadcrumb">
        <li>
            <a href="#" class="breadcrumb-link">Section</a>
            <ul class="second-level-nav">
                <li>
                    <a href="#" class="breadcrumb-link--second-level">Second level</a>
                    <ul class="third-level-nav">
                        <li>
                            <a class="active" href="#">third level</a>
                        </li>
                        <li>
                            <a href="#">third level</a>
                        </li>
                        <li>
                            <a href="#">third level</a>
                        </li>
                    </ul>
                 </li>
            </ul>
        </li>
    </ul>
</nav>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

buttons

mixins

vf-buttons

Since 0.0.3 
@mixin vf-buttons() { ... }

Description

Default blockquote styling

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-primary-button

Since 0.0.3 
@mixin vf-primary-button() { ... }

Description

Primary button styling

Parameters

None.

Example

<a class="button--primary">
  ...
</a>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-secondary-button

Since 0.0.3 
@mixin vf-secondary-button() { ... }

Description

Secondary button styling

Parameters

None.

Example

<a class="button--secondary">
  ...
</a>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-button

Since 0.0.3 
@mixin vf-button() { ... }

Description

Default button mixin

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

placeholders

button-pattern

Since 0.0.3 
%button-pattern { ... }

Description

Default button pattern styles

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

code

mixins

vf-code

Since 0.0.71 
@mixin vf-code() { ... }

Description

Code and pre styles

Parameters

None.

Example

  <pre>
    <code>...</code>
  </pre>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-code-block

Since 0.0.71 
@mixin vf-code-block() { ... }

Description

Code block styles

Parameters

None.

Example

  <pre class="code-block">
    <code class="code-block__line">...</code>
    <code class="code-block__line">...</code>
    <code class="code-block__line">...</code>
  </pre>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-code-snippet

Since 0.0.71 
@mixin vf-code-snippet() { ... }

Description

Code snippet styles

Parameters

None.

Example

<div class="code-snippet">
  <input class="code-snippet__input" value="sudo apt-get install" readonly="readonly">
  <button class="code-snippet__copy-button">Copy to clipboard</button>
</div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

forms

mixins

vf-forms

Since 0.0.3 
@mixin vf-forms() { ... }

Description

Form element styles

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

placeholders

input-elements

Since 0.0.3 
%input-elements { ... }

Description

Default form input element styles

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

tick-elements

Since 0.0.3 
%tick-elements { ... }

Description

Default form checkbox and radio styles

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

disabled-element

Since 0.0.3 
%disabled-element { ... }

Description

Disabled form elements

Used by

Links

Author

  • Web Team at Canonical Ltd

grid

mixins

vf-grid

Since 0.0.3 
@mixin vf-grid() { ... }

Description

Column management classes for the grid

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

header

mixins

vf-header

Since 0.0.3 
@mixin vf-header() { ... }

Description

Default header styling

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-search

Since 0.0.3 
@mixin vf-search() { ... }

Description

Search box styles

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

helpers

mixins

vf-helpers

Since 0.0.52 
@mixin vf-helpers() { ... }

Description

A collect of functions to aid and enhance the users abililty

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-left

Since 0.0.52 
@mixin vf-left() { ... }

Description

Floats an element left

Parameters

None.

Example

  <div class="left">
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-right

Since 0.0.52 
@mixin vf-right() { ... }

Description

Floats an element right

Parameters

None.

Example

  <div class="right">
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-no-border

Since 0.0.52 
@mixin vf-no-border() { ... }

Description

Removes the border from element

Parameters

None.

Example

  <div class="row no-border">
    ...
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-link-top

Since 0.0.52 
@mixin vf-link-top() { ... }

Description

Provides a wrapper that positions the link over the rows border

Parameters

None.

Example

  <div class="row">
    <div class="link-top">
      <a href="#">Back to top</a>
    </div>
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-caps

Since 0.0.52 
@mixin vf-caps() { ... }

Description

Convents text to uppercase

Parameters

None.

Example

  <div class="six-col">
    <p class="caps">This text should be uppercase</p>
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-touch-border

Since 0.0.52 
@mixin vf-touch-border() { ... }

Description

Mainly used on images to lower them to touch the bottom border of the row Requires no-margin-bottom helper on col

Parameters

None.

Example

  <div class="row">
    <div class="six-col no-margin-bottom">
      <img src="..." class="touch-bottom" />
    </div>
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-accessibility-aid

Since 0.0.52 
@mixin vf-accessibility-aid() { ... }

Description

Hides containing elements to the left off screen but its available for screen readers

Parameters

None.

Example

  <ul class="accessibility-aid">
    <li class="accessibility-aid">
      <a accesskey="s" href="#main-content">Jump to content</a>
    </li>
  </ul>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-external

Since 0.0.52 
@mixin vf-external() { ... }

Description

Appends an external icon ot the right of the link

Parameters

None.

Example

  <a href="..." class="external">Jump to another site</a>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-align-center

Since 0.0.52 
@mixin vf-align-center() { ... }

Description

Sets the element to text-align center

Parameters

None.

Example

  <div class="twelve-col">
    <p class="align-center">Centered text</p>
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-no-margin-bottom

Since 0.0.52 
@mixin vf-no-margin-bottom() { ... }

Description

Removes margin bottom

Parameters

None.

Example

  <div class="six-col no-margin-bottom">
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-no-padding-bottom

Since 0.0.52 
@mixin vf-no-padding-bottom() { ... }

Description

Removes padding bottom

Parameters

None.

Example

  <div class="six-col no-padding-bottom">
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-pull-bottom-right

Since 0.0.52 
@mixin vf-pull-bottom-right() { ... }

Description

Aligns the element to the bottom right corner

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="pull-bottom-right" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-pull-bottom-left

Since 0.0.52 
@mixin vf-pull-bottom-left() { ... }

Description

Aligns the element to the bottom left corner

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="pull-bottom-left" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-video-container

Since 0.0.52 
@mixin vf-video-container() { ... }

Description

By wrapping a video embed it makes the video responsive

Parameters

None.

Example

  <div class="video-container">
    <iframe width="442" height="249" src="http://www.youtube.com/embed/6pSslGRi-ew?rel=0&wmode=opaque&modestbranding=0" frameborder="0" allowfullscreen=""></iframe>
    <h3 class="video-title">Landscape - Canonical's systems management tool for Ubuntu</h3>
  </div>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-pull-right

Since 0.0.52 
@mixin vf-pull-right() { ... }

Description

Aligns the element to the right of the the container

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="pull-right" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-pull-left

Since 0.0.52 
@mixin vf-pull-left() { ... }

Description

Aligns the element to the left of the the container

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="pull-left" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-priority-0

Since 0.0.52 
@mixin vf-priority-0() { ... }

Description

Hides content on small screens

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="priority-0" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-for-medium

Since 0.0.52 
@mixin vf-for-medium() { ... }

Description

Display's on medium view and larger

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="for-medium" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-for-small

Since 0.0.52 
@mixin vf-for-small() { ... }

Description

Shows content only on small screens

Parameters

None.

Example

  <div class="six-col">
    <img src="..." class="for-small" />
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-med-six-col

Since 0.0.52 
@mixin vf-med-six-col() { ... }

Description

Med-six-col is a wrapper for a group three-cols. It converts the three-cols to six-cols in medium viewports

Parameters

None.

Example

  <div class="med-six-col">
    <div class="three-col">...</div>
    <div class="three-col">...</div>
    <div class="three-col">...</div>
    <div class="three-col last-col">...</div>
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

lists

mixins

vf-inline-logos

Since 0.0.13 
@mixin vf-inline-logos() { ... }

Description

Inline logos component

Parameters

None.

Example

  <ul class="inline-logos">
    <li>...</li>
  </ul>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-lists

Since 0.0.3 
@mixin vf-lists() { ... }

Description

Default list styling

Parameters

None.

Example

  <ul>
    <li>...</li>
  </ul>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-lists-list

Since 0.0.3 
@mixin vf-lists-list() { ... }

Description

List styling using list class

Parameters

None.

Example

  <ul class='lists'>
    <li>...</li>
  </ul>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-lists-list-ticks

Since 0.0.3 
@mixin vf-lists-list-ticks() { ... }

Description

Displays an ubuntu styled list with tick bullets

Parameters

None.

Example

  <ul class='list-ticks'>
    <li>...</li>
  </ul>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-lists-no-bullets

Since 0.0.3 
@mixin vf-lists-no-bullets() { ... }

Description

Displays a default styled list with no bullets

Parameters

None.

Example

  <ul class='no-bullets'>
    <li>...</li>
  </ul>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-lists-combined-list

Since 0.0.3 
@mixin vf-lists-combined-list() { ... }

Description

Displays split as one on small screens

Parameters

None.

Example

<div class='combined-list'>
  <ul>
    <li>...</li>
  </ul>
  <ul>
    <li>...</li>
  </ul>
</div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-lists-inline-list

Since 0.0.3 
@mixin vf-lists-inline-list() { ... }

Description

Displays a list inline with spacing

Parameters

None.

Example

  <ul class='inline-list'>
    <li>...</li>
  </ul>

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-stepped-list

Since 0.0.3 
@mixin vf-stepped-list() { ... }

Description

Displays a step by step list of instructions

Parameters

None.

Example

  <ol class='list-step'>
    <li class='list-step__item eight-col'>
      <h3 class='list-step__title'>
        <span class='list-step__bullet'>1</span>
        First step
      </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed purus lorem, dictum vel dolor eu, tincidunt suscipit magna. Suspendisse dignissim nisl vitae turpis iaculis, ut tempor enim gravida.</p>
    </li>
    ...
  </ol>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

media

mixins

vf-media

Since 0.0.3 
@mixin vf-media() { ... }

Description

Media element styles

Parameters

None.

Used by

Links

Author

  • Web Team at Canonical Ltd

rows

mixins

vf-rows

Since 0.0.3 
@mixin vf-rows() { ... }

Description

Row element styles

Parameters

None.

Example

<div class="row">
  ...
</div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

tables

mixins

vf-tables

Since 0.0.3 
@mixin vf-tables() { ... }

Description

Table element styles

Parameters

None.

Example

<table>
  <thead>
    <tr>
      <th>...</th>
      ...
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>...</td>
      ...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
  </tbody>
</table>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

typography

mixins

vf-typography

Since 0.0.3 
@mixin vf-typography() { ... }

Description

Typographic element styles

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

General

variables

asset-path

$asset-path: 'https://assets.ubuntu.com/sites/ubuntu/latest/u/' !default;

Description

assets database path usage: background: url(#{$asset-path}img//backgrounds/background.jpg) no-repeat 0 0;

Used by

base-font-family

$base-font-family: "Ubuntu, Arial, 'libra sans', sans-serif" !default;

Description

Base font family default: Ubuntu, Arial, 'libra sans', sans-serif

Used by

heading-font-family 

$heading-font-family: $base-font-family !default;

Description

Heading font family default: $base-font-family

Used by

transparent

$transparent: transparent !default;

Description

transparent to use throughout the site

Used by

brand-color

$brand-color: #f7f7f7 !default;

Description

the theme's core brand colour

Used by

brand-color-light

$brand-color-light: lighten($brand-color, 48%) !default;

Description

light brand colour

cool-grey

$cool-grey: #333 !default;

Description

cool grey

Used by

text-color

$text-color: $cool-grey !default;

Description

text colour

Used by

header-link-color

$header-link-color: $cool-grey !default;

Description

header link color

Used by

warm-grey

$warm-grey: #888 !default;

Description

warm grey

Used by

mid-grey

$mid-grey: #cdcdcd !default;

Description

mid grey

Used by

light-grey

$light-grey: #f7f7f7 !default;

Description

light grey

Used by

alto-grey

$alto-grey: #d2d2d2 !default;

Description

Alto grey

Used by

white

$white: #fff !default;

Description

white

Used by

black

$black: #000 !default;

Description

black

row-background

$row-background: #4b1827 !default;

Description

row background

error

$error: #df382c !default;

Description

error notifications

Used by

warning

$warning: #eca918 !default;

Description

warning notifications

Used by

success

$success: #38b44a !default;

Description

success notifications

Used by

information

$information: #19b6ee !default;

Description

information notifications

Used by

box-solid-grey

$box-solid-grey: #efefef !default;

Description

Box grey background

box-shadow

$box-shadow: #c2c2c2 !default;

Description

box shadows

code-bg

$code-bg: #fffbeb !default;

Description

code background

table-th

$table-th: #fee3d2 !default;

Description

table header background

Used by

box-border

$box-border: #dfdcd9 !default;

Description

box borders

link-color

$link-color: #e95420 !default;

Description

This is the global link color, mainly used for links in content

Used by

primary-button-color 

$primary-button-color: $link-color !default;

Description

This is a primary button color

Used by

bullet-color

$bullet-color: $brand-color !default;

Description

This is the background color for the tick lists

Used by

gutter-width

$gutter-width: 20px !default;

Description

grid variables gutter width

Used by

columns

$columns: 12 !default;

Description

number of columns in the grid

Used by

mobile-nav

$mobile-nav: $cool-grey !default;

Description

mobile nav

Used by

nav-active-bg

$nav-active-bg: #ddd !default;

Description

nav active background

Used by

breakpoint-medium

$breakpoint-medium: 768px !default;

Description

Medium breakpoint

Used by

breakpoint-large

$breakpoint-large: $site-max-width !default;

Description

Large breakpoint

Used by

navigation-threshold 

$navigation-threshold: 620px !default;

Description

Threshold to switch to small screen naviagtion

Used by

mixins

vanilla

@mixin vanilla() { ... }

Description

Include all the CSS

Parameters

None.

Requires

vf-footer

Since 0.0.3 
@mixin vf-footer() { ... }

Description

Default footer styling

Parameters

None.

Example

<footer class="global" role="contentinfo">
  <div class="legal">
   <p>
      &copy; 2015 FooBar Ltd. FooBar is a registered trademark of FooBar Ltd.
      <a href="#">Report a bug on this site</a>
    </p>
  </div>
</footer>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

column-spacing

Since 0.0.3 
@mixin column-spacing() { ... }

Description

Calculate the width and margin-right for all columns

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

generate-column-classes

Since 0.0.3 
@mixin generate-column-classes() { ... }

Description

Generate classes for columns The english word for the numbers will be used (e.g.: one, two) With a prefix (default: blank) or suffix (default: '-col') either side. So by default, the classes will be "one-col", "two-col" etc. Each column class will include rules for nested column classes within it

Parameters

None.

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

floating-column

Since 0.0.3 
@mixin floating-column() { ... }

Description

Push and pull columns need to float

Parameters

None.

Links

Author

  • Web Team at Canonical Ltd

placeholders

vf-inner-wrapper

Since 0.0.3 
%vf-inner-wrapper { ... }

Description

Centralised wrapper for the main site body

Used by

Links

Author

  • Web Team at Canonical Ltd

utils

mixins

vf-clearfix

@mixin vf-clearfix() { ... }

Description

Hard and soft clearing classes

Parameters

None.

Example

  <div class="clearfix">
    ...
  </div>

Used by

vf-equal-heights

Since 0.0.13 
@mixin vf-equal-heights() { ... }

Description

Equal heights makes all immediate child divs and li's heights equal

Parameters

None.

Example

  <div class="row equal-height">
    <div class="six-col equal-height__item">...</div>
    <div class="six-col last-col equal-height__item">...</div>
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

vf-align-vertically

Since 0.0.13 
@mixin vf-align-vertically() { ... }

Description

Sets the element to center an inner element vertically. Has to be used in conjunction with equal-height and if it's an image it'll need align-center, too.

Parameters

None.

Example

  <div class="row equal-height">
    <div class="eight-col">...</div>
    <div class="four-col align-vertically align-center last-col">
      <img src="love-orange.svg" alt="" />
    </div>
  </div>

Requires

Links

Author

  • Web Team at Canonical Ltd

vf-vertical-divider

Since 0.0.13 
@mixin vf-vertical-divider() { ... }

Description

Vertical divider applies a vertical divider between columns inside parent

Parameters

None.

Example

  <div class="row equal-height--vertical-divider">
    <div class="six-col equal-height--vertical-divider__item">...</div>
  <div class="six-col last-col equal-height--vertical-divider__item">...</div>
  </div>

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd

placeholders

equal-height

Since 0.0.13 
%equal-height { ... }

Description

Default equal-height pattern styles

Requires

Used by

Links

Author

  • Web Team at Canonical Ltd