feat(aio): add presskit and correct "/logos/angular2/"
This commit is contained in:
Ward Bell
Pete Bacon Darwin
parent
c05a8cf7bb
commit
0aa90c6be4
|
|
@ -728,8 +728,8 @@ Webpack techniques covered in this guide.
|
|||
</code-tabs>
|
||||
|
||||
The <code>app.component.html</code> displays this downloadable Angular logo
|
||||
<a href="https://raw.githubusercontent.com/angular/angular.io/master/publicassets/images/logos/angular2/angular.png" target="_blank">
|
||||
<img src="assets/images/logos/angular2/angular.png" height="40px" title="download Angular logo"></a>.
|
||||
<a href="https://raw.githubusercontent.com/angular/angular.io/master/publicassets/images/logos/angular/angular.png" target="_blank">
|
||||
<img src="assets/images/logos/angular/angular.png" height="40px" title="download Angular logo"></a>.
|
||||
Create a folder called `images` under the project's `assets` folder, then right-click (Cmd+click on Mac)
|
||||
on the image and download it to that folder.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<header class="background-sky l-relative">
|
||||
<div class="hero background-superhero-paper is-large"><img
|
||||
src="assets/images/logos/angular2/angular.svg" class="hero-logo"/>
|
||||
src="assets/images/logos/angular/angular.svg" class="hero-logo"/>
|
||||
<h1 class="text-headline">One framework.<br>Mobile & desktop.</h1><a
|
||||
href="/docs/ts/latest/quickstart.html" md-button="md-button"
|
||||
class="hero-cta mat-raised button button-large button-plain">Get Started</a></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,194 @@
|
|||
<div class="presskit-container l-space-neg-top-8">
|
||||
<div class="presskit-row">
|
||||
<div class="presskit-inner">
|
||||
<div>
|
||||
<h2>ANGULAR LOGO</h2>
|
||||
<p>
|
||||
The logo graphics available for download on this page are provided under
|
||||
<a class="cc-by-anchor" target="_blank" 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.
|
||||
</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-inner">
|
||||
<div class="presskit-image-container">
|
||||
<img src="assets/images/logos/angular/angular.svg">
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="l-space-left-3">FULL COLOR LOGO</h3>
|
||||
<ul class="l-space-left-3">
|
||||
<li>
|
||||
<span>Angular Logo (png) - <a href="assets/images/logos/angular/angular.png" download>Download</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Angular Logo (svg) - <a href="assets/images/logos/angular/angular.svg" download>Download</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="presskit-row">
|
||||
<div class="presskit-inner">
|
||||
<div class="presskit-image-container">
|
||||
<div>
|
||||
<img src="assets/images/logos/angular/angular_solidBlack.svg">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="l-space-left-3">ONE COLOR LOGO</h3>
|
||||
<ul class="l-space-left-3">
|
||||
<li>
|
||||
<span>Angular Logo Black (png) - <a href="assets/images/logos/angular/angular_solidBlack.png" download>Download</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Angular Logo Black (svg) - <a href="assets/images/logos/angular/angular_solidBlack.svg" download>Download</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="presskit-row">
|
||||
<div class="presskit-inner">
|
||||
<div class="presskit-image-container">
|
||||
<div>
|
||||
<img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-bg">
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="l-space-left-3">ONE COLOR INVERSE LOGO</h3>
|
||||
<ul class="l-space-left-3">
|
||||
<li>
|
||||
<span>Angular Logo White Semi-Transparent (png) - <a href="assets/images/logos/angular/angular_whiteTransparent.png" download>Download</a></span>
|
||||
</li>
|
||||
<li>
|
||||
<span>Angular Logo Semi-Transparent (svg) - <a href="assets/images/logos/angular/angular_whiteTransparent.svg" download>Download</a></span>
|
||||
</li>
|
||||
</ul>
|
||||
</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>
|
||||
|
||||
<style>
|
||||
div.bullets ul {
|
||||
list-style-type: disc !important; margin-left: 1em !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="presskit-row">
|
||||
<div class="presskit-inner">
|
||||
<div class="bullets">
|
||||
<h2>BRAND NAMES</h2>
|
||||
<h3>Angular</h3>
|
||||
<p>The name <b>Angular</b> represents the work and promises provided to you by the Angular team.</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>
|
||||
<p><b>Version 4.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>
|
||||
<p><b>Correct</b></p>
|
||||
|
||||
<p><b>New *ngIf Capabilities</b> - New in version 4.0 is the ability to use additional syntax to create local variables. This can be very helpful in cases such as working with observables …</p>
|
||||
|
||||
<p><b>Incorrect</b></p>
|
||||
|
||||
<p><b>New *ngIf Capabilities In Angular 4</b> - Angular 4 introduces the ability to use additional syntax to create local variables. This can be very helpful in cases such as working with observables …</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>
|
||||
|
||||
<p><b>AngularJS</b> is the 1.x series of work and promises provided by the Angular team.</p>
|
||||
|
||||
<h4>Examples</h4>
|
||||
<ol>
|
||||
<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>Developers are beginning to upgrade 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>
|
||||
</ol>
|
||||
|
||||
<p>AngularJS projects should use the
|
||||
<a href="/assets/images/logos/angularjs/AngularJS-Shield.svg" target="_blank" title="AngularJS logo">
|
||||
original AngularJS logo</a> / icon, and not the Angular icon.</p>
|
||||
|
||||
<img src="/assets/images/logos/angularjs/AngularJS-Shield.svg" alt="AngularJS Logo" style="margin-left:20px;" >
|
||||
|
||||
<h3>Angular Material</h3>
|
||||
|
||||
<p>This is the work being performed by the Angular team to provide Material Design components for Angular applications.</p>
|
||||
|
||||
<h3>AngularJS Material</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<b>X for Angular</b>
|
||||
<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>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>
|
||||
<ul>
|
||||
<li>ng2-</li>
|
||||
<li>angular2-</li>
|
||||
</ul>
|
||||
|
||||
<b>OK to use</b>
|
||||
<ul>
|
||||
<li>ng-</li>
|
||||
<li>angular-</li>
|
||||
</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>
|
||||
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li>The ng-BE team just launched ng-health to help developers track their own health.</li>
|
||||
<li>I’m going to use NativeScript for Angular to take advantage of native UI widgets.</li>
|
||||
<li>ReallyCoolTool for Angular.</li>
|
||||
<li>ReallyCoolTool for AngularJS.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="presskit-row">
|
||||
<div class="presskit-inner">
|
||||
<div class="bullets">
|
||||
<h2>TERMS WE USE</h2>
|
||||
<p>
|
||||
We often use terms that are not part of our brand,
|
||||
but we want to remain consistent on the styling and use of them to prevent confusion and to appear unified.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Ahead of Time Compilation (AOT)</li>
|
||||
<li>Just in Time Compilation (JIT)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 883 B After Width: | Height: | Size: 883 B |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
Before Width: | Height: | Size: 667 B After Width: | Height: | Size: 667 B |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 1021 B After Width: | Height: | Size: 1021 B |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
|
@ -86,18 +86,18 @@ footer::after {
|
|||
left: 0;
|
||||
right: 0;
|
||||
background:
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 168px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 336px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 504px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 672px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 840px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 1008px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1176px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 1344px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1512px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top left 1680px repeat-y,
|
||||
url('../src/assets/images/logos/angular2/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 168px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 336px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 504px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 672px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 840px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1008px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1176px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1344px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1512px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top left 1680px repeat-y,
|
||||
url('../src/assets/images/logos/angular/angular_whiteTransparent.png') top 80px left 1848px repeat-y;
|
||||
opacity: 0.1;
|
||||
background-size: 160px auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,4 +7,5 @@
|
|||
@import 'alert';
|
||||
@import 'filetree';
|
||||
@import 'images';
|
||||
@import 'table';
|
||||
@import 'table';
|
||||
@import 'presskit';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,73 @@
|
|||
$unit: 8px;
|
||||
.presskit-container {
|
||||
h2 {
|
||||
color: #37474F;
|
||||
}
|
||||
|
||||
.l-space-left-3 {
|
||||
margin-left: 3 * 8px;
|
||||
}
|
||||
|
||||
.cc-by-anchor {
|
||||
text-decoration: underline;
|
||||
color: grey !important;
|
||||
}
|
||||
|
||||
.presskit-row {
|
||||
margin: $unit * 6 0;
|
||||
width: 100%;
|
||||
|
||||
.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: $unit * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-img-bg {
|
||||
margin-top: 10px;
|
||||
border-radius: 4px;
|
||||
width: 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 $unit 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.presskit-image-container {
|
||||
|
||||
@media(max-width: 599px) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 128px;
|
||||
margin-bottom: $unit * 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue