#+TITLE: HTML layer
#+HTML_HEAD_EXTRA: <link rel="stylesheet" type="text/css" href="../../../css/readtheorg.css" />

[[file:img/html.png]]

* Table of Contents                                         :TOC_4_org:noexport:
 - [[Description][Description]]
   - [[Features][Features]]
 - [[Install][Install]]
 - [[Key Bindings][Key Bindings]]
   - [[Web mode][Web mode]]
   - [[CSS/SCSS][CSS/SCSS]]

* Description
This layer adds support for editing HTML and CSS.

** Features
- Editing HTML and CSS file using [[http://web-mode.org/][web-mode]]
- Support for Sass/Scss and Less files
- Generate HTML and CSS coding using [[https://github.com/smihica/emmet-mode][emmet-mode]]
- Tags navigation on key ~%~ using [[https://github.com/redguardtoo/evil-matchit][evil-matchit]]

* Install
To use this configuration layer, add it to your =~/.spacemacs=. You will need to
add =html= to the existing =dotspacemacs-configuration-layers= list in this
file.

* Key Bindings
** Web mode

| Key Binding | Description                                               |
|-------------+-----------------------------------------------------------|
| ~SPC m g p~ | quickly navigate CSS rules using =helm=                   |
| ~SPC m e h~ | highlight DOM errors                                      |
| ~SPC m g b~ | go to the beginning of current element                    |
| ~SPC m g c~ | go to the first child element                             |
| ~SPC m g p~ | go to the parent element                                  |
| ~SPC m g s~ | go to next sibling                                        |
| ~SPC m h p~ | show xpath of the current element                         |
| ~SPC m r c~ | clone the current element                                 |
| ~SPC m r d~ | delete the current element (does not delete the children) |
| ~SPC m r r~ | rename current element                                    |
| ~SPC m r w~ | wrap current element                                      |
| ~SPC m z~   | fold/unfold current element                               |
| ~%~         | evil-matchit keybinding to jump to closing tag            |

A micro-state is also defined, start it with ~SPC m .~ or ~, .~

| Key Binding | Description                                                    |
|-------------+----------------------------------------------------------------|
| ~?~         | Toggle full help                                               |
| ~c~         | clone current element                                          |
| ~d~         | delete (vanish) current element (does not delete the children) |
| ~D~         | delete current element and children                            |
| ~j~         | next element                                                   |
| ~J~ / ~gj~  | next sibling element                                           |
| ~h~         | parent element                                                 |
| ~k~         | previous element                                               |
| ~K~ / ~gk~  | previous sibling element                                       |
| ~l~         | first child element                                            |
| ~p~         | show xpath of current element                                  |
| ~q~         | leave the micro-state                                          |
| ~r~         | rename current element                                         |
| ~w~         | wrap current element                                           |

** CSS/SCSS

| Key Binding | Description                             |
|-------------+-----------------------------------------|
| ~SPC m g h~ | quickly navigate CSS rules using =helm= |
| ~SPC m z c~ | fold css statement to one line          |
| ~SPC m z o~ | unfold css statement to one line        |