/utils-link

SUIT utility classes for CSS link traits

Primary LanguageCSSMIT LicenseMIT

SUIT utilities: link

Build Status

SUIT CSS link utilities.

Read more about SUIT's design principles.

Installation

  • Component(1): component install suitcss/utils-link
  • npm: npm install suitcss-utils-link
  • Bower: bower install suit-utils-link
  • Download: zip

Available classes

  • u-linkBlock - Block-level link with no text-decoration for any state.

  • u-linkClean - A link without no text-decoration for any state.

  • u-linkComplex - Limit a link's interactive text-decoration underline to a sub-section of the link text.

    <a class="u-linkComplex" href="{url}">
  Link complex
  <span class="u-linkComplexTarget">target</span>
</a>

  • u-linkPseudo - Make another interactive element, e.g., button, look like a link.

    <button class="u-linkPseudo" type="button">
  Link-like button
</button>

Configurable variables

  • var-color-linkPseudo: the text color to use for button when styled like a text link.
  • var-color-hover-linkPseudo: the text interaction color to use for button when styled like a text link.

Usage

Please refer to the README for SUIT utils

Testing

Install Node (comes with npm).

npm install

To generate a build:

npm run build

To generate the testing build.

npm run build-test

Basic visual tests are in test.html.

Browser support

  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 4+
  • Safari 5+
  • Internet Explorer 8+