https://github.com/adominguez/app-page
This component shows a structure of page with the possibility of add a markdown file inside
https://github.com/adominguez/app-page
page polymer-element structure
Last synced: 6 months ago
JSON representation
This component shows a structure of page with the possibility of add a markdown file inside
- Host: GitHub
- URL: https://github.com/adominguez/app-page
- Owner: adominguez
- License: mit
- Created: 2017-08-09T17:58:37.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-12-12T18:55:41.000Z (over 8 years ago)
- Last Synced: 2025-04-13T16:12:19.344Z (about 1 year ago)
- Topics: page, polymer-element, structure
- Language: HTML
- Size: 104 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# \
`app-page` shows a structure of page with the option of add a markdown file inside for show all information in a page.
## Installing the component
- For install it, clone the repository in your local machine
```
$ git clone https://github.com/adominguez/app-page.git
```
- Do a npm install and bower install
```
$ npm install && bower install
```
## Serving the component
You can serve the component with:
```
$ gulp serve
```
__Example__
```html
```
__markdown file Example__
```html
```
__Responsive example__
```html
```
This component is responsive at 960px. Then the right content goes down in the page
## Slot
This component has three `slot`:
| slot | function |
|:------------------ | --------------------------------------:|
| left-content | Show the information in the page |
| left-content-down | Show information down of left-content |
| right-content | Show the right sidebar |
## Styling
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
|:-------------------------------------------- |:--------------------------------------------------- | -------:|
| --app-page-first-color | color for first color | #212121 |
| --app-page-second-color | color for second color | #666 |
| --app-page-blockquote-bg-color | background color for blockquote | #eeeeee |
| --app-page-h1 | empty mixin for h1 | {} |
| --app-page-h2 | empty mixin for h2 | {} |
| --app-page-h3 | empty mixin for h3 | {} |
| --app-page-h4 | empty mixin for h4 | {} |
| --app-page-h5 | empty mixin for h5 | {} |
| --app-page-h6 | empty mixin for h6 | {} |
| --app-page-p | empty mixin for p | {} |
| --app-page-blockquote | empty mixin for blockquote | {} |
| --app-page-blockquote-p | empty mixin for blockquote p | {} |
| --app-page-code | empty mixin for code | {} |
| --app-page-list | empty mixin for list | {} |
| --app-page-list-li | empty mixin for list li | {} |
| --app-page-link-color | color for link | #FF4081 |
| --app-page-link | empty mixin for link | {} |
| --app-page-link-hover-color | color for link hover | #212121 |
| --app-page-link-hover | empty mixin for link hover | {} |
| --app-page-link-visited | empty mixin for link visited | {} |
| --app-page-card | empty mixin for card | {} |
| --app-page-bg-color | background for host | #fafafa |
| --app-page | empty mixin for host | {} |
| --app-page-panel-right-width | width for panel right | 200px |
| --app-page-panel-left | empty mixin for panel-left | {} |
| --app-page-title | empty mixin for title | {} |
| --app-page-subtitle | empty mixin for sutitle | {} |
| --app-page-title-left-content | empty mixin for left content | {} |
| --app-page-panel-right-b-l-color | border left for panel-right | #e5e5e5 |
| --app-page-panel-right-bg-color | background color for panel-right | #fff |
| --app-page-panel-right | empty mixin for panel-right | {} |
| --app-page-title-right-content | empty mixin for right-content | {} |
| --app-page-hide-panel-right | empty mixin for host([hide-panel-right]) | {} |
| --app-page-hide-panel-right-panel-left | empty mixin for host([hide-panel-right]) panel-left | {} |
| --app-page-responsive | empty mixin for host([responsive]) | {} |
| --app-page-responsive-panel-left | empty mixin for host([responsive]) panel-left | {} |
| --app-page-responsive-panel-right-b-t-color | border top for host([hide-panel-right]) panel-right | #e5e5e5 |
| --app-page-responsive-panel-right | empty mixin for host([responsive]) panel-right | {} |