fix(docs-infra): improve the layout and appearance of the "Press kit" page (#40945)
This commit improves the layout and appearance of the "Press kit" page. Most notable changes include: - Center content and limit max width to 50em (which is 50px by default). - Remove uppercase transform for headings. - Use a two-column layout for icons (instead of one icon per row). - Show "download" icons next to download links. Before (wide): ![presskit page (wide) before][1] Before (narrow 1/2): ![presskit page (narrow 1/2) before][2] Before (narrow 2/2): ![presskit page (narrow 2/2) before][3] After (wide): ![presskit page (wide) after][4] After (narrow 1/2): ![presskit page (narrow 1/2) after][5] After (narrow 2/2): ![presskit page (narrow 2/2) after][6] This change is based on code from #36045. [1]: https://user-images.githubusercontent.com/8604205/108739632-80d79900-753d-11eb-8ddc-ac542ec5b3ac.png [2]: https://user-images.githubusercontent.com/8604205/108739641-82a15c80-753d-11eb-9b20-8119ad117460.png [3]: https://user-images.githubusercontent.com/8604205/108739643-83d28980-753d-11eb-8afa-2d7a5e87d586.png [4]: https://user-images.githubusercontent.com/8604205/108739638-8208c600-753d-11eb-99bb-ea119640de39.png [5]: https://user-images.githubusercontent.com/8604205/108739642-8339f300-753d-11eb-9b25-5c1988adb1dd.png [6]: https://user-images.githubusercontent.com/8604205/108739645-846b2000-753d-11eb-8ef3-b6a8b7c6d1ff.png Co-authored-by: Stefanie Fluin <sjtrimble@gmail.com> PR Close #40945
This commit is contained in:
George Kalpakas
Zach Arend
parent
284af7308b
commit
78a70498b5
|
|
@ -2,589 +2,557 @@
|
||||||
<h1 class="banner-headline no-toc no-anchor">Press kit</h1>
|
<h1 class="banner-headline no-toc no-anchor">Press kit</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<article class="presskit-container">
|
<article class="center-layout presskit-container">
|
||||||
<div class="presskit-row">
|
<!-- Angular Logo Section -->
|
||||||
<div class="presskit-inner">
|
<div class="presskit-section">
|
||||||
<div>
|
<h2>Official Angular Logo</h2>
|
||||||
<h2>ANGULAR LOGO</h2>
|
|
||||||
<p>
|
<p>
|
||||||
The logo graphics available for download on this page are provided under
|
The logo graphics available for download on this page are provided under
|
||||||
<a class="cc-by-anchor" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
<a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||||
This means that you can pretty much do what you like with it including printing it on shirts, creating your own variations, or getting it tattooed over your navel.
|
This means that you can pretty much do what you like with it including printing it on shirts, creating your own
|
||||||
|
variations, or getting it tattooed over your navel.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.
|
||||||
</p>
|
</p>
|
||||||
<p>We do ask that you not use the rest of the site graphics in other contexts to avoid confusion.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-group">
|
||||||
<div class="presskit-inner">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="assets/images/logos/angular/angular.svg" alt="Full color logo Angular">
|
<img src="assets/images/logos/angular/angular.svg" alt="Full color logo Angular">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">FULL COLOR LOGO</h3>
|
<h3>Full Color Logo</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Angular Logo (png) - <a href="assets/images/logos/angular/angular.png" download>Download</a></span>
|
<a href="assets/images/logos/angular/angular.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Angular Logo (svg) - <a href="assets/images/logos/angular/angular.svg" download>Download</a></span>
|
<a href="assets/images/logos/angular/angular.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<div>
|
|
||||||
<img src="assets/images/logos/angular/angular_solidBlack.svg" alt="Black logo Angular">
|
<img src="assets/images/logos/angular/angular_solidBlack.svg" alt="Black logo Angular">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">ONE COLOR LOGO</h3>
|
<h3>One Color Logo</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Angular Logo Black (png) - <a href="assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span>
|
<a href="assets/images/logos/angular/angular_solidBlack.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Angular Logo Black (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span>
|
<a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<div>
|
<img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img" alt="Transparent logo Angular">
|
||||||
<img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg" alt="Transparent logo Angular">
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">ONE COLOR INVERSE LOGO</h3>
|
<h3>One Color Inverse Logo</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Angular Logo White Semi-Transparent (png) - <a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span>
|
<a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Angular Logo Semi-Transparent (svg) - <a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span>
|
<a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="presskit-row">
|
|
||||||
<div class="presskit-inner">
|
|
||||||
<div>
|
|
||||||
<h2>BRAND ICONS</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="presskit-row">
|
<!-- Brand Icons Section -->
|
||||||
<div class="presskit-inner">
|
<div class="presskit-section">
|
||||||
|
<h2>Brand Icons</h2>
|
||||||
|
|
||||||
|
<div class="presskit-icon-group">
|
||||||
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/animations.png" alt="Animations Icon">
|
<img src="generated/images/marketing/concept-icons/animations.png" alt="Animations icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">ANIMATIONS</h3>
|
<h3>Animations</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Animations Icon (png) - <a href="generated/images/marketing/concept-icons/animations.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/animations.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Animations Icon (svg) - <a href="generated/images/marketing/concept-icons/animations.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/animations.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/augury.png" alt="Augury Icon">
|
<img src="generated/images/marketing/concept-icons/augury.png" alt="Augury icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">AUGURY</h3>
|
<h3>Augury</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Augury Icon (png) - <a href="generated/images/marketing/concept-icons/augury.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/augury.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Augury Icon (svg) - <a href="generated/images/marketing/concept-icons/augury.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/augury.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/cdk.png" alt="CDK Icon">
|
<img src="generated/images/marketing/concept-icons/cdk.png" alt="CDK icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">COMPONENT DEV KIT (CDK)</h3>
|
<h3>Component Dev Kit (CDK)</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>CDK Icon (png) - <a href="generated/images/marketing/concept-icons/cdk.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/cdk.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>CDK Icon (svg) - <a href="generated/images/marketing/concept-icons/cdk.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/cdk.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/cli.png" alt="CLI Icon">
|
<img src="generated/images/marketing/concept-icons/cli.png" alt="CLI icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">CLI</h3>
|
<h3>CLI (Command Line Interface)</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>CLI Icon (png) - <a href="generated/images/marketing/concept-icons/cli.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/cli.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>CLI Icon (svg) - <a href="generated/images/marketing/concept-icons/cli.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/cli.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/compiler.png" alt="Compiler Icon">
|
<img src="generated/images/marketing/concept-icons/compiler.png" alt="Compiler icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">COMPILER</h3>
|
<h3>Compiler</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Compiler Icon (png) - <a href="generated/images/marketing/concept-icons/compiler.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/compiler.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Compiler Icon (svg) - <a href="generated/images/marketing/concept-icons/compiler.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/compiler.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/components.png" alt="Components Icon">
|
<img src="generated/images/marketing/concept-icons/components.png" alt="Components icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">WEB COMPONENTS</h3>
|
<h3>Web Components</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Web Components Icon (png) - <a href="generated/images/marketing/concept-icons/components.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/components.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Web Components Icon (svg) - <a href="generated/images/marketing/concept-icons/components.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/components.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/forms.png" alt="Forms Icon">
|
<img src="generated/images/marketing/concept-icons/forms.png" alt="Forms icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">FORMS</h3>
|
<h3>Forms</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Forms Icon (png) - <a href="generated/images/marketing/concept-icons/forms.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/forms.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Forms Icon (svg) - <a href="generated/images/marketing/concept-icons/forms.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/forms.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/http.png" alt="HTTP Icon">
|
<img src="generated/images/marketing/concept-icons/http.png" alt="HTTP icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">HTTP</h3>
|
<h3>HTTP</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>HTTP Icon (png) - <a href="generated/images/marketing/concept-icons/http.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/http.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>HTTP Icon (svg) - <a href="generated/images/marketing/concept-icons/http.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/http.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/i18n.png" alt="i18n Icon">
|
<img src="generated/images/marketing/concept-icons/i18n.png" alt="i18n icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">i18n</h3>
|
<h3>i18n</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>HTTP Icon (png) - <a href="generated/images/marketing/concept-icons/i18n.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/i18n.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>HTTP Icon (svg) - <a href="generated/images/marketing/concept-icons/i18n.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/i18n.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/karma.png" alt="Karma Icon">
|
<img src="generated/images/marketing/concept-icons/karma.png" alt="Karma icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">KARMA</h3>
|
<h3>Karma</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Karma Icon (png) - <a href="generated/images/marketing/concept-icons/karma.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/karma.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Karma Icon (svg) - <a href="generated/images/marketing/concept-icons/karma.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/karma.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/labs.png" alt="Labs Icon">
|
<img src="generated/images/marketing/concept-icons/labs.png" alt="Labs icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">LABS</h3>
|
<h3>Angular Labs</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Labs Icon (png) - <a href="generated/images/marketing/concept-icons/labs.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/labs.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Labs Icon (svg) - <a href="generated/images/marketing/concept-icons/labs.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/labs.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/language-services.png" alt="Language Services Icon">
|
<img src="generated/images/marketing/concept-icons/language-services.png" alt="Language services icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">LANGUAGE SERVICES</h3>
|
<h3>Language Services</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Language Services Icon (png) - <a href="generated/images/marketing/concept-icons/language-services.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/language-services.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Language Services Icon (svg) - <a href="generated/images/marketing/concept-icons/language-services.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/language-services.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/material.png" alt="Material Icon">
|
<img src="generated/images/marketing/concept-icons/material.png" alt="Angular Material icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">MATERIAL</h3>
|
<h3>Angular Material</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Material Icon (png) - <a href="generated/images/marketing/concept-icons/material.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/material.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Material Icon (svg) - <a href="generated/images/marketing/concept-icons/material.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/material.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/protractor.png" alt="Protractor Icon">
|
<img src="generated/images/marketing/concept-icons/protractor.png" alt="Protractor icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">PROTRACTOR</h3>
|
<h3>Protractor</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Protractor Icon (png) - <a href="generated/images/marketing/concept-icons/protractor.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/protractor.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Protractor Icon (svg) - <a href="generated/images/marketing/concept-icons/protractor.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/protractor.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/pwa.png" alt="PWA Icon">
|
<img src="generated/images/marketing/concept-icons/pwa.png" alt="PWA icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">PWA</h3>
|
<h3>PWA (Progressive Web App)</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>PWA Icon (png) - <a href="generated/images/marketing/concept-icons/pwa.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/pwa.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>PWA Icon (svg) - <a href="generated/images/marketing/concept-icons/pwa.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/pwa.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/router.png" alt="Router Icon">
|
<img src="generated/images/marketing/concept-icons/router.png" alt="Router icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">ROUTER</h3>
|
<h3>Router</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Router Icon (png) - <a href="generated/images/marketing/concept-icons/router.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/router.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Router Icon (svg) - <a href="generated/images/marketing/concept-icons/router.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/router.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/universal.png" alt="Universal Icon">
|
<img src="generated/images/marketing/concept-icons/universal.png" alt="Universal icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">UNIVERSAL</h3>
|
<h3>Universal</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Universal Icon (png) - <a href="generated/images/marketing/concept-icons/universal.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/universal.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Universal Icon (svg) - <a href="generated/images/marketing/concept-icons/universal.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/universal.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="presskit-row">
|
|
||||||
<div class="presskit-inner">
|
|
||||||
<div>
|
|
||||||
<h2>CONCEPT & FEATURE ICONS</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="presskit-row">
|
<!-- Concept Icons Section -->
|
||||||
<div class="presskit-inner">
|
<div class="presskit-section">
|
||||||
|
<h2>Concept and Feature Icons</h2>
|
||||||
|
|
||||||
|
<div class="presskit-icon-group">
|
||||||
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/dependency-injection.png" alt="Dependency Injection Icon">
|
<img src="generated/images/marketing/concept-icons/dependency-injection.png" alt="Dependency injection icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">DEPENDENCY INJECTION</h3>
|
<h3>Dependency Injection</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Dependency Injection Icon (png) - <a href="generated/images/marketing/concept-icons/dependency-injection.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/dependency-injection.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Dependency Injection Icon (svg) - <a href="generated/images/marketing/concept-icons/dependency-injection.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/dependency-injection.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/lazy-loading.png" alt="Lazy Loading Icon">
|
<img src="generated/images/marketing/concept-icons/lazy-loading.png" alt="Lazy loading icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">LAZY LOADING</h3>
|
<h3>Lazy Loading</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Lazy Loading Icon (png) - <a href="generated/images/marketing/concept-icons/lazy-loading.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/lazy-loading.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Lazy Loading Icon (svg) - <a href="generated/images/marketing/concept-icons/lazy-loading.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/lazy-loading.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/libraries.png" alt="Libraries Icon">
|
<img src="generated/images/marketing/concept-icons/libraries.png" alt="Libraries icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">LIBRARIES</h3>
|
<h3>Libraries</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Libraries Icon (png) - <a href="generated/images/marketing/concept-icons/libraries.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/libraries.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Libraries Icon (svg) - <a href="generated/images/marketing/concept-icons/libraries.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/libraries.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/performance.png" alt="Performance Icon">
|
<img src="generated/images/marketing/concept-icons/performance.png" alt="Performance icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">PERFORMANCE</h3>
|
<h3>Performance</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Performance Icon (png) - <a href="generated/images/marketing/concept-icons/performance.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/performance.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Performance Icon (svg) - <a href="generated/images/marketing/concept-icons/performance.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/performance.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<div class="presskit-icon-item">
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="presskit-image-container">
|
<div class="presskit-image-container">
|
||||||
<img src="generated/images/marketing/concept-icons/templates.png" alt="Templates Icon">
|
<img src="generated/images/marketing/concept-icons/templates.png" alt="Templates icon">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3 class="l-space-left-3">TEMPLATES</h3>
|
<h3>Templates</h3>
|
||||||
<ul class="l-space-left-3">
|
<ul class="presskit-links-container">
|
||||||
<li>
|
<li>
|
||||||
<span>Templates Icon (png) - <a href="generated/images/marketing/concept-icons/templates.png" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/templates.png" download>Download PNG icon</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<span>Templates Icon (svg) - <a href="generated/images/marketing/concept-icons/templates.svg" download>Download</a></span>
|
<a href="generated/images/marketing/concept-icons/templates.svg" download>Download SVG icon</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="presskit-row">
|
|
||||||
<div class="presskit-inner">
|
|
||||||
<div>
|
|
||||||
<h2>PRESS AND MEDIA</h2>
|
|
||||||
<p>For inquiries regarding press and media please contact us at
|
|
||||||
<a href="mailto:press@angular.io">press@angular.io</a>.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<!-- Press and Media Section -->
|
||||||
div.bullets ul {
|
<div class="presskit-section">
|
||||||
list-style-type: disc !important; margin-left: 1em !important;
|
<h2>Press and Media</h2>
|
||||||
}
|
|
||||||
</style>
|
<p>
|
||||||
|
For inquiries regarding press and media please contact us at
|
||||||
|
<a href="mailto:press@angular.io">press@angular.io</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Brand Names Section -->
|
||||||
|
<div class="presskit-section">
|
||||||
|
<h2>Brand Names</h2>
|
||||||
|
|
||||||
<div class="presskit-row">
|
|
||||||
<div class="presskit-inner">
|
|
||||||
<div class="bullets">
|
|
||||||
<h2>BRAND NAMES</h2>
|
|
||||||
<h3>Angular</h3>
|
<h3>Angular</h3>
|
||||||
<p>The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</p>
|
<p>
|
||||||
|
The name <b>Angular</b> represents the work and promises provided to you by the Angular team.
|
||||||
<p>When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular Team.</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
When not specified, Angular is assumed to be referring to the latest and greatest stable version from the Angular
|
||||||
|
Team.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h4>Example</h4>
|
<h4>Example</h4>
|
||||||
<p><b>Version v4.1 now available</b> - We are pleased to announce that the latest release of Angular is now available. Staying up to date is easy!</p>
|
<p>
|
||||||
|
<b>Version v4.1 now available</b> - We are pleased to announce that the latest release of Angular is now
|
||||||
|
available. Staying up to date is easy!
|
||||||
|
</p>
|
||||||
|
|
||||||
<h4>Example</h4>
|
<h4>Example</h4>
|
||||||
|
<p>
|
||||||
<p><b>Correct: </b> "New <code>*ngIf</code> capabilities</b>—new in version 4.0 is the ability to ..."</p>
|
<b>Correct:</b> "New <code>*ngIf</code> capabilities—new in version 4.0 is the ability to ..."
|
||||||
<p><b style="color: red">Incorrect: </b> "New <code>*ngIf</code> capabilities in Angular 4</b>—Angular 4 introduces the ability to ..."</p>
|
</p>
|
||||||
|
<p>
|
||||||
<p><b>Reasoning</b></p>
|
<b class="error-text">Incorrect:</b> "New <code>*ngIf</code> capabilities in Angular 4—Angular 4 introduces
|
||||||
|
the ability to ..."
|
||||||
<p>By not using “Angular 4” in the title, the content still feels applicable and useful after version 5, 6, 7 have been released, as the syntax is unlikely to change in the short and medium term.</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
<b>Reasoning</b>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
By not using "Angular 4" in the title, the content still feels applicable and useful after version 5, 6, 7 have
|
||||||
|
been released, as the syntax is unlikely to change in the short and medium term.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h3>AngularJS</h3>
|
<h3>AngularJS</h3>
|
||||||
|
<p>
|
||||||
<p><b>AngularJS</b> is the v1.x series of work and promises provided by the Angular team.</p>
|
<b>AngularJS</b> is the v1.x series of work and promises provided by the Angular team.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h4>Examples</h4>
|
<h4>Examples</h4>
|
||||||
<ol>
|
<ul>
|
||||||
<li>AngularJS is one of the most used framework on the web today (by number of projects).</li>
|
<li>AngularJS is one of the most used framework on the web today (by number of projects).</li>
|
||||||
<li>Millions of developers are currently building with AngularJS.</li>
|
<li>Millions of developers are currently building with AngularJS.</li>
|
||||||
<li>Developers are beginning to upgrade from AngularJS to Angular.</li>
|
<li>Developers are beginning to upgrade from AngularJS to Angular.</li>
|
||||||
<li>I’m upgrading my application from AngularJS to Angular.</li>
|
<li>I’m upgrading my application from AngularJS to Angular.</li>
|
||||||
<li>I'm using AngularJS Material on this project.</li>
|
<li>I'm using AngularJS Material on this project.</li>
|
||||||
</ol>
|
</ul>
|
||||||
|
|
||||||
<p>AngularJS projects should use the
|
<p>
|
||||||
<a href="assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo">
|
AngularJS projects should use the
|
||||||
original AngularJS logo</a> / icon, and not the Angular icon.</p>
|
<a href="assets/images/logos/angularjs/AngularJS-Shield.svg" title="AngularJS logo">original AngularJS logo</a> /
|
||||||
|
icon, and not the Angular icon:
|
||||||
<img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" height="128" width="128">
|
</p>
|
||||||
|
<img src="assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS logo" style="margin-left: 20px;">
|
||||||
|
|
||||||
<h3>Angular Material</h3>
|
<h3>Angular Material</h3>
|
||||||
|
<p>
|
||||||
<p>This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p>
|
This is the work being performed by the Angular team to provide Material Design components for Angular
|
||||||
|
applications.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h3>AngularJS Material</h3>
|
<h3>AngularJS Material</h3>
|
||||||
|
<p>
|
||||||
<p>This is the work being performed by the Angular team on Material Design components that are compatible with AngularJS.</p>
|
This is the work being performed by the Angular team on Material Design components that are compatible with
|
||||||
|
AngularJS.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h3>3rd Party Projects</h3>
|
<h3>3rd Party Projects</h3>
|
||||||
|
<p>
|
||||||
<p><b>X for Angular</b></p>
|
<b>X for Angular</b>
|
||||||
|
</p>
|
||||||
<p>3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to events or meetup groups.</p>
|
<p>
|
||||||
|
3rd parties should use the terminology “X for Angular” or “ng-X” for software projects. Projects should avoid the
|
||||||
<p>Developers should avoid using Angular version numbers in project names, as this will artificially limit their projects by tying them to a point in time of Angular, or will require renaming over time.</p>
|
use of Angular X (e.g. Angular UI Toolkit), as it could create authorship confusion. This rule does not apply to
|
||||||
|
events or meetup groups.
|
||||||
<p>Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.</p>
|
</p>
|
||||||
|
<p>
|
||||||
|
Developers should avoid using Angular version numbers in project names, as this will artificially limit their
|
||||||
|
projects by tying them to a point in time of Angular, or will require renaming over time.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Where a codename or shortname is used, such as on npm or github, some are acceptable, some are not acceptable.
|
||||||
|
</p>
|
||||||
|
|
||||||
<b>Do not use</b>
|
<b>Do not use</b>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -598,7 +566,10 @@
|
||||||
<li><code>angular-</code></li>
|
<li><code>angular-</code></li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with components and directives provided by the Angular team.</p>
|
<p>
|
||||||
|
As always, component and directive selectors should not begin with “ng-” selectors as this will conflict with
|
||||||
|
components and directives provided by the Angular team.
|
||||||
|
</p>
|
||||||
|
|
||||||
<h4>Examples</h4>
|
<h4>Examples</h4>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -608,22 +579,17 @@
|
||||||
<li><code>ReallyCoolTool</code> for AngularJS.</li>
|
<li><code>ReallyCoolTool</code> for AngularJS.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="presskit-row">
|
<!-- Terminology Section -->
|
||||||
<div class="presskit-inner">
|
<div class="presskit-section">
|
||||||
<div class="bullets">
|
<h2>Terminology</h2>
|
||||||
<h2>TERMS WE USE</h2>
|
|
||||||
<p>
|
<p>
|
||||||
We often use terms that are not part of our brand,
|
We often use terms that are not part of our brand, but we want to remain consistent on the styling and use of them
|
||||||
but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified.
|
to prevent confusion and to appear unified.
|
||||||
</p>
|
</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li>Ahead of Time compilation (AOT)</li>
|
<li>Ahead of Time compilation (AOT)</li>
|
||||||
<li>Just in Time compilation (JIT)</li>
|
<li>Just in Time compilation (JIT)</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -227,3 +227,7 @@ code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
color: $brightred;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,11 @@ body,
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.center-layout {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 50em;
|
||||||
|
}
|
||||||
|
|
||||||
.github-links + .content h1 {
|
.github-links + .content h1 {
|
||||||
max-width: 90%;
|
max-width: 90%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,60 @@
|
||||||
.presskit-container {
|
.presskit-container {
|
||||||
padding: 0 32px 32px 32px;
|
padding: 0 32px 32px 32px;
|
||||||
|
|
||||||
h2 {
|
|
||||||
color: #37474F;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-space-left-3 {
|
|
||||||
margin-left: 3 * 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cc-by-anchor {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: grey !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presskit-row {
|
|
||||||
margin: 48px 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presskit-inner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
@media(max-width: 599px) {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-weight: 500;
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
color: #455A64;
|
|
||||||
|
|
||||||
@media(max-width: 599px) {
|
|
||||||
padding-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.transparent-img-bg {
|
|
||||||
margin-top: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 128px;
|
|
||||||
height: 128px;
|
|
||||||
background-color: #34474F;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
|
|
||||||
@media(max-width: 599px) {
|
|
||||||
padding: 0 !important;
|
|
||||||
margin: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin: 0 0 8px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.presskit-image-container {
|
|
||||||
@media(max-width: 599px) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
height: 128px;
|
height: 128px;
|
||||||
width: auto;
|
width: auto;
|
||||||
margin-bottom: 8px * 2;
|
}
|
||||||
|
|
||||||
|
.presskit-section {
|
||||||
|
.presskit-icon-group {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.presskit-icon-item {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin: 1rem;
|
||||||
|
width: calc(50% - 2rem);
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.presskit-image-container {
|
||||||
|
flex: none;
|
||||||
|
margin-right: 2rem;
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
width: 100%;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transparent-img {
|
||||||
|
background-color: $deepgray;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.presskit-links-container {
|
||||||
|
list-style-type: none;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
font-family: 'Material Icons';
|
||||||
|
content: 'cloud_download';
|
||||||
|
@include font-size(24);
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue