Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit 8cf36ce

Browse files
taylonrCaerusKaru
authored andcommitted
docs: add a Getting Started section to the README (#1007)
1 parent 6f43cf6 commit 8cf36ce

File tree

1 file changed

+41
-10
lines changed

1 file changed

+41
-10
lines changed

README.md

Lines changed: 41 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,52 @@
1-
# Angular Flex-Layout
1+
# Angular Flex-Layout
22

33
[![npm version](https://badge.fury.io/js/%40angular%2Fflex-layout.svg)](https://www.npmjs.com/package/%40angular%2Fflex-layout)
44
[![Build status](https://circleci.com/gh/angular/flex-layout.svg?style=svg)](https://circleci.com/gh/angular/flex-layout)
55
[![Gitter](https://badges.gitter.im/angular/flex-layout.svg)](https://gitter.im/angular/flex-layout)
66

7-
Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery.
8-
This module provides Angular developers with component layout features using a
9-
custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.
7+
Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery.
8+
This module provides Angular developers with component layout features using a
9+
custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.
1010

11-
The Flex Layout engine intelligently automates the process of applying appropriate
12-
Flexbox CSS to browser view hierarchies. This automation also addresses many of the
13-
complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.
11+
The Flex Layout engine intelligently automates the process of applying appropriate
12+
Flexbox CSS to browser view hierarchies. This automation also addresses many of the
13+
complexities and workarounds encountered with the traditional, manual, CSS-only application of box CSS.
1414

15-
The **real** power of Flex Layout, however, is its **responsive** engine. The
16-
[Responsive API](https://github.com/angular/flex-layout/wiki/Responsive-API) enables developers to easily specify
15+
The **real** power of Flex Layout, however, is its **responsive** engine. The
16+
[Responsive API](https://github.com/angular/flex-layout/wiki/Responsive-API) enables developers to easily specify
1717
different layouts, sizing, visibilities for different viewport sizes and display devices.
1818

19+
---
20+
### Getting Started
21+
22+
Start by installing the Angular Layout library from `npm`
23+
24+
`npm i -s @angular/flex-layout @angular/cdk`
25+
26+
Next, you'll need to import the Layout module in your app's module.
27+
28+
**app.module.ts**
29+
30+
```ts
31+
32+
import { FlexLayoutModule } from '@angular/flex-layout';
33+
...
34+
35+
@NgModule({
36+
...
37+
imports: [ FlexLayoutModule ],
38+
...
39+
});
40+
```
41+
42+
After that is configured, you can use the Angular Layout attributes in your HTML tags for flex layout:
43+
```html
44+
<div fxLayout="row" fxLayoutAlign="space-between">
45+
</div>
46+
```
47+
48+
Check out [all of the available options](https://github.com/angular/flex-layout/wiki/Declarative-API-Overview) for using Angular Layout in your application.
49+
1950
---
2051

2152
### Quick Links
@@ -32,7 +63,7 @@ Developers
3263
* [Builds + Fast Start](https://github.com/angular/flex-layout/wiki/Fast-Starts)
3364
* [Integration with Angular CLI](https://github.com/angular/flex-layout/wiki/Using-Angular-CLI)
3465

35-
Demos
66+
Demos
3667

3768
* [Explore Online](https://tburleson-layouts-demos.firebaseapp.com/)
3869
* [Source Code](https://github.com/angular/flex-layout/blob/master/src/apps/demo-app/src/app/app.module.ts)

0 commit comments

Comments
 (0)