Skip to content

Commit 8d4e2bf

Browse files
julien-deramondjulien-deramond
authored
docs(brand): enhance section on how to use logos (#1065)
1 parent ef7a803 commit 8d4e2bf

File tree

8 files changed

+58
-150
lines changed

8 files changed

+58
-150
lines changed

‎NOTICE.txt‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,13 @@ and reproducing the content of the NOTICE and DOCUMENTATION files.
3535
Any use or displaying shall constitute an infringement under intellectual property laws of France and international conventions.
3636

3737
dist/img/orange-logo.svg
38-
img/orange-logo.svg
3938
nuget/boosted.png
4039
site/layouts/partials/icons.html
4140
site/layouts/partials/icons/download.svg
4241
site/static/docs/**/assets/brand/OBS-logo.svg
42+
site/static/docs/**/assets/brand/OBS-logo-formatted.svg
4343
site/static/docs/**/assets/brand/orange-logo.svg
44+
site/static/docs/**/assets/brand/orange-logo-formatted.svg
4445
site/static/docs/**/assets/brand/orange-social.png
4546
site/static/docs/**/assets/brand/orange-social.svg
4647
site/static/docs/**/assets/img/boosted-cross.svg

‎img/orange-logo.svg‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,6 @@
4949
"css-prefix-main": "postcss --config build/postcss.config.js --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
5050
"css-prefix-examples": "postcss --config build/postcss.config.js --replace \"site/content/**/*.css\"",
5151
"fonts": "cross-env mkdir -p dist/fonts && cp -r ./fonts/* dist/fonts/",
52-
"img": "cross-env mkdir -p dist/img && cp -r ./img/* dist/img/",
5352
"js": "npm-run-all js-compile js-minify",
5453
"js-compile": "npm-run-all --aggregate-output --parallel js-compile-*",
5554
"js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap",
@@ -86,7 +85,7 @@
8685
"release-version": "node build/change-version.js",
8786
"release-zip": "cross-env-shell \"rm -rf boosted-$npm_package_version-dist && cp -r dist/ boosted-$npm_package_version-dist && zip -r9 boosted-$npm_package_version-dist.zip boosted-$npm_package_version-dist && rm -rf boosted-$npm_package_version-dist\"",
8887
"release-zip-examples": "node build/zip-examples.js",
89-
"dist": "npm-run-all --aggregate-output --parallel css js img fonts",
88+
"dist": "npm-run-all --aggregate-output --parallel css js fonts",
9089
"test": "npm-run-all lint dist js-test docs-build docs-lint",
9190
"netlify": "cross-env-shell HUGO_BASEURL=$DEPLOY_PRIME_URL npm-run-all dist release-sri storybook-build docs-build",
9291
"watch": "npm-run-all --parallel watch-*",
@@ -173,7 +172,7 @@
173172
"vnu-jar": "^22.9.29"
174173
},
175174
"files": [
176-
"dist/{css,js,img,fonts}/*.{css,js,map,svg,woff2}",
175+
"dist/{css,js,fonts}/*.{css,js,map,svg,woff2}",
177176
"js/{src,dist}/**/*.{js,map}",
178177
"scss/**/*.scss",
179178
"NOTICE.txt",

‎site/content/docs/5.2/about/brand.md‎

Lines changed: 11 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ Have a need for Boosted's brand resources? Great! We have only a few guidelines
1919
<div class="row row-cols-md-2 mt-4 mb-5">
2020
<div class="col">
2121
<div class="ratio ratio-1x1">
22-
<figure class="figure d-flex bg-dark">
22+
<figure class="d-flex bg-dark">
2323
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange" loading="lazy">
2424
<figcaption class="figure-caption fw-bold text-body position-absolute">Master logo</figcaption>
2525
</figure>
2626
</div>
2727
</div>
2828
<div class="col">
2929
<div class="ratio ratio-1x1">
30-
<figure class="figure d-flex bg-dark">
30+
<figure class="d-flex bg-dark">
3131
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" class="figure-img m-auto" width="30" height="30" role="img" alt="Orange" loading="lazy">
3232
<figcaption class="figure-caption fw-bold text-body position-absolute">Small logo</figcaption>
3333
</figure>
@@ -43,83 +43,17 @@ Boosted uses —and recommends to use— **a single SVG file for both logos**, s
4343

4444
## Orange Business Services logo
4545

46-
<div class="row row-cols-1 row-cols-md-2 gy-5 pt-2 mb-5">
47-
<div class="col">
48-
<div class="ratio ratio-16x9">
49-
<figure class="figure d-flex bg-dark">
50-
<div class="figure-img m-auto d-inline-flex align-items-baseline">
51-
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
52-
<span class="h5 ms-2 mb-0 align-self-end">
53-
<span class="visually-hidden">Orange </span>
54-
Business<br>Services
55-
</span>
56-
</div>
57-
<figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with white descriptor</figcaption>
58-
</figure>
59-
</div>
60-
</div>
61-
<div class="col">
62-
<div class="ratio ratio-16x9">
63-
<figure class="figure d-flex border border-1">
64-
<div class="figure-img m-auto d-inline-flex align-items-baseline">
65-
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
66-
<span class="h5 ms-2 mb-0 align-self-end">
67-
<span class="visually-hidden">Orange </span>
68-
Business<br>Services
69-
</span>
70-
</div>
71-
<figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with black descriptor</figcaption>
72-
</figure>
73-
</div>
74-
</div>
75-
<div class="col">
76-
<div class="ratio ratio-16x9">
77-
<figure class="figure d-flex bg-dark">
78-
<div class="figure-img m-auto d-inline-flex align-items-baseline">
79-
<span class="h5 me-2 mb-0 align-self-end text-end">
80-
<span class="visually-hidden">Orange </span>
81-
Business<br>Services
82-
</span>
83-
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
84-
</div>
85-
<figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with white descriptor</figcaption>
86-
</figure>
87-
</div>
88-
</div>
46+
Orange Business Services has its own logo that contains the Orange logo and the "Business Services" text. This set is a logo by itself, must be considered as a single SVG file and must not be built manually by assembling an image and some texts.
47+
48+
<div class="row row-cols-md-2 mt-4 mb-5">
8949
<div class="col">
90-
<div class="ratio ratio-16x9">
91-
<figure class="figure d-flex border border-1">
92-
<div class="figure-img m-auto d-inline-flex align-items-baseline">
93-
<span class="h5 me-2 mb-0 align-self-end text-end">
94-
<span class="visually-hidden">Orange </span>
95-
Business<br>Services
96-
</span>
97-
<img src="/docs/{{< param docs_version >}}/assets/brand/orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
98-
</div>
99-
<figcaption class="figure-caption fw-bold text-body position-absolute">OBS logo left-aligned with black descriptor</figcaption>
100-
</figure>
50+
<div class="ratio ratio-1x1">
51+
<figure class="d-flex bg-dark">
52+
<img src="/docs/{{< param docs_version >}}/assets/brand/OBS-logo.svg" class="figure-img img-fluid m-auto" width="220" height="220" role="img" alt="Orange" loading="lazy">
53+
<figcaption class="figure-caption fw-bold text-body position-absolute">Orange Business Services logo</figcaption>
54+
</figure>
10155
</div>
10256
</div>
10357
</div>
10458

105-
### Using semantic markup
106-
107-
Boosted [flex]({{< docsref "/utilities/flex" >}}) and [spacing]({{< docsref "/utilities/spacing" >}}) utilities allows to use semantic markup to implement Orange Business Services' logo.
108-
109-
{{< example show_preview="false" >}}
110-
<div class="d-inline-flex align-items-baseline">
111-
<img id="obs" src="orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
112-
<span class="h5 ms-2 mb-0 align-self-end">
113-
<span class="visually-hidden">Orange </span>
114-
Business<br>Services
115-
</span>
116-
</div>
117-
{{< /example >}}
118-
119-
A single CSS property is required for proper alignment:
120-
121-
{{< example show_preview="false" lang="scss" >}}
122-
#obs {
123-
margin-bottom: $spacer / 10;
124-
}
125-
{{< /example >}}
59+
{{< svg-docs file="OBS-logo" >}}

‎site/layouts/shortcodes/svg-docs.html‎

Lines changed: 8 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,24 @@
11
{{- /*
2-
Usage: `svg-docs file="img/orange-logo.svg" downloadable="true"`
2+
Usage: `svg-docs file="orange-logo" downloadable="true"`
33

44
Prints SVG content.
55

66
Optional parameters:
7-
file: SVG file path - default: `img/orange-logo.svg`
7+
file: SVG file path without file extension - default: `orange-logo`
88
downloadable: is the file downloadable? - default: `true`
99
*/ -}}
1010

11-
{{- $file := .Get "file"| default "img/orange-logo.svg" -}}
12-
{{- $svg := readFile $file -}}
13-
{{- $code := $svg -}}
11+
{{- $fileName := .Get "file" | default "orange-logo" -}}
12+
{{- $file := (print "site/static/docs/" .Site.Params.docs_version "/assets/brand/" $fileName) -}}
13+
{{- $svgFormatted := readFile (print $file "-formatted.svg") -}}
14+
{{- $svg := readFile (print $file ".svg") -}}
1415
{{- $downloadable := .Get "downloadable" | default true -}}
1516

16-
{{- if eq $file "img/orange-logo.svg" -}}
17-
{{- /* Line feed */ -}}
18-
{{- $code = replace $code ">" ">\n" -}}
19-
{{- $code = replace $code "{" " {\n" -}}
20-
{{- $code = replace $code "}}" "\n\t}\n}" -}}
21-
{{- $code = replace $code "}@" "}\n@" -}}
22-
{{- $code = replace $code "}<" "}\n<" -}}
23-
24-
{{- /* Indentation */ -}}
25-
{{- $code = replace $code "<path" "\t<path" -}}
26-
{{- $code = replace $code "<defs" "\t<defs" -}}
27-
{{- $code = replace $code "</defs" "\t</defs" -}}
28-
{{- $code = replace $code "<style" "\t\t<style" -}}
29-
{{- $code = replace $code "</style" "\t\t</style" -}}
30-
{{- $code = replace $code "@" "\t\t\t@" -}}
31-
{{- $code = replace $code "#b" "\t\t\t\t#b" -}}
32-
{{- $code = replace $code "#c" "\t\t\t\t#c" -}}
33-
{{- $code = replace $code "display" "\t\t\t\t\tdisplay" -}}
34-
{{- $code = replace $code "}" "\t\t\t}" -}}
35-
36-
{{- /* Content */ -}}
37-
{{- $code = replace $code ":none" ": none" -}}
38-
{{- $code = replace $code "none" "none;" -}}
39-
{{- end -}}
40-
41-
{{- highlight $code "html" "" }}
17+
{{- highlight $svgFormatted "html" "" }}
4218

4319
{{- if eq $downloadable true -}}
4420
{{- /* Get filename */ -}}
45-
{{ $output := split $file "/" }}
21+
{{ $output := split (print $file ".svg") "/" }}
4622
{{ $output = last 1 $output }}
4723

4824
{{- /* Get filesize */ -}}

0 commit comments

Comments
 (0)