links.less

0.0.5 • Public • Published

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.

Package Sidebar

Install

npm i links.less

Weekly Downloads

23

Version

0.0.5

License

none

Last publish

Collaborators

  • paulradzkov