I created a SCSS / SASS based UI/UIX Library.
Github repo is available here:
https://github.com/azarus/ngx-flatui

Intro

Flat UI is a starter project and SCSS based UI/UX library for Angular.

Preview

Requirements

• Angular2
• sass setup for angular
• Font Awesome

Install

To install simply clone this repository.
And include the flat library in your CSS

Default Color Scheme

@import "/flat/scss/flat.default";

Or create a new one using base.scss

@import "/flat/scss/flat.base";

// Grid System
$grid-size: 12;

// Base
$background-color:  flat-color("white", 0);

// Button
$button-font-size: 20px;
$button-padding: 12px 30px;
$button-border-radius: 2px;
$button-shadow-size: 2px 2px 4px;
$button-shaddow-darken: 0.4;

// Label
$label-font-size: 12px;
$label-padding: 2px 12px;
$label-border-radius: 15px;

// Input
$input-font-size: 16px;
$input-padding: 2px 12px;

$input-border-radius: 2px;
$input-shadow-size: 2px 2px 4px;
$input-shaddow-darken: 0.4;

$custom-theme: (
    primary: flat-color("wetasphalt"),
    default: flat-color("white"),
    secondary: flat-color("belizehole"),
    info: flat-color("peterriver"),
    success: flat-color("emerland"),
    warning: flat-color("carrot"),
    danger: flat-color("alizarin"),
    accent: flat-color("midnightblue"),
);

@include flat-theme-dark($custom-theme);

// Create Button Theme
@include flat-button("default", flat-color("midnightblue"), flat-color("snow"), flat-color("midnightblue", -10), flat-color("snow", -10));

// Define button sizes (scale)
@include flat-button-size("xl", 1.4);

// Define label Themes
@include flat-label("default", flat-color("midnightblue"), flat-color("snow"), flat-color("midnightblue", -5), flat-color("snow", -5));

// Create ripple selectors
@include ripple-effect("button");
@include ripple-effect(".label");


// Inputs themes
@include flat-input("default", flat-color("snow"), flat-color("midnightblue"), flat-color("asbestos"), flat-color("snow", -5), flat-color("midnightblue", -5), flat-color("midnightblue", -5));

Documentation

Components

The following components are available:

Input Groups

<input type="text" class="input input-default" placeholder="How are you?"/>
<input type="text" class="input input-primary" placeholder="How are you?"/>
<input type="text" class="input input-secondary" placeholder="How are you?"/>
<input type="text" class="input input-success" placeholder="How are you?"/>
<input type="text" class="input input-warning" placeholder="How are you?"/>
<input type="text" class="input input-danger" placeholder="How are you?"/>

Buttons

<button class="btn btn-full btn-default">Default</button>
<button class="btn btn-full btn-primary">Primary</button>
<button class="btn btn-full btn-secondary">Secondary</button>
<button class="btn btn-full btn-info">Info</button>
<button class="btn btn-full btn-success">Success</button>
<button class="btn btn-full btn-warning">Warning</button>
<button class="btn btn-full btn-danger">Danger</button>

Labels

<span class="label label-default">Test</span>
<span class="label label-primary">Test</span>
<span class="label label-secondary">Test</span>
<span class="label label-info">Test</span>
<span class="label label-success">Test</span>
<span class="label label-warning">Test</span>
<span class="label label-danger">Test</span>

<span class="label label-default"><i class="fa fa-heart"></i> 5</span>
<span class="label label-primary"><i class="fa fa-key"></i> 15</span>
<span class="label label-secondary"><i class="fa fa-home"></i> 20</span>

Navigator (SideBar)

<div class="layout-container">
    <div class="layout-sidenav-left" [class.closed]="closed">

    </div>
    <div class="layout-content">
        <div class="toolbar toolbar-primary">
            <button class="btn btn-simple btn-default" (click)="toggleNav()"><i class="fa fa-bars"></i></button>
        </div>
        
        <div class="padding-20">
            <h2>Hello world</h2>
            <button (click)="toggleNav()" class="btn btn-primary">Open Nav</button>
        </div>
    </div>
    <div class="layout-sidenav-right" [class.closed]="closed">

    </div>
</div>

Grid System

<div class="row">
    <div class="col-12">
        Hello
    </div>
</div>
<div class="row">
    <div class="col-xs-1">
        <span>.col-xs-1</span>
    </div>
    <div class="col-xs-2">
        <span>.col-xs-2</span>
    </div>
    <div class="col-xs-3">
        <span>.col-xs-3</span>
    </div>
    <div class="col-xs-6">
        <span>.col-xs-6</span>
    </div>
    <div class="col-xs-6">
        <span>.col-xs-6</span>
    </div>
    <div class="col-xs-6">
        <span>.col-xs-6</span>
    </div>
    <div class="col-xs-12">
        <span>col-xs-12</span>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <span>.col-md-1</span>
    </div>
    <div class="col-md-4">
        <span>.col-md-1</span>
    </div>
    <div class="col-md-4">
        <span>.col-md-1</span>
    </div>
</div>

And more!!!

For more please see: src/app/examples folder

Further help

Open an issue

License

MIT.