33[ ![ MELPA Stable] ( https://stable.melpa.org/packages/com-css-sort-badge.svg )] ( https://stable.melpa.org/#/com-css-sort )
44[ ![ License: GPL v3] ( https://img.shields.io/badge/License-GPL%20v3-blue.svg )] ( https://www.gnu.org/licenses/gpl-3.0 )
55
6-
76# com-css-sort
87> Common way of sorting the CSS attributes.
98
109| Before Sotring | Type Sorting | Alphabetic Sorting |
1110| :-----------------------------------------------:| :--------------------------------------------------:| :--------------------------------------------------------:|
12- | <img src =" ./screenshot/com-css-sort-before.png " />| <img src =" ./screenshot/com-css-sort-type-sort.png " />| <img src =" ./screenshot/com-css-sort-alphabetic-sort.png " />|
13-
11+ | <img src =" ./etc/com-css-sort-before.png " />| <img src =" ./etc/com-css-sort-type-sort.png " />| <img src =" ./etc/com-css-sort-alphabetic-sort.png " />|
1412
1513## How to use?
14+
1615### Alphabetic Order
16+
17171 . Just set ` com-css-sort-sort-type ` to alphabetic-sort.
18+
1819``` el
1920(setq com-css-sort-sort-type 'alphabetic-sort)
2021```
2122
2223### Type Order / Customize Order Your Own
24+
23251 . Set ` com-css-sort-sort-type ` to type-sort.
26+
2427``` el
2528(setq com-css-sort-sort-type 'type-sort)
2629```
30+
27312 . Create ` sort-order.config ` file at the version control root directory.
2832You can grab a config file from ` ./config_examples/ ` directory in this
2933repository. If the file does not exists, variable list
3034` com-css-sort-default-attributes-order ` will be use as default sorting
3135order list.
36+
32373 . Look at the .config file, the order in the file will be the order that
3338the CSS attributes will be sorted.
3439
35-
3640## Configuration
37- Type of sorting algorithm you want used when sorting CSS attributes.<br />
38- * type-sort : Sort in group type. Use 'sort-order.config' if
39- there is one in the version control root directory. (Default)<br />
40- * alphabetic-sort : Sort in alphabetic order. The 'sort-order.config'
41- file will be ignore and will not do anything.<br />
41+
42+ Type of sorting algorithm you want used when sorting CSS attributes.
43+
44+ * type-sort : Sort in group type. Use 'sort-order.config' if there is one in the
45+ version control root directory. (Default)
46+
47+ * alphabetic-sort : Sort in alphabetic order. The 'sort-order.config' file will be
48+ ignore and will not do anything.
49+
4250``` el
43- (setq com-css-sort-sort-type 'type-sort) ;; Type Sorting
44- (setq com-css-sort-sort-type 'alphabetic-sort) ;; Alphabetic Sorting
51+ (setq com-css-sort-sort-type 'type-sort) ; Type Sorting
52+ (setq com-css-sort-sort-type 'alphabetic-sort) ; Alphabetic Sorting
4553```
4654
4755If you don't like the path or file name, you can change it too. This variable is
4856relative path to version control root directory.
57+
4958``` el
5059(setq com-css-sort-sort-file "sort-order.config")
5160```
5261
5362Customize your own sorting order programmatically. If you do not have the
5463`sort-order.config' file in the version control root directory then this will be use!
64+
5565``` el
5666;; Default sorting order list.
5767(setq com-css-sort-default-attributes-order '("display" "position" "top" "right" "bottom" "left" "float" "clear"
@@ -74,9 +84,10 @@ Customize your own sorting order programmatically. If you do not have the
7484 "font" "font-family" "font-size" "font-weight" "content" "quotes"))
7585```
7686
77-
7887## Key Bindings
88+
7989Just bind the key if to whatever you feel comfortable with.
90+
8091``` el
8192;; Sort attributes inside block.
8293(define-key css-mode-map (kbd "C-k s") #'com-css-sort-attributes-block)
@@ -85,8 +96,8 @@ Just bind the key if to whatever you feel comfortable with.
8596(define-key css-mode-map (kbd "C-k d") #'com-css-sort-attributes-document)
8697```
8798
88-
8999## Contribution
100+
90101If you would like to contribute to this project, you may either
91102clone and make pull requests to this repository. Or you can
92103clone the project and establish your own branch of this tool.
0 commit comments