History

syl20bnr b97ad90c92 web-beautify: fix definition of web-beautify key bindings Needs to use `pre-init` function in order to have the variable spacemacs-web-beautify--modes to be populated before the init function of web-beautify is actually called.		2018-05-19 01:53:33 -04:00
..
img	Use + instead of ! for layer categories	2015-09-11 00:13:51 -04:00
funcs.el	html: move css functions to funcs.el	2018-05-18 01:25:29 -04:00
layers.el	New layer web-beautify extracted from javascript layer	2018-05-18 01:25:29 -04:00
packages.el	web-beautify: fix definition of web-beautify key bindings	2018-05-19 01:53:33 -04:00
README.org	Fix documentation link to web-beautify layer README	2018-05-18 02:04:45 -04:00

README.org

HTML layer

Description
- Features:
Install
- web-beautify
Live display in browser
Key Bindings
- Web mode
- CSS/SCSS

/TakeV/spacemacs/media/commit/b97ad90c92b1000c8c942b514e16ec25d3bcd46b/layers/+lang/html/img/html.png

Description

This layer adds support for editing HTML and CSS.

Features:

Editing HTML and CSS file using web-mode
Support for Sass/Scss and Less files
Generate HTML and CSS coding using emmet-mode
Tags navigation on key % using evil-matchit
Support for editing Slim and Pug templates using slim-mode and pug-mode
See the effects of typed HTML using impatient-mode
imenu support for CSS and Sass through counsel-css
Formating with web-beautify

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.

SCSS linting requires SCSS-Lint version >= 0.43.0. You can get it from GitHub:

gem install specific_install
gem specific_install https://github.com/brigade/scss-lint.git
gem specific_install https://github.com/Sweetchuck/scss_lint_reporter_checkstyle.git

web-beautify

See web-beautify layer documentation.

Live display in browser

Use SPC m i to enable impatient mode, opening a live view of a HTML file in your browser. You may wish to enable impatient mode in referenced CSS or JS files, too.

When the underlying file is an HTML file, SPC m i automatically opens the page in the browser. For other buffers, a list of available views can be found on http://localhost:8080/imp.

For more information visit the help page on GitHub.

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 i`	open live view in browser
`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 transient-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 transient-state
`r`	rename current element
`w`	wrap current element

CSS/SCSS

Key Binding	Description
`SPC m g h`	quickly navigate CSS rules
`SPC m z c`	fold css statement to one line
`SPC m z o`	unfold css statement to one line