{"id":15063509,"url":"https://github.com/opuscapita/styles","last_synced_at":"2026-04-09T20:03:44.042Z","repository":{"id":20977399,"uuid":"89669142","full_name":"OpusCapita/styles","owner":"OpusCapita","description":"Node.js based service that serves shared styles/images/fonts via HTTP","archived":false,"fork":false,"pushed_at":"2023-10-24T06:55:53.000Z","size":11794,"stargazers_count":3,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T23:48:13.292Z","etag":null,"topics":["bootstrap3","css","javascript","less","nodejs","opuscapita","styles"],"latest_commit_sha":null,"homepage":"https://opuscapita.github.io/styles","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpusCapita.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-28T05:00:23.000Z","updated_at":"2022-03-23T09:11:07.000Z","dependencies_parsed_at":"2022-08-07T09:16:28.304Z","dependency_job_id":"a4a97194-40c9-468e-b3fb-6dd985eede8d","html_url":"https://github.com/OpusCapita/styles","commit_stats":{"total_commits":345,"total_committers":29,"mean_commits":11.89655172413793,"dds":0.7391304347826086,"last_synced_commit":"07191f128f4703e5287c31cb9b39e643d1656fce"},"previous_names":["opuscapita/opuscapita-ui"],"tags_count":65,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Fstyles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Fstyles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Fstyles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpusCapita%2Fstyles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpusCapita","download_url":"https://codeload.github.com/OpusCapita/styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208561,"owners_count":21065202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap3","css","javascript","less","nodejs","opuscapita","styles"],"created_at":"2024-09-25T00:03:28.529Z","updated_at":"2026-04-09T20:03:38.991Z","avatar_url":"https://github.com/OpusCapita.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"## OpusCapita Styles Service\n\n[![CircleCI Status](https://circleci.com/gh/OpusCapita/styles/tree/master.svg?style=shield\u0026circle-token=:circle-token)](https://circleci.com/gh/OpusCapita/styles)\n![badge-npm-version](https://img.shields.io/npm/v/@opuscapita/styles.svg) \n![badge-license](https://img.shields.io/github/license/OpusCapita/styles.svg)\n![NPM Downloads](https://img.shields.io/npm/dm/@opuscapita/styles.svg)\n\nIdea behind such application creation is to have one service which:\n- provides common look and feel for OpusCapita applications\n- gives a consistent way of continuous development of this application (extending styles, adding new UIs)\n- be able to set up different styles (customization) for specific installation\n\nTechnically speaking service works as CDN that serves static (non JS) resources like css, fonts, images.\n\nStatic version of this service is available online [here](https://opuscapita.github.io/styles).\n\n## Usage\n\n### Using as npm package\nThe 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.\n\n#### Add the dependency to your node application or module\n\n```bash\n# using yarn\nyarn add @opuscapita/styles\n\n# or with npm\nnpm install @opuscapita/styles --save\n```\n\nLet's say you have ```index.html``` as entry point of your application then you add link to css file like this:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"styles/index.css\"\u003e\n```\n\nThen 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):\n```javascript\nif (\u003cdevelopment/demo mode\u003e) {\n  // demo or development mode where locally installed library '@opuscapita/styles' files are used\n  // '@opuscapita/styles' library holds all required the files in 'dist' folder\n  app.use('/styles', express.static(path.join(__dirname, '\u003crelative path to node_modules\u003e/@opuscapita/styles/dist/npm')));\n} else {\n  // production mode, here we redirect to externally started styles service and its css exposed via http\n  app.get('/styles/index.css', function(req, res) {\n    res.redirect('http://\u003cstyles server url\u003e/index.css');\n  });\n}\n```\n\n*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]/styles/index.html```\n\n### Using as Node service\nDownload Maven arterfact (zip archive) from  repository using the following coordinates:\n```\ngroupId: com.opuscapita.node\nartifactId: styles\nversion: \u003cuse version that you need\u003e\n```\nUpzip it. Zip folder structure:\n```\nstyles\n├── configuration.json.sample\n└── src\n   ├── client\n   └── server\n```\nNow you can run it using Node v.6.x from `styles` folder:\n```\nnode src/server\n```\nApplication will be available by URL `http://localhost:3042`, so you can get index.css by URL `http://localhost:3042/index.css`.\n\nIf you would like to use different `host` and `port` set up different values using corresponding enviroment variables `HOST` and `PORT` correspondingly.\n\nIf styles need to use customized styles (images and fonts) refer to section [Customization](#customization)\n\n### Using as grails plugin\n\nAdd dependency in BuildConfig.groovy\n```\nruntime('com.opuscapita.grailsplugins:styles:1.0.3-beta.1')\n```\nAdd dependency for existing resources (via Resource plugin)\n```\ndependsOn ('styles')\n```\nOr include module into *.gsp file firectly\n```\n\u003cr:require modules=\"styles\"/\u003e\n```\n\n## Development\n\n### Getting started\nDownload and install Node.js v6.x from the [Node.js download page](https://nodejs.org/en/download/)\nRead the [Getting started page](https://docs.npmjs.com/getting-started/installing-node) for information about installing Node.js more.#### Development HowTo\n\n### Install dependencies\n```\nnpm i\n```\nor using **yarn**\n```\nyarn\n```\n\n### Start server\n```\nnpm start\n```\n\nServer will be available by the following url http://localhost:3042/. It is automatically reloaded when you make changes in sources.\nCompiled styles can be found in [index.css](http://localhost:3042/index.css)\n\nIf you want to change port run the following command(s) in console\n- on Windows\n```\nset PORT=1234\nnpm start\n```\n- on Linux\n```\nexport PORT=1234\nnpm start\n```\n\n### Lint sources\n```bash\nnpm start lint\n```\nor run lint with fixing possible problems\n```\nnpm start lint.fix\n```\n\n## Source code info\n\n### Application folder/file structure\n\n ```\n ├── configuration.json.sample          application configuration file sample\n └── src\n     ├── client\n     │   ├── demo                       static resources important only for rendering documentation (usage guide for developers)\n     │   │   ├── css                     \n     │   │   ├── favicon.ico\n     │   │   ├── html\n     │   │   └── js\n     │   ├── fonts                      fonts\n     │   ├── img                        images\n     │   ├── less                       less files (are compiled into single css that is available via /index.css)\n     │   └── index.html                 index page, with links to documentation (for developers)\n     └── server\n         └── index.js                   is used run web server (service)\n ```\n\n### What is the less\nLess 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.\nRead more information about less on [the official documentation](http://lesscss.org/features/#features-overview-feature).\n\n### Files structure inside less folder\n\n```\n├── bootstrap\n├── extensions\n├── external\n├── opuscapita-theme\n├── index.less\n├── mixins.less\n└── variables.less\n```\nwhere:\n* `bootstrap` - Copy of less files form [http://getbootstrap.com/](http://getbootstrap.com/) as it is.\n* `extensions` - Additional UI components or extensions which we are using in our apps (datepecker, fileupload, font-awesome, etc.).\n* `opuscapita-theme` - Overwrite (modify) some standard Bootstrap components and states (for example use another fonts, hover states)\n* `external` - style modifications for external components\n* `index.less` - The main less file that import another\n* `variables.less` - The main file with variables that are used inside other less files.  \n* `mixins.less` - The main file with mixins that are used inside other less files.  \n\n## Customization\n\n Configure customization area location (local FS directory):\n * Create `configuration.json` in root app directory, use file `configuration.json.sample` as an example\n * Set path to customization area as value for `customizationAreaPath` key in `configuration.json`\n\n 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 `index.less`.\n 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 ```img/opuscapita-logo.svg```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopuscapita%2Fstyles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopuscapita%2Fstyles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopuscapita%2Fstyles/lists"}