SUIT utilities: link
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 notext-decoration
for any state. -
u-linkClean
- A link without notext-decoration
for any state. -
u-linkComplex
- Limit a link's interactivetext-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 forbutton
when styled like a text link.var-color-hover-linkPseudo
: the text interaction color to use forbutton
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+