Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sterlp/admin-template
Simple Angular 12 Material Bootstrap Admin Template
https://github.com/sterlp/admin-template
admin-dashboard admin-ui angular bootstrap bootstrap4 coreui material template typescript
Last synced: 10 days ago
JSON representation
Simple Angular 12 Material Bootstrap Admin Template
- Host: GitHub
- URL: https://github.com/sterlp/admin-template
- Owner: sterlp
- License: mit
- Created: 2019-07-28T12:44:19.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T04:56:58.000Z (almost 2 years ago)
- Last Synced: 2024-04-16T07:09:13.792Z (7 months ago)
- Topics: admin-dashboard, admin-ui, angular, bootstrap, bootstrap4, coreui, material, template, typescript
- Language: TypeScript
- Homepage:
- Size: 15.7 MB
- Stars: 18
- Watchers: 3
- Forks: 7
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Goal
Simple admin UI based on bootstrap but be able to use material design too.
**[Launch Live Preview](https://sterlp.github.io/admin-template/)**
- run as docker `docker run -p 8080:80 sterlp/admin-template:latest`
# Included
- [Core UI](https://coreui.io/) based on Bootstrap
- [Angular Material](https://material.angular.io/)
# Optional
- add angular bootstrap
- [ngx-bootstrap](https://valor-software.com/ngx-bootstrap/#/documentation#getting-started) `npm install --save ngx-bootstrap` or
- [ng-bootstrap](https://ng-bootstrap.github.io/#/getting-started) `ng add @ng-bootstrap/ng-bootstrap`
# Links
- [Admin-Template Core-UI 3](https://coreui.io/docs/getting-started/introduction/) based on Core-UI 3.4
# Setup this Admin Template on your own
## New Project
- new project `ng new admin-template`
use `scss` for styles
## Add Angular Material
- `ng add @angular/material`
- select `Y` to add angular animations
- `npm install material-icons --save`
## Add Core UI
- add coreui `npm install @coreui/coreui --save`
- add some icons `npm install @coreui/icons simple-line-icons font-awesome --save`
## styles `angular.json`
add to styles:
```json
"styles": [
"node_modules/@coreui/icons/css/free.css",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/simple-line-icons/css/simple-line-icons.css",
"src/assets/styles.scss",
...
],
```
### local usesage of material icons
```
npm install --save material-icons
```
add in `styles.scss` https://www.npmjs.com/package/material-icons
```scss
$material-icons-font-path: '~material-icons/iconfont/';
@import '~material-icons/iconfont/material-icons.scss';
```
remove from `index.html`
```html
```
### local usesage of robo fonts
```
npm install --save roboto-fontface
```
add in `styles.scss` https://www.npmjs.com/package/material-icons
```scss
$roboto-font-path: "~roboto-fontface/fonts" !default;
@import "~roboto-fontface/css/roboto/sass/roboto-fontface";
```
remove from `index.html`
```html
```
add css class to `body` or main `div``
```
class="mat-typography"
```
# Links
- https://ng-bootstrap.github.io
- https://valor-software.com/ngx-bootstrap
- https://coreui.io/docs
- https://material.angular.io
- https://gist.github.com/timbophillips/455ac41659fddcd774c5550650665b66
- https://github.com/peaceiris/actions-gh-pages
## Icons Links
- https://fontawesome.com/v4.7.0/icons/
- https://coreui.io/docs/icons/
- https://material.io/resources/icons/
## Used schematics
- Table: https://material.angular.io/guide/schematics
## Docker
- npm run build:docker
- docker push sterlp/admin-template
# Copyright
- CoreUI Code released under the MIT license
- https://getbootstrap.com/docs/4.0/about/license/