LESS QUERY

Modified approach to responsive layout

Navigation

Install
Standard grid system
Mixins
Experimental mixins
Functions
Example
Recommendation
Overriding standard variables
F.A.Q.

Install

npm install -D less-query

set the entry point to your file

@import './node_modules/less-query/style.less';

Standard grid system

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

Go back to navigation

Go to overriding this variables

Mixins

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
.grid-area	.ga	true
.grid-auto-column	.gac	true
.grid-auto-row	.gar	true
.grid-template	.gt	true
.grid-template-column	.gtc	true
.grid-template-row	.gtr	true
.grid-column	.gc	true
.grid-column-gap	.gcg	true
.grid-column-start	.gcs	true
.grid-column-end	.gce	true
.grid-row	.gr	true
.grid-row-gap	.grg	true
.grid-row-start	.grs	true
.grid-row-end	.gre	true
.grid-gap	.gg	true

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

Box mixins

mixin	short	grid system	multi line
.box-shadow	.bsh	true	false
.box-sizing	.bz	true	false

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

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

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;

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

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

Position mixins

mixin	short	grid system	multi line	description
.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

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

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

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

Experimental mixins

Size mixins

Height + width

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

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

Functions

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

Examples

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;
	}
}

Recommendation

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

Overriding standard variables

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

F.A.Q.

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.

Benefits of this approach

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

Disadvantages of this approach

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.

less-query
Release 4.2.5

Release 4.2.5

4.2.5

4.2.4

4.2.2

4.2.1

4.1.1

4.0.21

4.0.20

4.0.19

4.0.18

4.0.9

Documentation

LESS QUERY

Modified approach to responsive layout

Navigation

Install

Standard grid system

Mixins

Experimental mixins

Functions

Examples

Recommendation

Overriding standard variables

F.A.Q.

Benefits of this approach

Disadvantages of this approach

Stats

Development practices

Releases

Contributors

less-query Release 4.2.5

Release 4.2.5 Toggle Dropdown 4.2.5 4.2.4 4.2.2 4.2.1 4.1.1 4.0.21 4.0.20 4.0.19 4.0.18 4.0.9

Documentation

LESS QUERY

Modified approach to responsive layout

Navigation

Install

Standard grid system

Mixins

Experimental mixins

Functions

Examples

Recommendation

Overriding standard variables

F.A.Q.

Benefits of this approach

Disadvantages of this approach

Stats

Development practices

Releases

Contributors

less-query
Release 4.2.5

Release 4.2.5

4.2.5

4.2.4

4.2.2

4.2.1

4.1.1

4.0.21

4.0.20

4.0.19

4.0.18

4.0.9