fds-core
TypeScript icon, indicating that this package has built-in type declarations

3.5.25 • Public • Published

fds-core

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

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 and Edge.

Distribution directory

The dist folder is the public distribution directory where all resources required to create a Feelgood unified look and feel application is located.

In the collection folder you will find:

  • Assets
  • Components
  • Globals

Assets folder

The 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: <domain>/assets/fonts.

Logotypes

In the img folder all Feelgood logotypes are located. They can be accessed in your Vue project by add a require path to the logotype you want.

<img :src="logoPath" alt="Feelgood">
computed: {
  logoPath () {
    return require('../../../node_modules/fds-core/dist/collection/assets/img/logotypes/logo-feelgood-light.svg')
  }
}

Components folder

Here all the components that are produced in fds-core is located.

Globals folder

The globals folder contains another folder called styles. This folder contains 3 important scss files:

  • tokens.scss
  • core.scs
  • export.scss

tokens.scss

The token 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: set-color('blue', 2);.

core.scss

The core 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.

export.scss

The export scss file contains a flattened version of all variables using the ICSS pseudo-selector: :export in order to access variables through JavaScript. Example: Share scss variables with javascript.

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.

Start fds-core

Inside the fds-core project there is a Vue project in the docs folder. From here you can read the documentation about components and functions that are shipped in fds-core.

cd docs; yarn run serve

When you doing changes in fds-core you need to build it. When a build is triggerd a copy of components and global css is put in the docs project in docs/public/ folder.

NOTE: Currently you need to build twice in order the get the changes to work for some reason.

When building you need to be inside the root fds-core folder and then run the command:

npm run build

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 fds.

npm run generate fds-<component-name>

This will generate a folder inside scr/components/ containing the nessecary files for a new component.

NOTE: You might want to change the *.css file to *.scss instead.

Caveat

FDS components without shadow DOM (shadow:false) that is using slots that have async data must be updated using :key on the component in order to trigger an update of the DOM.

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.

  1. Bump the version in package.json (Use the Semver set of rules for versioning).
  2. Run npm run build in order to generate content in the dist folder. Currently the --es5 flag is added in order to get the polyfills for browsers that needs it.
  3. Push your changes to github.
  4. Publish the new version to npm: npm publish --access-public. (You might need to login: npm 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.

Work with fds.core locally npm

In this repo run yarn link

Then go to the repo that will consume fds-core and run yarn link fds-core

After making changes in fds-core you will have to run npm run build X 2

Readme

Keywords

none

Package Sidebar

Install

npm i fds-core

Weekly Downloads

729

Version

3.5.25

License

MIT

Unpacked Size

4.24 MB

Total Files

323

Last publish

Collaborators

  • yapaco
  • fg-adahei
  • andreasrein
  • electricgebring
  • hmandersson