Less-query NPM

LESS QUERY

Modified approach to responsive layout

Navigation

Install

npm install -D less-query

set the entry point to your file

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

Standard grid system

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

Mixins

Core

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

.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;
		}
	}
*/

Display

Block model

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

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

Typography

Other

Go back to mixins | navigation

Experimental mixins

.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 font
.fz(fw(12px, 20px)); // -> font-size: calc(10.4px + 0.5vw);

toEm(16); 		   // 1em;
toPx(10%, 1920px);  // 192px;
toP(20px, 1920px); // 1.0416666666666665%;

.pt(toEm(16)); 	   // padding-top: 1em;

Go back to functions | navigation

Examples

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

// 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

.myMix(@params){
	.c(lighten(@params));
	.bgc(darken(@params));
}

.mq(
	sm,     .myMix(darkred),
	1280px, .myMix(#000)
);

.mq(
	{.px(xs, 10px, sm, 20px);},
	md,
	{.my(sm, 5px, md, 12px, lg, auto);}
)

.px(xs, 10px, sm, 20px);
.my(sm, 5px, md, 12px, lg, auto);

.mq(
	xs, .px(10px),
	sm, .px(20px)
);

.mq(
	sm, .my(5px),
	md, .my(12px),
	lg, .my(auto)
);

.mq(
	xs, .px(10px),
	sm, {
		.px(20px);
		.my(12px);
	},
	md, .my(12px),
	lg, .my(auto)
);

Overriding standard variables

These settings are optional, but you can change the default mixin behavior.

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

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

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

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

: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