Skip to content

Commit 825a714

Browse files
WezomDevWezomDev
committed
Updates README descriptions
1 parent 1d582a5 commit 825a714

File tree

4 files changed

+115
-216
lines changed

4 files changed

+115
-216
lines changed

‎CONTRIBUTING-RU.md‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎CONTRIBUTING.md‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎README-RU.md‎

Lines changed: 82 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
![Test](https://github.com/dutchenkoOleg/sort-css-media-queries/workflows/Test/badge.svg)
88
[![Build Status](https://travis-ci.org/dutchenkoOleg/sort-css-media-queries.svg?branch=master)](https://travis-ci.org/dutchenkoOleg/sort-css-media-queries)
99

10-
1110
:us: [English](./README.md)
1211
|
1312
:ru: Русский язык
@@ -38,33 +37,31 @@ yarn add sort-css-media-queries
3837
Для начала, ознакомтесь с оригинальной документацией https://www.npmjs.com/package/css-mqpacker#sort;
3938

4039
```js
41-
4240
const sortCSSmq = require('sort-css-media-queries');
4341

4442
// your cool code
4543
// ...
4644

4745
postcss([
48-
mqpacker({
49-
sort: sortCSSmq
50-
})
46+
mqpacker({
47+
sort: sortCSSmq
48+
})
5149
]).process(css);
52-
5350
```
5451

5552
### mobile-first
5653

5754
Плагин будет сортировать Ваши медиа запросы в соответствии с mobile-first методологией. Последовательсноть медиа-запросов:
5855

59-
1. `min-width` и `min-height` от меньшего к большему,
56+
1. `min-width` и `min-height` от меньшего к большему,
6057
1. `max-width` и `max-height` от большего к меньшему,
61-
1. `min-device-width` и `min-device-height` от меньшего к большему,
58+
1. `min-device-width` и `min-device-height` от меньшего к большему,
6259
1. `max-device-width` и `max-device-height` от большего к меньшему
6360
1. медиа-запросы без значений размеров, `tv, ttp, ...`,
6461
1. и в конце:
65-
- `print`
66-
- `print and (orientation: landscape)`
67-
- `print and (orientation: portrait)`
62+
- `print`
63+
- `print and (orientation: landscape)`
64+
- `print and (orientation: portrait)`
6865

6966
Пример
7067

@@ -73,46 +70,43 @@ postcss([
7370
```js
7471
// min-width/-height -> from smallest to largest
7572
'screen and (min-width: 320px) and (max-width: 767px)',
76-
'screen and (min-height: 480px)',
77-
'screen and (min-height: 480px) and (min-width: 320px)',
78-
'screen and (min-width: 640px)',
79-
'screen and (min-width: 1024px)',
80-
'screen and (min-width: 1280px)',
81-
82-
// device
83-
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
84-
85-
// max-width/-height <- from largest to smallest
86-
'screen and (max-width: 1023px)',
87-
'screen and (max-height: 767px) and (min-height: 320px)',
88-
'screen and (max-width: 767px) and (min-width: 320px)',
89-
'screen and (max-width: 639px)',
90-
91-
// no units
92-
'screen and (orientation: landscape)',
93-
'screen and (orientation: portrait)',
94-
'print',
95-
'tv'
73+
'screen and (min-height: 480px)',
74+
'screen and (min-height: 480px) and (min-width: 320px)',
75+
'screen and (min-width: 640px)',
76+
'screen and (min-width: 1024px)',
77+
'screen and (min-width: 1280px)',
78+
// device
79+
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
80+
// max-width/-height <- from largest to smallest
81+
'screen and (max-width: 1023px)',
82+
'screen and (max-height: 767px) and (min-height: 320px)',
83+
'screen and (max-width: 767px) and (min-width: 320px)',
84+
'screen and (max-width: 639px)',
85+
// no units
86+
'screen and (orientation: landscape)',
87+
'screen and (orientation: portrait)',
88+
'print',
89+
'tv';
9690
```
9791

9892
Результат сортировки:
9993

10094
```js
10195
'screen and (min-width: 320px) and (max-width: 767px)',
102-
'screen and (min-height: 480px)',
103-
'screen and (min-height: 480px) and (min-width: 320px)',
104-
'screen and (min-width: 640px)',
105-
'screen and (min-width: 1024px)',
106-
'screen and (min-width: 1280px)',
107-
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
108-
'screen and (max-width: 1023px)',
109-
'screen and (max-height: 767px) and (min-height: 320px)',
110-
'screen and (max-width: 767px) and (min-width: 320px)',
111-
'screen and (max-width: 639px)',
112-
'print',
113-
'screen and (orientation: landscape)',
114-
'screen and (orientation: portrait)',
115-
'tv'
96+
'screen and (min-height: 480px)',
97+
'screen and (min-height: 480px) and (min-width: 320px)',
98+
'screen and (min-width: 640px)',
99+
'screen and (min-width: 1024px)',
100+
'screen and (min-width: 1280px)',
101+
'screen and (min-device-width: 320px) and (max-device-width: 767px)',
102+
'screen and (max-width: 1023px)',
103+
'screen and (max-height: 767px) and (min-height: 320px)',
104+
'screen and (max-width: 767px) and (min-width: 320px)',
105+
'screen and (max-width: 639px)',
106+
'print',
107+
'screen and (orientation: landscape)',
108+
'screen and (orientation: portrait)',
109+
'tv';
116110
```
117111

118112
### desktop-first
@@ -124,37 +118,63 @@ const sortCSSmq = require('sort-css-media-queries');
124118
// ...
125119

126120
postcss([
127-
mqpacker({
128-
sort: sortCSSmq.desktopFirst
129-
})
121+
mqpacker({
122+
sort: sortCSSmq.desktopFirst
123+
})
130124
]).process(css);
131-
132125
```
133126

134127
Плагин будет сортировать Ваши медиа запросы в соответствии с desktop-first методологией. Последовательсноть медиа-запросов:
135128

136129
1. `max-width` и `max-height` от большего к меньшему,
137130
1. `max-device-width` и `max-device-height` от большего к меньшему
138-
1. `min-width` и `min-height` от меньшего к большему,
139-
1. `min-device-width` и `min-device-height` от меньшего к большему,
131+
1. `min-width` и `min-height` от меньшего к большему,
132+
1. `min-device-width` и `min-device-height` от меньшего к большему,
140133
1. медиа-запросы без значений размеров, `tv, ttp, ...`,
141134
1. и в конце:
142-
- `print`
143-
- `print and (orientation: landscape)`
144-
- `print and (orientation: portrait)`
135+
- `print`
136+
- `print and (orientation: landscape)`
137+
- `print and (orientation: portrait)`
138+
139+
---
140+
141+
## Конфигурация сортировки
142+
143+
Вы можете создать файл `sort-css-mq.config.json` в корне вашего проекта
144+
или добавить свойство `sortCssMQ: {}` в вашем `package.json`.
145145

146+
Теперь вы сможете контролировать процесс сортировки.
146147

147-
## Тесты
148+
### Параметры конфигурации
148149

149-
1. `npm run sort` - тестирование метода сортировки
150-
1. `npm run happiness` - тестирование стиля JavaScript кода
151-
1. `npm test`: `npm run sort` + `npm run happiness`
150+
#### `unitlessMqAlwaysFirst`
151+
152+
- тип: `boolean | undefined`
153+
- дефолтное значение: `undefined`
154+
155+
---
156+
157+
## Использование методов сортировки напрямую
158+
159+
Вы можете импортировать отдельный хелпер сортировки из пакета
160+
и создать собственный метод сортировки с конфигурацией при необходимости:
161+
162+
```js
163+
import createSort from 'sort-css-media-queries/lib/create-sort';
164+
const mySort = createSort(); // можно паратеры конфигурации => { unitlessMqAlwaysFirst: true, ... }
165+
166+
const myCssMqList = [
167+
/* ... */
168+
];
169+
myCssMqList.sort(mySort);
170+
// or
171+
myCssMqList.sort(mySort.desktopFirst);
172+
```
152173

153174
---
154175

155176
## Информация о проекте
156177

157-
* ["Релиз ноуты"](https://github.com/dutchenkoOleg/sort-css-media-queries/releases)
158-
* [Руководство по содействию проекту](./CONTRIBUTING-RU.md)
159-
* [Кодекс поведения](./CODE_OF_CONDUCT-RU.md)
160-
* [Лицензия MIT](./LICENSE)
178+
- ["Релиз ноуты"](https://github.com/dutchenkoOleg/sort-css-media-queries/releases)
179+
- [Кодекс поведения](./CODE_OF_CONDUCT-RU.md)
180+
- [Лицензия MIT](./LICENSE)

0 commit comments

Comments
 (0)