Add indenting rule

website/docs/8-Resources/theming-guidelines.md

@@ -16,7 +16,7 @@ https://github.com/eea/volto-accordion-block/blob/master/src/components/manage/B
 
   When the theme is added, we expect for the normal `Accordion` component to look like it does now on the storybook
 without any modification to the component in the individual packages.
- 
+
 Therefore, when theming the stock components do the following:
 
 - Remove any extra html tag elements and stick to the normal component markup
@@ -28,13 +28,13 @@ them likewise
 
 Ex:
 ```less
-//if you have 
+//if you have
 .styled.active.child {
   padding: 0;
 }
 // then add the value with a variable
 @styledActiveChildPadding: 1rem;
-// and use it 
+// and use it
 .styled.active.child {
   padding: @styledActiveChildPadding;
 }
@@ -60,15 +60,15 @@ Ex:
   - alignment
   - text-decoration
 
-- Use variables also for link and buttons `states`, ex: 
+- Use variables also for link and buttons `states`, ex:
   - focus
   - hover
   - active
- 
+
   We will provide a `primary` button blue, but perhaps
   another EEA website will have `green` with a border
-  as the `primary` style. 
-  
+  as the `primary` style.
+
   Having a design system that allows this level of customization through variables ensures that the design is flexible without adding any extra css to the final bundle.
 - If there aren't any, and you need to use `media queries`, define `variables` for media queries, ex:
   ```less
@@ -84,12 +84,12 @@ Ex:
   // wrong
   .blue .button {}
   ```
-  
+
 ### Remove or customize overrides
 Delete overrides that modified variables, introduce overrides only when the style is hard-coded:
 
   https://github.com/eea/volto-eea-design-system/blob/develop-itml/theme/themes/eea/elements/button.overrides
- 
+
 ### Ensure that text is a minimum of 16px
 Except for `.small` or `.tiny` classes that make text small, we need to ensure that it is legible any time we have text by making it `16px or more`.
 
@@ -110,7 +110,7 @@ Extra code way:
 ```
 Better way:
 ```jsx
-<Component className={"mobile hidden"} 
+<Component className={"mobile hidden"}
 ```
 
 ### Don't add HTML tags to the css specificity selector
@@ -203,7 +203,7 @@ SemanticUI uses rem.
 
 So if designer set 20px, it must be transformed to rem units, by taking the base font-size of 16px then we get 20/16 = 1,25rem.
 
-So that if in the future we change the base font-size the `gutters/spacing` will also adjust. 
+So that if in the future we change the base font-size the `gutters/spacing` will also adjust.
 Wrong:
 ```less
 @gutterWidth: 20px;
@@ -215,7 +215,7 @@ Right:
 ```
 
 ### Think globally, act locally
-If you have a section repeated in several components, consider introducing a global variable that will be default for all the components where that section is present.  
+If you have a section repeated in several components, consider introducing a global variable that will be default for all the components where that section is present.
 Ex:
 
 Many components have a `meta section`.
@@ -278,3 +278,7 @@ Ex:
 
 If the card is `flex` based and the parent `wrapper` is flex as well, consider adding a max-height to the card `body` or `image wrapper` so that they all keep a standard size.
 
+### Code formatting
+
+CSS and less files should be formatted using prettier. Indent space will be
+2 spaces.