/admin-template

Simple Angular 12 Material Bootstrap Admin Template

Primary LanguageTypeScriptMIT LicenseMIT

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