<%= head %> <%= siteHeader %>

Links

Tachyons doesn't style links by default, but provides the necessary classes to generate a wide variety of link styles.

Examples

Underline links and animate to color

To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.

link text <a href="#" class="link underline blue hover-orange">link text</a>

Underline on hover

To add an underline on hover and focus, use the class 'underline-hover'.

link text <a href="#" class="link underline-hover red">link text</a>

Dim on hover

To dim a link on hover, add the dim class.

link text <a href="#" class="dim">link text</a>

Add background color on hover

You can add any background color from the skins-pseudo module.

link text <a href="#" class="link black hover-bg-light-blue">link text</a>

Animate background color on hover

You can add any background color from the skins-pseudo module.

link text <a href="#" class="link black bg-animate hover-bg-light-blue">link text</a>

Colors

Below are examples of combining each color in the skins module with the dim class.

Previous

Images

Next

Lists

<%= name %>

v<%= moduleVersion %> <%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

Source code

src/_links.css

<%= srccss  %>

<%= navDocs %>
<%= siteFooter %> <%= googleAnalytics %>