diff --git a/docs/components/custom-apps/web-app/dataset/data.md b/docs/components/custom-apps/web-app/dataset/data.md index 2cfcab9cb74a6638913df69c442c7ac9147d6189..b838a6e2dd7998a727cc095fb965b56a4750d93e 100644 --- a/docs/components/custom-apps/web-app/dataset/data.md +++ b/docs/components/custom-apps/web-app/dataset/data.md @@ -129,4 +129,3 @@ Finally you can reference it in your style file as the following: We have to do the conversion one by one. If multiple `.ttf` have to be converted, then maybe a `.sh` script is better. In our case we needed only `Titillium Web` to add in our map glyphs. If another font is needed and you want to use them in a single style file, then you need to combine them. For this you can use [glyph-pbf-composite](https://github.com/mapbox/glyph-pbf-composite) - diff --git a/docs/components/custom-apps/web-app/search.md b/docs/components/custom-apps/web-app/search.md index 9098a0a0610649302b5baac482b493d68fe72d9b..e70f38c7b14573a0546b451d9f1c20c6328c15e3 100644 --- a/docs/components/custom-apps/web-app/search.md +++ b/docs/components/custom-apps/web-app/search.md @@ -32,3 +32,5 @@ If the user selects multiple values inside one filter category, they will behave On another hand, if the user selects different filters in different filter categories; they will behave as `AND` operators. For example if we apply the filters `SYTRAL` in Producers and `WMS` in Services, it will display the datasets that are matching with these two conditions. ## Suggestion + +This is a useful feature, especially for typo. If your research doesn't give you any result, Elasticsearch might find for you a word that is close of yours that would give more success in the results. diff --git a/docs/miscellaneous/accessibility.md b/docs/miscellaneous/accessibility.md index 4cea8e15dbd04e4152f23bb02a25d6a5e35f2826..31c413a0ec1fd9a2972fa98c558cc83ba2d315de 100644 --- a/docs/miscellaneous/accessibility.md +++ b/docs/miscellaneous/accessibility.md @@ -2,40 +2,43 @@ This [resource](https://bitsofco.de/pa11y/) is a good start to create your own testing pipeline. - - ## Quick and simple overview -``` + +```bash npm install -g pa11y -``` -``` pa11y https://data.beta.grandlyon.com/fr/accueil ``` ## Display only critical errors -``` + +```bash pa11y https://data.beta.grandlyon.com/fr/accueil --ignore "warning;notice" ``` ## Using the pa11y-ci -``` + +```bash npm install -g pa11y-ci ``` Then create a **.pa11y1** json file. -``` + +```bash { "urls": [ "https://data.beta.grandlyon.com/fr/accueil" ] } ``` + To run the report on multiple URLs: -``` + +```bash pay11-ci ``` It is also possible to save the report as a json file: -``` + +```bash pay11-ci --json > report.json ``` diff --git a/docs/miscellaneous/sass-recommendation.md b/docs/miscellaneous/sass-recommendation.md index 05a2cc2d9758fb6c2e0d57d2184c831dab55fab0..5fcb1facc4d414c84d2c55e548f8a37e377f4472 100644 --- a/docs/miscellaneous/sass-recommendation.md +++ b/docs/miscellaneous/sass-recommendation.md @@ -1,10 +1,13 @@ # Good practices CSS/SASS ## Naming convention + Many exist, but we should look for [SUIT CSS](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) ## Code formatting -Two tools are usually used for having a clean and nice organized code across all the applicaiton: + +Two tools are usually used for having a clean and nice organized code across all the application: + * a style linter: here the suggestion is [stylelint](https://stylelint.io/) * a code formatter: for example [Prettier](https://prettier.io/) @@ -13,32 +16,40 @@ The main issue here is that sometime is difficult to put settings between the li ## Responsiveness -#### Use REM instead pixel +### Use REM instead pixel + One popular technique (there is a lot of discussion about it. The choice is yours): It's all about changing the `font-size` for the html element to 62.5%. + ```css html { font-size: 62.5% } ``` + The reason is that the default `font-size` for browser is usually `16px`. It means now inside your application `1rem` will be equal to 10px. This will help for the readability and maintainability of your code. -#### For mobile +#### For mobile + * Increase the `font-size` on mobile * Decrease or remove the paddings and margins ## REM vs EM spacing -It has to be considered case by case. But *in general*: + +It has to be considered case by case. But *in general*: + * `rem` is more applied for **horizontal spacing** * `em` is more applied for **vertical spacing** ## Random things about SVG + * when you create a SVG, make it from the most small version you will use inside the website * one tool to optimize your SVGs: [SVGOMG](https://jakearchibald.github.io/svgomg/) * if your SVG has some blurry, probably your paths are not enough specifics ## Some questions + * animation on `height:auto` element: You are screwed :) . There is no miracle solution. Here you can find on this [CSS Tricks article](https://css-tricks.com/using-css-transitions-auto-dimensions/) @@ -47,5 +58,3 @@ here it's even worse. there is no suitable solution ! * `display:flex`: is it possible to use it everywhere ? This has changed the way to use CSS, so no hesitation. The Flex main bugs are listed in this [Github page](https://github.com/philipwalton/flexbugs) if you find yourself with some issues. - -* \ No newline at end of file diff --git a/docs/miscellaneous/vscode-settings.md b/docs/miscellaneous/vscode-settings.md index 24c8bd32b4f599465ad6e9606a7b307fedfee57b..872046f0719ad46bd5344bda1ec37456e116d532 100644 --- a/docs/miscellaneous/vscode-settings.md +++ b/docs/miscellaneous/vscode-settings.md @@ -1,7 +1,10 @@ -## User settings +# VS Code settings + +## User settings + To add in the **settings.json** of Vscode IDE: -``` +```json { "editor.snippetSuggestions": "top", "editor.tabSize": 2, @@ -22,12 +25,12 @@ To add in the **settings.json** of Vscode IDE: ``` ## Some important plugins to install + * stylelint * Beautify * TSLint * Angular Language Service ## Beautify (formatter) & stylelint (linter) settings -The rules of these are inside 2 files at the root of the project: .stylelintrc and .jsbeautifyrc. - +The rules of these are inside 2 files at the root of the project: .stylelintrc and .jsbeautifyrc.