FerUI stand for : Fast Easy Reusable UI and Fer
sounds like Fair
which is what we expect from a UI/UX web framework ๐.
The Ferui project is an open sourced design system inspired from the amazing Clarity project that brings together UX guidelines, an HTML/CSS framework, and Angular components. This repository includes everything you need to build, customize, test, and deploy Ferui. For complete documentation, visit our Ferui docs (Still in construction).
Like Clarity, we publish three npm packages:
- @ferui/icons. We just added our custom set of icons to the existing set from Clarity. By default we load all Clarity
core icons
. - @ferui/design. We have used Bootstrap as a base for our design system. So you'll found the same methods but we have a totaly custom design system for
forms
. You can find the complete list of what we load from botstrap there. - @ferui/components. This part is a fork of @clr/angular which is part of Clarity. It contains all Angular components. This package depends on
@ferui/design
and@ferui/icons
for styles and icons.
If you already have an Angular application, you can follow the installation steps below to include and use Ferui in your application.
- Install Ferui/icons package
npm install @ferui/icons --save
- Install the polyfill for Custom Elements:
npm install @webcomponents/custom-elements --save
- Include the clr-icons.min.css and
ferui-icons.min.js
in your HTML. Asferui-icons.min.js
is dependent on the Custom Elements polyfill, make sure to include it before ferui-icons.min.js:
<link rel="stylesheet" href="path/to/node_modules/@ferui/icons/ferui-icons.min.css" />
<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>
If your site is built with angular-cli (v6+) you can achieve the above by adding the files to the styles array and scripts array in angular-cli.json
:
"styles": [
...
"../node_modules/@ferui/icons/ferui-icons.min.css",
...
],
"scripts": [
...
"../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"../node_modules/@ferui/icons/ferui-icons.min.js"
...
]
- Install Ferui Design package through npm:
npm install @ferui/design --save
- Include the ferui-design.min.css in your HTML file:
<link rel="stylesheet" href="path/to/node_modules/@ferui/design/ferui-design.min.css" />
If your site is built with angular-cli (v6+), you can achieve the above by adding the file to the styles array in angular-cli.json
:
"styles": [
...
"../node_modules/@ferui/design/ferui-design.min.css"
...
]
- Write your HTML with the Ferui CSS class names and markup.
-
Follow steps above to install Ferui Icons and Ferui Design (angular-cli usage).
-
Install the Ferui Components package through npm:
npm install --save @ferui/components
Note: No need to install other packages since they will automatically be added by this one.
- 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 {}
If your application uses systemjs, add the configuration as in the example below.
System.config({
...
map: {
...
'@ferui/components': 'node_modules/@ferui/components/bundles/ferui-components.umd.js',
'@ferui/icons': 'node_modules/@ferui/icons/bundles/ferui-icons.umd.js',
},
...
});
The FerUI project team welcomes contributions from the community. For more detailed information, see CONTRIBUTING.md.
If you want to deploy your current work through netlify, you'll need to have your own netlify account
(create an account) and create a new site from github
(choose the ferui
repo from ilanddev
team when asking - click on the little arrow near your name in the modal dialog to switch team.) and fill-in those information:
- Build command:
npm install && npm run build:dev
- Publish directory:
dist/dev
Then click on Deploy site
button when you're done. It will take some time to deploy the site. Then you'll be able to go to next steps. (I recommend you to change the site name as soon as you can. See Note 2 below for more info).
Then, open Ferui project with your favorite IDE and create the .netlify/state.json
file at the root of ferui directory. Add the : siteId
attribute and add your netlify API ID
(go to netlify website then log-in into your account, look for the site you've just created from the step below then click on Site settings
link. It should be display within the general tab, under Site details
.)
{
"siteId": "YOUR_API_ID_GOES_HERE"
}
Once you've did this, you'll be able to run the deploy command to publish your work through your netlify account. That will generate a new link that you can share with anybody :-)
npm run netlify:deploy
You can note that this command will generate you draft URL to share with anybody. This won't be your prod version yet. If you want to make your deploy your prod version, consider using the prod command bellow :
npm run netlify:deploy:prod
Good luck !
- Note: To keep using the free version of netlify, we need to let all developers have their own netlify account and configure their own site (API ID).
- Note 2: If you want, you can change your demo page URL for easy tracking. We recommend you to name your netlify site like this:
YOUR_NAME-ferui-demo
(replace YOUR_NAME by your actual name or unique identifier, i.e: john-ferui-demo.netlify.com). Just log in to netlify website, go to your site, then click onSite Settings
then click onChange site name
.