features page and code/table fixes
This commit is contained in:
Stefanie Fluin
Pete Bacon Darwin
parent
2da0f1639f
commit
ad9a3a2d3b
|
|
@ -1,64 +1,87 @@
|
|||
<header class="hero background-sky"><h1 class="hero-title ">Features & Benefits</h1>
|
||||
<div class="clear"></div>
|
||||
</header>
|
||||
<h1>Features & Benefits</h1>
|
||||
<article class="l-content ">
|
||||
<div>
|
||||
<div><h2 class="text-headline">Cross Platform</h2>
|
||||
<div class="feature-row">
|
||||
<div class="feature"><h3>Progressive web apps</h3>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Progressive Web Apps</h5>
|
||||
<p class="text-body">Use modern web platform capabilities to deliver app-like experiences.
|
||||
High performance, offline, and zero-step installation.</p></div>
|
||||
<div class="feature"><h3>Native</h3>
|
||||
<p class="text-body">Build native mobile apps with strategies from Ionic Framework,
|
||||
NativeScript, and React Native.</p></div>
|
||||
<div class="feature"><h3>Desktop</h3>
|
||||
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using
|
||||
the same Angular methods you've learned for the web plus the ability to access native OS
|
||||
APIs.</p></div>
|
||||
High performance, offline, and zero-step installation.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Native</h5>
|
||||
<p class="text-body">Build native mobile apps with strategies from Ionic Framework, NativeScript, and React Native.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Desktop</h5>
|
||||
<p class="text-body">Create desktop-installed apps across Mac, Windows, and Linux using the same Angular methods you've learned for the web plus the ability to access native OS APIs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-headline">Speed and Performance</h2>
|
||||
<div class="feature-row">
|
||||
<div class="feature"><h3>Code generation</h3>
|
||||
<p class="text-body">Angular turns your templates into code that's highly optimized for
|
||||
today's JavaScript virtual machines, giving you all the benefits of hand-written code
|
||||
with the productivity of a framework.</p></div>
|
||||
<div class="feature"><h3>Universal</h3>
|
||||
<p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and
|
||||
other servers for near-instant rendering in just HTML and CSS. Also paves the way for
|
||||
sites that optimize for SEO.</p></div>
|
||||
<div class="feature"><h3>Code splitting</h3>
|
||||
<p class="text-body">Angular apps load quickly with the new Component Router, which
|
||||
delivers automatic code-splitting so users only load code required to render the view
|
||||
they request.</p></div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Code Generation</h5>
|
||||
<p class="text-body">Angular turns your templates into code that's highly optimized for today's JavaScript virtual machines, giving you all the benefits of hand-written code with the productivity of a framework.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Universal</h5>
|
||||
<p class="text-body">Serve the first view of your application on node.js, .NET, PHP, and other servers for near-instant rendering in just HTML and CSS. Also paves the way for sites that optimize for SEO.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Code Splitting</h5>
|
||||
<p class="text-body">Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h2 class="text-headline">Productivity</h2>
|
||||
<div class="feature-row">
|
||||
<div class="feature"><h3>Templates</h3>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Templates</h5>
|
||||
<p class="text-body">Quickly create UI views with simple and powerful template syntax.</p>
|
||||
</div>
|
||||
<div class="feature"><h3>Angular CLI</h3>
|
||||
<p class="text-body">Command line tools: start building fast, add components and tests,
|
||||
then instantly deploy.</p></div>
|
||||
<div class="feature"><h3>IDEs</h3>
|
||||
<p class="text-body">Get intelligent code completion, instant errors, and other feedback
|
||||
in popular editors and IDEs.</p></div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Angular CLI</h5>
|
||||
<p class="text-body">Command line tools: start building fast, add components and tests, then instantly deploy.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>IDEs</h5>
|
||||
<p class="text-body">Get intelligent code completion, instant errors, and other feedback in popular editors and IDEs.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-headline">Full Development Story</h2>
|
||||
<div class="feature-row">
|
||||
<div class="feature"><h3>Testing</h3>
|
||||
<p class="text-body">With Karma for unit tests, you can know if you've broken things every
|
||||
time you save. And Protractor makes your scenario tests run faster and in a stable
|
||||
manner.</p></div>
|
||||
<div class="feature"><h3>Animation</h3>
|
||||
<p class="text-body">Create high-performance, complex choreographies and animation
|
||||
timelines with very little code through Angular's intuitive API.</p></div>
|
||||
<div class="feature"><h3>Accessibility</h3>
|
||||
<p class="text-body">Create accessible applications with ARIA-enabled components,
|
||||
developer guides, and built-in a11y test infrastructure.</p></div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Testing</h5>
|
||||
<p class="text-body">With Karma for unit tests, you can know if you've broken things every time you save. And Protractor makes your scenario tests run faster and in a stable manner.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Animation</h5>
|
||||
<p class="text-body">Create high-performance, complex choreographies and animation timelines with very little code through Angular's intuitive API.</p>
|
||||
</div>
|
||||
|
||||
<div class="feature">
|
||||
<h5>Accessibility</h5>
|
||||
<p class="text-body">Create accessible applications with ARIA-enabled components, developer guides, and built-in a11y test infrastructure.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button"
|
||||
class="button button-large button-shield mat-raised mat-primary">Get
|
||||
Started</a></div>
|
||||
|
||||
<div class="cta-bar"><a href="guide/quickstart" md-button="md-button" class="button button-large button-shield mat-raised mat-primary">Get Started</a></div>
|
||||
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,12 @@
|
|||
.feature-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin: 24px 0 0;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h2.text-headline {
|
||||
font-size: 28px;
|
||||
margin-top: 10px;
|
||||
color: #37474F;
|
||||
}
|
||||
}
|
||||
|
||||
.features-desc {
|
||||
|
|
@ -19,6 +14,6 @@
|
|||
}
|
||||
|
||||
.feature {
|
||||
max-width: 350px;
|
||||
margin-bottom: $unit * 4;
|
||||
max-width: 300px;
|
||||
margin: 0 24px 32px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,23 @@ table {
|
|||
}
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
vertical-align: middle;
|
||||
border-color: inherit;
|
||||
|
||||
tr {
|
||||
display: table-row;
|
||||
vertical-align: inherit;
|
||||
border-color: inherit;
|
||||
}
|
||||
|
||||
th {
|
||||
background: $offwhite;
|
||||
border-bottom: 1px solid $lightgray;
|
||||
color: $darkgray;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 0 24px;
|
||||
padding: 8px 32px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue