Fds-core is a project that contains components, styling, assets and helping functions for creating a Feelgood unified look and feel application. The project is shipped as a npm-package.
Fds-core use Stencil for generating components as Custom Elements.
Table of Contents
- Browser support
- Distribution directory
- Working with fds-core
- Implement in project
Fds-core builds Web Components that run natively or near-natively in all widely used desktop and mobile browsers. For browsers without native support, a small polyfill helps developers use Custom Elements seamlessly and with little performance overhead.
With this polyfill the browser support is Chrome, Safari, Firefox, Edge and IE11.
dist folder is the public distribution directory where all resources required to create a Feelgood unified look and feel application is located.
collection folder you will find:
assets folder contains all the fonts you need in your project. Note that you need to copy the fonts into your project folder in order to use them. The correct path should be:
img folder all Feelgood logotypes are located.
Here all the components that are produced in fds-core is located.
globals folder contains another folder called
styles. This folder contains 3 important
scss file contains all variables, functions and mixins that are used in all components and you will be able to use them in your application as well. A guide in how to use the functions to get access to the variables are found in the Feelgood Design System. All variables are in scss maps and need its represent function to access. Example:
scss file is recommended to include in your project. It will sanitize the design and layout of your
html elements and set some base styling.
scss file contains a flattened version of all variables using the ICSS pseudo-selector:
Working with fds-core
If you are a Feelgood developer you will be able to update the fds-core. Download fds-core from the fds-core github repo if you have not done it already.
npm run start
Generate new component
If you want to create a new component, use the
npm script for generate. Note that all components shall have the prefix
npm run generate fds-<component-name>
This will generate a folder inside
scr/components/ containing the nessecary files for a new component. (You might want to change the
css file to a
Publish to npm
After you are done editing the fds-core project you want to publish your changes in order to be able to access the changes in the projects that are using fds-core.
- Bump the version in
package.json(Use the Semver set of rules for versioning).
npm run buildin order to generate content in the
distfolder. Currently the
--es5flag is added in order to get the polyfills for browsers that needs it.
- Push your changes to github.
- Publish the new version to npm:
npm publish --access-public. (You might need to login:
If all went well you can now update your fds-core package in your application to access your changes.
Implement in project
Fds-core components is framework agnostic and will also work without any framework. In order to integrate fds-core with a framework such as Vue, React or Angular, please follow this guide.