Configurable css module for rendering links
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
.editorconfig init module Sep 19, 2016
.gitignore init module Sep 19, 2016
.npmignore init module Sep 19, 2016
Gruntfile.coffee init module Sep 19, 2016
LICENSE Initial commit Sep 19, 2016
README.md v0.0.5 May 17, 2017
_config.yml added template config Mar 1, 2018
bower.json init module Sep 19, 2016
links.css v0.0.5 May 17, 2017
links.less v0.0.5 May 17, 2017
links.min.css v0.0.5 May 17, 2017
links.min.css.map v0.0.5 May 17, 2017
package.json 0.0.5 May 17, 2017

README.md

links.less

npm version bower version

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/links.less@0.0.5/links.css
https://unpkg.com/links.less@0.0.5/links.min.css
https://unpkg.com/links.less@0.0.5/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.