The most extensive Less mixins library
Anchor less is a collection of less Mixins, Assets and Utilities to write better and faster CSS. Documentation
Features:
- Responsive mixins, helpers and shortcuts.
- Seamless integration with html5 frameworks.
- Faster performance (Less.js build-in functions).
- The most extensive LESS mixins library.
- A single 'anchor.less' file, no other dependencies.
- .align(@top, @right, @bottom, @left);
- .background(@color, @image, @position, @size @repeat, @origin, @clip, @attachment);
- .border(@width, @style, @color);
- .color(@text, @background, @border);
- .font(@size, @line-height, @width, @style, @family, @family2, @family3, @family4, @family5);
- .gradient(@direction, @start, @stop1, @stop2, @stop3);
- .text(@align, @indent, @transform);
- .rounded(@top-left, @top-right, @bottom-right, @bottom-left);
- .shadow(@spread, @color, @alpha, @mode);
- .size(@width, @height);
- .spacing(@margin, @padding);
- .transition(@property, @durations, @function, @delay);
See the full list
Import the relative url at the top of your less file
@import "../node_modules/anchorless/anchor.less";
Example:
button {
.display(flex, center, center);
.font(2em, 40px, bold);
.rounded(5px);
.background(#fb292d);
.query({
.rounded(20px);
.size(200px, 40px);
.spacing(0 auto, _);
.gradient(#fb292d, #470103);
}, 800px);
}
CSS output:
button {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
line-height: 40px;
font-weight: bold;
border-radius: 5px;
background: #fb292d;
}
@media all and (min-width: 800px) {
button {
border-radius: 20px;
width: 200px;
height: 40px;
margin: 0 auto;
background-image: -webkit-linear-gradient(180deg, #fb292d, #470103);
background-image: -moz-linear-gradient(180deg, #fb292d, #470103);
background-image: linear-gradient(180deg, #fb292d, #470103);
}
}
- Install npm modules
npm install
- Run npm
npm start
- Edit styles.less located on the example folder
cd /example
Your browser will reload after saving
* Requires LessJS 3.0+ or gulp-less 4.0.1+
Copyright © 2020 Licensed under the Apache License Version 2.0.