@ferui/components

Installing Ferui Components

• Install Ferui Icons package through npm:

  npm install @ferui/icons
  

  • Don't forget to add the polyfill for Custom Elements if not already done:

  npm install --save @webcomponents/custom-elements
  

• Install Ferui Design package through npm:

  npm install @ferui/design
  

• Install the Ferui Components angular package through npm:

  npm install @ferui/angular
  

  • We rely on Intersection Observer API too. But it is not compatible with all browsers, so if you see that one of the browser that you want to support has not native support for IntersectionObserver, you need to install the polyfill.

  npm install --save intersection-observer
  

  • If you want to install everything in one command :

  npm install @ferui/icons @webcomponents/custom-elements @ferui/design @ferui/angular
  

• Import the FeruiModule into your Angular application's module. Your application's main module might look like this:

  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { FeruiModule } from '@ferui/components';
  import { AppComponent } from './app.component';
  
  @NgModule({
      imports: [
          BrowserModule,
          FeruiModule,
          ....
       ],
       declarations: [ AppComponent ],
       bootstrap: [ AppComponent ]
  })
  export class AppModule {    }
  

Enable ferui-icons

Include the ferui-icons.min.js in your HTML file (don't forget the custom-elements polyfill) :

<script src="path/to/node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="path/to/node_modules/@ferui/icons/ferui-icons.min.js"></script>

Enable ferui-design

You can either add the compiled css files or the precompiled scss files directly to your project.

Importing compiled CSS files

• Include the ferui-design.min.css and ferui-icons.min.css files in your HTML file:

<link rel="stylesheet" href="path/to/node_modules/@ferui/design/ferui-design.min.css">
<link rel="stylesheet" href="path/to/node_modules/@ferui/icons/ferui-icons.min.css">

• Write your HTML with the Ferui Design CSS class names and markup.

Importing precompiled Sass files

• First, you can create your own _custom.scss and use it to override the built-in custom variables. Then, use your main Sass file to import your custom variables, followed by ferui-design:

...
@import "custom";
// This will import everything from FerUI design.
@import '@ferui/design/ferui-design';

// This will load all the style for icons from FerUI Icons.
@import '@ferui/iconss/ferui-icons';
...

• Note : You can load each scss files that you want from ~@ferui/design/ to load only the components that you need.

• For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

• Write your HTML with the Ferui Design CSS class names and markup.