Skip to content

Latest commit

 

History

History
108 lines (87 loc) · 3.06 KB

README.md

File metadata and controls

108 lines (87 loc) · 3.06 KB

GitHub Actions status

Goal

Simple admin UI based on bootstrap but be able to use material design too.

Launch Live Preview

  • run as docker docker run -p 8080:80 sterlp/admin-template:latest

Included

Optional

Links

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:

            "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

$material-icons-font-path: '~material-icons/iconfont/';
@import '~material-icons/iconfont/material-icons.scss';

remove from index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

local usesage of robo fonts

npm install --save roboto-fontface

add in styles.scss https://www.npmjs.com/package/material-icons

$roboto-font-path: "~roboto-fontface/fonts" !default;
@import "~roboto-fontface/css/roboto/sass/roboto-fontface";

remove from index.html

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">

add css class to body or main `div``

class="mat-typography"

Links

Icons Links

Used schematics

Docker

  • npm run build:docker
  • docker push sterlp/admin-template

Copyright