links.less

Configurable css module for rendering links.

Install

npm install links.less --save-dev

bower install links.less --save

or use compiled version from CDN

https://unpkg.com/[email protected]/links.css
https://unpkg.com/[email protected]/links.min.css
https://unpkg.com/[email protected]/links.min.css.map

Usage in HTML

See demo on Codepen.

Default colors apply to all links and classnames .link, .link-novisited, .link-inherit.

Custom :focus styles and animation apply only to links that has no class attribute (a:not[class]) and .link, .link-novisited, .link-inherit.

.link

Use .link to apply styles to any tag:

<a class="mytag link" href="#">customized link</span>
<span class="link" tabindex="0">pseudolink</span>
<button class="link">button</button>

.link-novisited

Links with class .link-novisited never look like :visited. Good for navigation for example.

<nav>
    <a class="link-novisited" href="https://www.google.com/">google</a>
    <a class="link-novisited" href="https://github.com/">github</a>
    <a class="link-novisited" href="http://codepen.io/">codepen</a>
</nav>

.link-inherit

Links with class .link-inherit use same color as parent element for :link and :visited states. Good if you want to make links in footer less prominent.

<footer style="color:#999">
    © <a class="link-inherit" href="http//paulradzkov.com">Paul Radzkov</a> 2017.
</footer>

Usage in LESS

Install library with npm install links.less --save-dev and include its main file inside your project less file:

@import (less) "node_modules/links.less/links.less";

That is enough to run library with default parameters.

To customize settings add .links-settings() mixin after import and redefine any parameter:

@import (less) "node_modules/links.less/links.less";

.links-settings() {
    @links-class: pseudolink; //you can rename that classname
    @links-text-decoration: none;
    @links-roundness: 0;
    @links-focuswidth: 0;
    @links-aniduration: .5s;
}

Default settings

All list of settings:

.links-settings() {
    @links-class: link; //you can rename that classname
    @links-text-decoration: underline;
    @links-roundness: 0.125em;   // default = 2px
    @links-focuswidth: 0.1875em; // default = 3px
    //colors
    @links-link:          #0877db;
    @links-hover:         #2b9aff;
    @links-visited:       #9108db;
    @links-visitedhover:  #bc4df8;
    @links-active:        #bc4df8;
    @links-fadeout: 75%;  // amount of transparency added to underline
    //animation
    @links-aniduration: .3s; //fading duration from hover
}

Using mixin for coloring your own links

You can recolor links with .links-color() mixin:

@import (less) "node_modules/links.less/links.less";

.links-settings() {
    // your customized parameters
}

.mycustomlink {
    .links-color(red);
}

You can pass from 1 to 6 arguments to mixin. See the mapping scheme:

.links-color(@link-color);
.links-color(@link-color, @hover-color);
.links-color(@link-color, @hover-color, @visited-color);
.links-color(@link-color, @hover-color, @visited-color, @active-color);
.links-color(@link-color, @hover-color, @visited-color, @visitedhover-color, @active-color);
.links-color(@link-color, @hover-color, @visited-color, @visitedhover-color, @active-color, @fadeout);

The last one @fadeout by default has value 75% and refers to amount of transparency added to underline.