Documentation
egret-banner

Overview

Angular Landing is a material design landing page built with Angular and Angular CLI. It implements Angular Material Design package with minimalist design. Each page section is composed of its own html, scss and ts files, organized in its own directory and So it's easy to customize and reuse.

IMPORTANT: It's not An regular HTML landing page. It's built with Angular

Features
  • Angular Material
  • Full responsive
  • Multiple Home versions
  • Alternative sections

Getting Started

Make sure you have Nodejs, NPM and angular-cli installed on your computer.

Download node https://nodejs.org/en/download

Open terminal and run npm install -g @angular/cli

Angular CLI Doc: https://cli.angular.io

Serve and build

Use terminal and navigate to project root.

Then run npm install

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200. The app will automatically reload if you change any of the source files.

Code Scaffolding

Run ng generate component componentName to generate a new component. You can also use ng generate directive/pipe/service/class/module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Theming Guide

First create color palettes for

  • primary
  • accent and
  • warn

Create palette here http://mcg.mbitson.com. Copy sass code for angular 2+, create file like src/assets/styles/themes/indigo.scss with the generated code. And include that file in .angular-cli.json

For more about theming, visit these links

Common CSS Classes

Background color
  • .mat-bg-primary
  • .mat-bg-accent
  • .mat-bg-warn
Color
  • .mat-color-primary
  • .mat-color-accent
  • .mat-color-warn
Margins
  • .m-0
  • .mt-1
  • .mr-1
  • .mb-1
  • .ml-1
  • .mb-05
  • .margin-333
Paddings
  • .pt-1
  • .pr-1
  • .pb-1
  • .pl-1
  • .p-0
Font related
  • .fz-1
  • .fz-2
  • .text-center
  • .font-normal
  • .text-muted
  • .text-muted-white
  • .text-sm
Others
  • .bg-none
  • .bg-white
  • .height-100
  • .mat-box-shadow
  • .full-width

Do you like Angular Landing?

Please give Angular Landing a 5 star rating.

This will inspire me to add more features.