- Install
- Standard grid system
- Mixins
- Experimental mixins
- Functions
- Example
- Recommendation
- Overriding standard variables
- F.A.Q.
npm install -D less-query
set the entry point to your file
@import './node_modules/less-query/style.less';
Default break point
name | width | description |
---|---|---|
xt | 320px | extra tiny |
ti | 430px | tiny |
xs | 540px | extra small |
sm | 720px | small |
md | 960px | medium |
lg | 1140px | large |
xl | 1320px | extra large |
hu | 1530px | huge |
xh | 1680px | extra huge |
Default grid system setup
name | params | description |
---|---|---|
columns count | 12 | number of columns in a column |
offset | 2em | Column indents |
container | 1680px | Standard container width |
Example grid system mixin
// input
.grid{
.row;
&__col{
.col(12, sm, 6, md, 4, lg, 3);
}
}
// output
.grid {
margin-left: -15px;
margin-right: -15px;
display: flex;
flex-flow: row wrap;
}
.grid__col {
word-wrap: break-word;
box-sizing: border-box;
margin-left: 15px;
margin-right: 15px;
}
@media (max-width: 720px) {
.grid__col {
width: calc(100% - 30px);
}
}
@media (min-width: 720px) and (max-width: 960px) {
.grid__col {
width: calc(50% - 30px);
}
}
@media (min-width: 960px) and (max-width: 1140px) {
.grid__col {
width: calc(33.333333333333336% - 30px);
}
}
@media (min-width: 1140px) {
.grid__col {
width: calc(25% - 30px);
}
}
Go back to navigation
Go to overriding this variables
Break point mixins
mixin | input | system | description |
---|---|---|---|
.row | keyword | grid | row for columns |
.col | number | grid | column |
.col-count | number | false | overrides the default column count |
.mq | mixin | grid | media width builder |
.to | mixin | grid | media max width only |
.from | mixin | grid | media min width only |
.mqh | mixin | grid | media height builder |
.container | mixin | false | max size (container) |
.wrp | mixin | false | padding max size (container) |
Example grid system mixin
// input
.grid{
.row;
&__col{
.col(12, sm, 6, md, 4, lg, 3);
}
}
// output
.grid {
margin-left: -15px;
margin-right: -15px;
display: flex;
flex-flow: row wrap;
}
.grid__col {
word-wrap: break-word;
box-sizing: border-box;
margin-left: 15px;
margin-right: 15px;
}
@media (max-width: 720px) {
.grid__col {
width: calc(100% - 30px);
}
}
@media (min-width: 720px) and (max-width: 960px) {
.grid__col {
width: calc(50% - 30px);
}
}
@media (min-width: 960px) and (max-width: 1140px) {
.grid__col {
width: calc(33.333333333333336% - 30px);
}
}
@media (min-width: 1140px) {
.grid__col {
width: calc(25% - 30px);
}
}
Example .mq
.mq(xs, { .p(1px); color:red }, 1200px, .m(2px));
/*
@media (min-width: 540px) and (max-width: 1200px) {
.class-grid {
padding: 1px;
color: red;
}
}
@media (min-width: 1200px) {
.class-grid {
margin: 2px;
}
}
*/
Grid mixins
mixin | short | grid system | multi line |
---|---|---|---|
.grid-area | .ga | true | false |
.grid-auto-column | .gac | true | false |
.grid-auto-row | .gar | true | false |
.grid-template | .gt | true | false |
.grid-template-column | .gtc | true | false |
.grid-template-row | .gtr | true | false |
.grid-column | .gc | true | false |
.grid-column-gap | .gcg | true | false |
.grid-column-start | .gcs | true | false |
.grid-column-end | .gce | true | false |
.grid-row | .gr | true | false |
.grid-row-gap | .grg | true | false |
.grid-row-start | .grs | true | false |
.grid-row-end | .gre | true | false |
.grid-gap | .gg | true | false |
Flex box mixins
mixin | short | grid system | multi line |
---|---|---|---|
.flex | .fx | true | false |
.flex-basis | .fxb | true | false |
.flex-direction | .fxd | true | false |
.flex-flow | .fxf | true | false |
.flex-grow | .fxg | true | false |
.flex-shrink | .fxs | true | false |
.flex-wrap | .fxw | true | false |
Align mixin
mixin | short | grid system | multi line |
---|---|---|---|
.align-content | .ac | true | false |
.align-items | .ai | true | false |
.align-self | .as | true | false |
Justify mixin
mixin | short | grid system | multi line |
---|---|---|---|
.justify-content | .jc | true | false |
.justify-items | .ji | true | false |
.justify-self | .js | true | false |
Height mixins
mixin | short | grid system | multi line |
---|---|---|---|
.height | .h | true | false |
.min-height | .mih | true | false |
.max-height | .mh | true | false |
.minmax-height | .mmh | true | true |
Width mixins
mixin | short | grid system | multi line |
---|---|---|---|
.width | .w | true | false |
.min-width | .miw | true | false |
.max-width | .mw | true | false |
.minmax-width | .mmw | true | true |
Margin mixins
mixin | short | grid system | multi line |
---|---|---|---|
.margin | .m | true | false |
.margin-top | .mt | true | false |
.margin-right | .mr | true | false |
.margin-bottom | .mb | true | false |
.margin-left | .ml | true | false |
.margin-y | .my | true | true |
.margin-x | .mx | true | true |
.margin-y-right | .myr | true | true |
.margin-y-left | .myl | true | true |
.margin-top-x | .mxt | true | true |
.margin-bottom-x | .mxb | true | true |
.margin-inline | .m-il | true | false |
.margin-inline-start | .m-ils | true | false |
.margin-inline-end | .m-ile | true | false |
.margin-block | .m-bl | true | false |
.margin-block-start | .m-bls | true | false |
.margin-block-end | .m-ble | true | false |
Example margin mixins
.m(1rem 2rem); // margin: 1rem 2rem;
.mt(10px); // margin-top: 10px;
.mb(10px); // margin-bottom: 10px;
.ml(10px); // margin-left: 10px;
.mr(10px); // margin-right: 10px;
.my(5px); // margin-top: 5px; margin-bottom: 5px;
.mx(5px); // margin-right: 5px; margin-left: 5px;
Padding mixins
mixin | short | grid system | multi line |
---|---|---|---|
.padding | .p | true | false |
.padding-top | .pt | true | false |
.padding-right | .pr | true | false |
.padding-bottom | .pb | true | false |
.padding-left | .pl | true | false |
.padding-y | .py | true | true |
.padding-x | .px | true | true |
.padding-y-right | .pyr | true | true |
.padding-y-left | .pyl | true | true |
.padding-top-x | .pxt | true | true |
.padding-bottom-x | .pxb | true | true |
.padding-inline | .p-il | true | false |
.padding-inline-start | .p-ils | true | false |
.padding-inline-end | .p-ile | true | false |
.padding-block | .p-bl | true | false |
.padding-block-start | .p-bls | true | false |
.padding-block-end | .p-ble | true | false |
Example padding mixins
.p(1rem 2rem); // padding: 1rem 2rem;
.pt(10px); // padding-top: 10px;
.pb(10px); // padding-bottom: 10px;
.pl(10px); // padding-left: 10px;
.pr(10px); // padding-right: 10px;
.py(5px); // padding-top: 5px; padding-bottom: 5px;
.px(5px); // padding-right: 5px; padding-left: 5px;
Border mixin
mixin | short | grid system | multi line |
---|---|---|---|
.border | .bd | true | false |
.border-style | .bds | true | false |
.border-color | .bdc | true | false |
.border-radius | .bd-rs | true | false |
Inline-size mixins
mixin | short | grid system | multi line |
---|---|---|---|
.inline-size | .il-sz | true | false |
.min-inline-size | .miil-sz | true | false |
.max-inline-size | .mil-sz | true | false |
.minmax-inline-size | .mmil-sz | true | true |
Block-size mixins
mixin | short | grid system | multi line |
---|---|---|---|
.block-size | .bl-sz | true | false |
.min-block-size | .mibl-sz | true | false |
.max-block-size | .mbl-sz | true | false |
.minmax-block-size | .mmbl-sz | true | true |
Position mixins
mixin | short | grid system | multi line | |
---|---|---|---|---|
.a | .a | true | true | All position |
.top | .t | true | false | |
.right | .r | true | false | |
.bottom | .b | true | false | |
.left | .l | true | false | |
.y | .y | true | true | top + bottom |
.x | .x | true | true | right + left |
.inset | .is | true | false | |
.inset-block | .isbl | true | false | |
.inset-block-start | .isbls | true | false | |
.inset-block-end | .isble | true | false | |
.inset-inline | .isil | true | false | |
.inset-inline-start | .isils | true | false | |
.inset-inline-end | .isile | true | false |
Box mixins
mixin | short | grid system | multi line |
---|---|---|---|
.box-shadow | .bsh | true | false |
.box-sizing | .bz | true | false |
Text mixins
mixin | short | grid system | multi line |
---|---|---|---|
.text-align | .ta | true | false |
.text-decoration | .td | true | false |
.text-indent | .ti | true | false |
.text-shadow | .ts | true | false |
.text-transform | .tt | true | false |
.text-overflow | .tv | true | false |
Font mixins
mixin | short | grid system | multi line |
---|---|---|---|
.font | .f | true | false |
.font-style | .fs | true | false |
.font-size | .fz | true | false |
.font-weight | .f | true | false |
.font-family | .ff | true | false |
Word mixins
mixin | short | grid system | multi line |
---|---|---|---|
.word-break | .wb | true | false |
.word-spacing | .ws | true | false |
.word-wrap | .ww | true | false |
Background mixin
mixin | short | grid system | multi line |
---|---|---|---|
.background | .bg | true | false |
.background-attachment | .bga | true | false |
.background-clip | .bgcl | true | false |
.background-color | .bgc | true | false |
.background-image | .bgi | true | false |
.background-origin | .bgo | true | false |
.background-position | .bgp | true | false |
.background-repeat | .bgr | true | false |
.background-size | .bgz | true | false |
Any mixin
mixin | short | grid system | multi line |
---|---|---|---|
.line-height | .lh | true | false |
.order | .od | true | false |
.letter-spacing | .ls | true | false |
.display | .d | true | false |
.resize | .rz | true | false |
.position | .pos | true | false |
.vertical-align | .va | true | false |
.clip | .cp | true | false |
Go back to mixins | navigation
Size mixins
block-size + inline-size
mixin | short | grid system | multi line |
---|---|---|---|
.size | .sz | true | true |
.min-size | .misz | true | true |
.max-size | .msz | true | true |
.minmax-size | .mmsz | true | true |
Size (width + height) mixins
Height + width
mixin | short | grid system | multi line |
---|---|---|---|
.box | .bx | true | true |
.min-box | .mibx | true | true |
.max-box | .mbx | true | true |
.minmax-box | .mmbx | true | true |
Even mixin
Align + justify
mixin | short | grid system | multi line |
---|---|---|---|
.even-content | .ec | true | true |
.even-items | .ei | true | true |
.even-self | .es | true | true |
Triangle mixin
mixin | input | grid system | Multi line |
---|---|---|---|
.triangle-t | number | false | false |
.triangle-r | number | false | false |
.triangle-b | number | false | false |
.triangle-l | number | false | false |
.triangle-rt | number | false | false |
.triangle-rb | number | false | false |
Shift mixins
margin + padding
mixin | grid system | multi line |
---|---|---|
.shift | true | false |
.shift-t | true | false |
.shift-r | true | false |
.shift-b | true | false |
.shift-l | true | false |
.shift-y | true | true |
.shift-x | true | true |
Out mixins
-margin +padding
mixin | grid system | multi line |
---|---|---|
.out | true | false |
.out-t | true | false |
.out-r | true | false |
.out-b | true | false |
.out-l | true | false |
.out-y | true | true |
.out-x | true | true |
Pull mixins
-margin +padding
mixin | grid system | multi line |
---|---|---|
.pull | true | false |
.pull-t | true | false |
.pull-r | true | false |
.pull-b | true | false |
.pull-l | true | false |
.pull-y | true | true |
.pull-x | true | true |
Any experimental mixin
mixin | grid system | multi line | description |
---|---|---|---|
.reset | false | false | normalize |
.round | false | false | border-radius: 50%; |
.circle | false | false | circle |
Pixel ratio
Mixin: .pxrt()
Params: pixel ration (number) or mixin
.pxrt(
1, { background-image:url('1.webp') },
2, { background-image:url('2.webp') },
3, { background-image:url('3.webp') }
);
// 1x upload only 1.webp
// retina 2x upload only 2.webp
// retina 3x upload only 3.webp
Go back to mixins | experimental mixins | navigation
Flexible function
name | first param * | second param * | next params | description |
---|---|---|---|---|
fw | min size | max size | min-width, max-width | adapts to width |
fh | min size | max size | min-height, max-height | adapts to height |
fmin | min size | max size | min-size, max-size | adapts to min height or width desktop size |
fmax | min size | max size | min-size, max-size | adapts to max height or width desktop size |
fd | min size | max size | min-width, min-height, max-width, max-height | adapts to desktop size |
Example
// flexible font
.fz(fw(12px, 20px)); // -> font-size: calc(10.4px + 0.5vw);
Default params (next params)
name | value |
---|---|
min-height | 240px |
min-width | 320px |
max-height | 1080px |
max-width | 1920px |
min-size | 320px |
max-size | 1920px |
Converter unit function
name | first param * | second param | description |
---|---|---|---|
toEm | number params | the default font-size of this block | convert pixel to em (If the font-size is already set for the block. The second parameter is optional. Not applicable if the font-size in the block is set in ЕМ) (If you did not specify the parameter and the parameter was not found. The font value for root will be taken) |
toRem | number params | default :root or html font-size | convert pixel to rem (unless you specify 2 parameter. The function will try to find it automatically. if the value cannot be found, the default value is 16px) |
toP | px unit | default width layout | convert pixel to % |
toW | px unit | default width layout | convert pixel to vw |
toH | px unit | default width layout | convert pixel to vh |
toM | px unit | default width layout | convert pixel to vmax |
toMi | px unit | default width layout | convert pixel to vmin |
toPx | any number unit | default width layout | convert unit to px |
Example
toEm(16); // 1em;
toPx(10%, 1920px); // 192px;
toP(20px, 1920px); // 1.0416666666666665%;
.pt(toEm(16)); // padding-top: 1em;
Console function
name | input or type | description |
---|---|---|
console-log | varaiable | unit | params | string ... | output from console |
console-dir | varaiable | unit | params | string ... | output from console full information |
console-error | varaiable | unit | params | string ... | output from console (red output) |
Go back to functions | navigation
Example mixin with grid
// input
.class{
.px(1px, xs, 2px, sm, 3px);
}
// output
@media (min-width: 45em) {
.class {
padding-left: 3px;
padding-right: 3px;
}
}
@media (max-width: 33.75em) {
.class {
padding-left: 1px;
padding-right: 1px;
}
}
@media (min-width: 33.75em) and (max-width: 45em) {
.class {
padding-left: 2px;
padding-right: 2px;
}
}
Example multi line
// input
.shift {
.mx(1px 2px);
.my(10px 5px, sm, 8px);
}
// output
.shift {
margin-right: 1px;
margin-left: 2px;
}
@media (min-width: 45em) {
.shift {
margin-top: 8px;
margin-bottom: 8px;
}
}
@media (max-width: 45em) {
.shift {
margin-top: 10px;
margin-bottom: 5px;
}
}
if the property is still missing, then you can create your own mix and use it like this
.myMix(@params){
.c(lighten(@params));
.bgc(darken(@params));
}
.mq(
sm, .myMix(darkred),
1280px, .myMix(#000)
);
How not recommended to use
.mq(
{.px(xs, 10px, sm, 20px);},
md,
{.my(sm, 5px, md, 12px, lg, auto);}
)
How to use it correctly (example #1)
.px(xs, 10px, sm, 20px);
.my(sm, 5px, md, 12px, lg, auto);
How to use it correctly (example #2)
.mq(
xs, .px(10px),
sm, .px(20px)
);
.mq(
sm, .my(5px),
md, .my(12px),
lg, .my(auto)
);
How to use it correctly (example #3)
.mq(
xs, .px(10px),
sm, {
.px(20px);
.my(12px);
},
md, .my(12px),
lg, .my(auto)
);
Recommendations for use media query
We strongly recommend that your media mixin starts with a parameter and ends with a parameter.
This does not mean that you are using it incorrectly. But this is a signal that you are most likely doing something wrong.
Example of correct use
.mq(.p(5px), xs, .p(10px)); .m(1rem, xs, 1.5rem);
An example of a possibly incorrect use
.mq(xs, .p(10px), sm, .p(5px), md); .m(xs, 1.5rem, sm, 2rem, md);
Go back to recommendation | navigation
Go to example
These settings are optional, but you can change the default mixin behavior.
Example of installation in the main file
Create a file for variables. For example, at the root of the data.less directory. And register the file after registering the library.@import './node_modules/less-query/style.less';
@import './data.less';
Reassigning Variables (example data.less file)
Use parameters in your data.less file// BREAK POINTS
@breaks:{
@xl : 1440px;
@lg : 1200px;
@md : 960px;
@sm : 720px;
@xs : 540px;
}
// ANY GRID
@number-of-columns: 24;
@width-wrapper : 1440px;
// OFFSET
@offset: 1em;
@offset-one-side: @offset / 2;
@offset-one-deny: @offset-one-side * -1;
@offset-x: @offset;
@offset-one-side-x: @offset-x / 2;
@offset-one-deny-x: @offset-one-side-x * -1;
@offset-left: @offset-x;
@offset-one-side-left: @offset-left / 2;
@offset-one-deny-left: @offset-one-side-left * -1;
@offset-right: @offset-x;
@offset-one-side-right: @offset-right / 2;
@offset-one-deny-right: @offset-one-side-right * -1;
@offset-y: @offset;
@offset-one-side-y: @offset-y / 2;
@offset-one-deny-y: @offset-one-side-y * -1;
@offset-top: @offset-y;
@offset-one-side-top: @offset-top / 2;
@offset-one-deny-top: @offset-one-side-top * -1;
@offset-bottom: @offset-y;
@offset-one-side-bottom: @offset-bottom / 2;
@offset-one-deny-bottom: @offset-one-side-bottom * -1;
// SHIFT
@default-margin: auto;
@default-margin-x: @default-margin;
@default-margin-left: @default-margin-x;
@default-margin-right: @default-margin-x;
@default-margin-y: @default-margin;
@default-margin-top: @default-margin-y;
@default-margin-bottom: @default-margin-y;
@default-padding: auto;
@default-padding-x: @default-padding;
@default-padding-left: @default-padding-x;
@default-padding-right: @default-padding-x;
@default-padding-y: @default-padding;
@default-padding-top: @default-padding-y;
@default-padding-bottom: @default-padding-y;
If you need dynamic offset.
You can also set them in your settings file. Variable offsets will be automatically inserted into the column system.
We strongly recommend using it as an exception.
If you want the same offsets on all sides. Then use
@offset-var: my offset;
If you need different horizontal and vertical offset. Then use these options.
@offset-var-x: my offset x; @offset-var-y: my offset y;
Example: @offset-var: 1em;
:root {
--offset: 1em;
--offset-x: var(--offset);
--offset-y: var(--offset);
--offset-l: var(--offset-x);
--offset-r: var(--offset-x);
--offset-t: var(--offset-y);
--offset-b: var(--offset-y);
--offset-one-side: calc(var(--offset) / 2);
--offset-one-side-x: calc(var(--offset-x) / 2);
--offset-one-side-y: calc(var(--offset-y) / 2);
--offset-one-side-l: calc(var(--offset-x) / 2);
--offset-one-side-r: calc(var(--offset-x) / 2);
--offset-one-side-t: calc(var(--offset-y) / 2);
--offset-one-side-b: calc(var(--offset-y) / 2);
}
Example: @offset-var-x: 1em;
:root {
--offset-x: 1em;
--offset-l: var(--offset-x);
--offset-r: var(--offset-x);
--offset-one-side-l: calc(var(--offset-x) / 2);
--offset-one-side-r: calc(var(--offset-x) / 2);
--offset-one-side-x: calc(var(--offset-x) / 2);
}
Example: @offset-var-x: 1em; @offset-var-y: 2em;
:root {
--offset-x: 1em;
--offset-l: var(--offset-x);
--offset-r: var(--offset-x);
--offset-one-side-l: calc(var(--offset-x) / 2);
--offset-one-side-r: calc(var(--offset-x) / 2);
--offset-one-side-x: calc(var(--offset-x) / 2);
--offset-y: 2em;
--offset-t: var(--offset-y);
--offset-b: var(--offset-y);
--offset-one-side-t: calc(var(--offset-y) / 2);
--offset-one-side-b: calc(var(--offset-y) / 2);
--offset-one-side-y: calc(var(--offset-y) / 2);
}
Go back to Overriding standard variables | navigation
Mobile first or desktop first?
this library does not take a mobile-first approach. It also does not use a desktop-centric approach. But there is an opportunity to apply one or another approach in the library. Read the instructions carefully. The library combines both approaches.
Faster rendering speed
Since you don't need to apply styles and then overwrite them
Since you don't need to apply styles and then overwrite them
You don't have to think about which approach to use.
since the hybrid approach is backward compatible with any of the approaches
increases file size almost insignificantly
due to the use of both the minimum and maximum value
Documentation in another language?
There is currently no documentation in other languages.Work in progress. If you would like to help us translate, you can send a pull request to the author.
Your library won't start!
Please check your version node js. - Tested and works correctly since version 14
check your transpiler `less` - the library was tested as with a regular transpiler. Same thing via 'webpack' 'gulp'
Check if the library is connected correctly
You are trying to run the library through the browser? This does not work. You need node js to work
I checked everything and tried everything. But still doesn't work - Please write to the author about this problem. Preferably informative with screenshots. So that we can help you
The library is too big - what's the problem?
Don't worry about it - your latest kit will only get what you need.
My bundle is too big.
To reduce the size of the bundle, we recommend using minifiers in conjunction with the library to combine media query.
Do you have any suggestions for the library?
Please write to the author or send a pull request. We will be glad to consider your suggestions.
Go back to navigation
If you find a bug or have suggestions for improving the system, i will be glad to your feedback.