Idea behind this application creation is to have one service which:
- provides common look and feel for OpusCapita applications
- gives a consistent way of continuous development of this application (extending styles, adding new UIs)
- be able to set up different styles (customization) for specific installation
Technically speaking application works as CDN that serves static (non JS) resources like css, fonts, images.
Static application version is available online here
or using yarn
If you want to change port run the following command(s) in console
- on Windows
set PORT=1234 npm start
- on Linux
export PORT=1234 npm start
npm star lint
or run lint with fixing possible problems
npm start lint.fix
Using as npm package
The easiest way to use compiled css+images+fonts+guide(html) is to install it from NPM and include it in your own React build process.
Add the dependency to your node application or module
# using yarnyarn add @opuscapita/opuscapita-ui# or with npmnpm install @opuscapita/opuscapita-ui --save
Let's say you have
index.html as entry point of your application then you add link to css file like this:
Then on server side, depending on mode that you use e.g. production (application) or demo start (app or module development mode) you can use OpusCapita UI differently (we use express server as an example):
if <development/demo mode>// demo or development mode where locally installed library '@opuscapita/opuscapita-ui' files are used// '@opuscapita/opuscapita-ui' library holds all required the files in 'dist' folderapp;else// production mode, here we redirect to externally started oc-ui service and its css exposed via httpapp;
Note: In this case your you map local module resources (~= development mode) you will be able to access style guide also by url
http://[your app host and port]/opuscapita-ui/index.html
Using as grails plugin
add dependency in BuildConfig.groovy
add dependency for existing resources
or include module in *.gsp files
Source code info
Application folder/file structure
├── configuration.json.sample application configuration file sample └── src ├── client │ ├── demo static resources important only for rendering documentation (usage guide for developers) │ │ ├── css │ │ ├── favicon.ico │ │ ├── html │ │ └── js │ ├── fonts fonts │ ├── img images │ ├── less less files (are compiled into single css that is available via /index.css) │ └── index.html index page, with links to documentation (for developers) └── server └── index.js is used run web server (service)
What is the less
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable. Read more information about less on the official documentation.
About less structure inside less folder
├── bootstrap ├── extensions ├── external ├── opuscapita-theme ├── index.less ├── mixins.less └── variables.less
bootstrap- Copy of less files form http://getbootstrap.com/ as it is.
extensions- Additional UI components or extensions which we are using in our apps (datepecker, fileupload, font-awesome, etc.).
opuscapita-theme- Overwrite (modify) some standard Bootstrap components and states (for example use another fonts, hover states)
external- style modifications for external components
index.less- The main less file that import another
variables.less- The main file with variables that are used inside other less files.
mixins.less- The main file with mixins that are used inside other less files.
How to customize
Configure customization area location (local FS directory):
configuration.jsonin root app directory, use file
configuration.json.sampleas an example
- Set path to customization area as value for
If you would like to customize CSS you need to create
less/index.less file at least and start add/override styles there. Additional less files should be imported via
If you need to override standard file like image or font, you need place them in customization area folder by the same path as it is placed inside the sources folder
src/client. For example, you need to replace logo file (sources location
src/client/img/opuscapita-logo.svg), then you could place own logo file in customization area folder by path