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

    1.2.2 • 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, Edge and IE11.

    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.

    In the img folder all Feelgood logotypes are located.

    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

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

    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 scss file.)

    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.

    Keywords

    none

    Install

    npm i fds-core

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    2.87 MB

    Total Files

    182

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar