diff --git a/docs/contributing/css_guidelines.rst b/docs/contributing/css_guidelines.rst index 0fc10ad65c..ee2d7a36c2 100644 --- a/docs/contributing/css_guidelines.rst +++ b/docs/contributing/css_guidelines.rst @@ -1,7 +1,7 @@ CSS coding guidelines =========================== -Our CSS is written in Sass, using the SCSS syntax. +Our CSS is written in `Sass <https://sass-lang.com/>`_, using the SCSS syntax. Compiling ~~~~~~~~~ @@ -32,13 +32,16 @@ automatically recompiling when any changes are observed, by running: $ npm start -Linting SCSS -~~~~~~~~~~~~ +Linting and formatting SCSS +~~~~~~~~~~~~~~~~~~~~~~~~~~~ Wagtail uses the `stylelint <https://stylelint.io/>`_ linter. You'll need Node.js and npm on your development machine. Ensure project dependencies are installed by running ``npm install --no-save`` +Linting code +------------ + Run the linter from the wagtail project root: .. code-block:: console @@ -49,12 +52,27 @@ Run the linter from the wagtail project root: The linter is configured to check your code for adherance to the guidelines below, plus a little more. +Formatting code +--------------- + If you want to autofix errors, you can run that command directly with: .. code-block:: console $ npm run lint:css -- --fix +Changing the linter configuration +--------------------------------- + +To edit ignored files, add an entry to the ``.stylelintrc.yaml`` file under ``ignoreFiles``. + +To the configuration for the linting rules is managed in an external +repository so that it can be easily shared across other Wagtail projects +or plugins. This configuration can be found at +`stylelint-config-wagtail <https://github.com/wagtail/stylelint-config-wagtail>`_. + +Styleguide Reference +~~~~~~~~~~~~~~~~~~~~ Spacing -------