bootfont v0.1.1

Bootfont

Bootfont is a UI library built on Angular & Bootstrap v4 + Font Awesome and gives you a quickstart to build your own app.

We recommend you to use ABC framework to make app easy with Angular.

Installation

To install this library, run:

$ npm install bootfont --save

Note: This library is a part of abc framework and no need to install if you are using abc framework.

Consuming your library

From your Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import bootfont library
import { BootFontModule } from 'bootfont';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    // Specify bootfont library as an import
    BootFontModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once bootfont library is imported, you can use its components.

<!-- You can now use your library component in app.component.html -->
<h1>
  {{title}}
</h1>
<b-icon></b-icon>

Development

This is open source project and needs your help. If you have any comment, please use git issue. And if you want to improve this project, please do not hesitate to fork and pull request.

When you edit code, please see the guide line of generator-angular2-library.

License

MIT © JaeHo Song

Components

Bootfont components are built on Bootstrap v4 and Font Awesome and follows all the rules of them.

So, when you are using bootfont, please be remindered that you can apply all the rules of Bootstrap v4 and Font Awesome.

b-icon

b-icon is a font-awesome stacked-icon.

Options

name is the icon name.

Examples

<b-icon name="home"></b-icon>

Style Guide

Design with CSS.

globaly style.css)

b-icon[name="home"] .fa-stack-2x {
    color: slategrey;
}
b-icon[name="home"] .fa-stack-1x {
    color: snow;
}

parent scss)

:host /deep/ b-icon[name="home"] {
    .fa-stack-2x {
        color: slategrey;
    }
    .fa-stack-1x {
        color: snow;
    }
}

b-header

b-header component is simply a wrapper of bootstrap navbar.

It is

All the bootstrap rules apply.

break is the break point where the break the menu as collapsable.

<b-header break="sm">

Example 1.

The code below is a simple header template following bootstrap v4 navbar rules.

<b-header break="sm">
    <b-icon class="navbar-toggler navbar-toggler-right" name="bars"></b-icon>
    <b-icon class="navbar-brand" name="home"></b-icon>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item navbar-text ml-3">Home</li>
            <li class="nav-item navbar-text ml-3">Blogs</li>
        </ul>
        <ul class="navbar-nav">
            <li class="nav-item navbar-text ml-3">Login</li>
            <li class="nav-item navbar-text ml-3 mr-4">Register</li>
        </ul>
    </div>
</b-header>

Example 2.

See the variation of navbar-brand. It is just the same as Bootstrap v4 navbar rules.

<b-header break="sm">
  <b-icon name="bars" class="navbar-toggler navbar-toggler-right"></b-icon>
  <div class="navbar-brand">
    <b-icon name="home"></b-icon>
    ABC
  </div>
  <div class="navbar-collapse collapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        ...
      </li>
      ...
    </ul>
    ...
  </div>
</b-header>

Example 3.

Limit max-width of header and content as centered on lg.

If you change the break point, you may need to change other break point attributes.

template)

<b-header break="lg">
  <div class="container">
    <b-icon name="bars" class="navbar-toggler navbar-toggler-right"></b-icon>
    <div class="navbar-brand">
      <b-icon name="home"></b-icon>
      ABC
    </div>
    <div class="navbar-collapse collapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item navbar-text ml-3">Home</li>
        <li class="nav-item navbar-text ml-3">Blogs</li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item navbar-text ml-3">Login</li>
        <li class="nav-item navbar-text ml-3 mr-4 mr-lg-0">Register</li>
      </ul>
    </div>
  </div>
</b-header>

<div class="page-content p-2 px-lg-0">
  <div class="jumbotron">
    <h1 class="title display-3">Hi, I am ABC!</h1>
    <p class="lead">
      ...
    </p>
    <p>
      ...
    </p>
  </div>

  <p>
    ...
  </p>
</div>

global style.scss)

$md: 768px;
$lg: 992px;
$header-height: 68px;
@mixin page-width() {
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    width: 100%;
    @media ( min-width: $lg ) {
        margin: 0 auto;
        width: $lg;
        .navbar-brand {
            padding-left: 0;
        }
    }
}
body {
    margin-top: $header-height;
}
.navbar .container {
    @include page-width();
    @media ( max-width: $md ) {
        .navbar-collapse {
            background-color: lightslategrey;
        }
    }
}
.page-content {
    @include page-width();
}