https://github.com/dasx10/less-query
Modified approach to responsive layout
https://github.com/dasx10/less-query
css flexible fron-end grid-system less media mixin mq query responsive retina web
Last synced: about 2 months ago
JSON representation
Modified approach to responsive layout
- Host: GitHub
- URL: https://github.com/dasx10/less-query
- Owner: dasx10
- License: isc
- Created: 2020-09-13T15:45:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-25T22:05:53.000Z (almost 4 years ago)
- Last Synced: 2024-02-29T04:49:49.998Z (about 1 year ago)
- Topics: css, flexible, fron-end, grid-system, less, media, mixin, mq, query, responsive, retina, web
- Language: Less
- Homepage: https://www.npmjs.com/package/less-query
- Size: 2.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# LESS QUERY
[](https://travis-ci.com/dasx10/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
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
## Mixins
### Core
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;
}
}
*/
### Display
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
### Block model
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
### Typography
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
### Other
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
## Experimental mixins
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
## 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.***