Futurice web component library.

Overview
Ice Logo

Ice Core

License: MIT

Ice Core provides the core Ice web component library.

Each web component comes with its own functional styling which can be customised as needed.

Installing

To install the web component library you can use Node Package Manager.

npm install "@futurice/ice-core" --save-dev

Usage

To use the project reference the full library:

<script type="module" 
        src="node_modules/ice-core/lib/ice-core.es.js"></script>

Then you can use a component (e.g. a button) as follows in a HTML document:

<ice-button id="primary-button" />

Or programmatically as follows:

const button = new IceButton();

Building

To build the project you can use Node Package Manager.

npm run clean && npm run build

Developing

To get started in developing the project it's recommended to use the official Node Docker image, as this will provide a consistent and reliable environment for developing and testing changes. It's the exact image the project uses as part of the continuous integration (CI) build pipeline.

To start with Docker you can use the following command-line statement.

The project is built using Vite and the configuration can be found in the build directory (along with any other build-specific files).

For further details on contributing to this project, follow the CONTRIBUTING guide.

docker run -it --name "ice-node" -P -v $(pwd):/src node:16-alpine sh; docker rm "ice-node"

Note: The statement automatically removes the Docker image after use through the post-fixed docker rm ... command. If you want to keep the image, remove the post-fix statement and continue.

You might also like...

Scrolling navigation component for web apps

Slinky.js Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the plugin homep

Nov 16, 2022

DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

DateTimePickerComponent is a very lightweight and dependency-free web component written in pure JavaScript

DateTimePickerComponent Description DateTimePickerComponent is a very lightweight (just over 20KB) and dependency-free web component written in pure J

Dec 24, 2022

A web component that allows you to run high level programming languages on your websites (static websites included!)

Code-Runner-Web-Component A web component that allows you to run high level programming languages on your website via the public Piston API Show your

Dec 16, 2022

A progressively enhanced server-rendered form-aware web component counter using WebC

Eleventy WebC Number Counter Demo A progressively enhanced server-rendered form-aware web component counter using WebC. This enhances from an input t

Nov 11, 2022

FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

FortuneSheet FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel English | 简体中文 Purpose The

Jan 3, 2023

Solid component and library for LiveKit (unofficial)

 Solid component and library for LiveKit (unofficial)

This package provides Solid components that makes it easier to use LiveKit in a Solid app. Inspired completely by https://github.com/livekit/livekit-r

Mar 8, 2022

Omnichannel Live Chat Widget UI Components offers a re-usable component-based library to help create a custom chat widget that can be connected to the Dynamics 365 Customer Service experience.

Omnichannel Live Chat Widget UI Components @microsoft/omnichannel-chat-widget is a React-based UI component library which allows you to build your own

Dec 15, 2022

hCaptcha Component Library for Solid.

Solid hCaptcha Component Library This is a port of @hcaptcha/react-hcaptcha for Solid. Description hCaptcha is a drop-replacement for reCAPTCHA that p

Dec 4, 2022

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

Dec 30, 2022
Comments
  • Added linting for bigger headaches.

    Added linting for bigger headaches.

    Description

    Added linting through eslint and modified the code to be compliant with the linter.

    Additional context

    N/A

    What is the purpose of this pull request?

    • [ ] Documentation update
    • [X] Feature
    • [ ] Fix
    • [ ] Other

    Before submitting the PR, please make sure you do the following

    • [X] Read the Contributing Guidelines.
    • [X] Read the Pull Request Guidelines
    • [X] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
    • [X] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
    • [ ] Ideally, include relevant tests that fail without this PR but pass with it.
    enhancement 
    opened by HelloFillip 1
  • Feature/tests

    Feature/tests

    Description

    Added unit tests (via Jest) to complete rudimentary CI suite.

    Additional context

    Is there anything you'd like reviewers to focus on?

    What is the purpose of this pull request?

    • [ ] Documentation update
    • [x] Feature
    • [x] Fix
    • [ ] Other

    Before submitting the PR, please make sure you do the following

    • [x] Read the Contributing Guidelines.
    • [x] Read the Pull Request Guidelines
    • [x] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
    • [x] Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
    • [x] Ideally, include relevant tests that fail without this PR but pass with it.
    opened by HelloFillip 0
Owner
Futurice
Co-Creating a Resilient Future
Futurice
dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aniket Muruskar 7 Aug 26, 2022
A component to quickly choose fonts from Google Web Fonts, custom fonts you (the web developer) provide, as well as system fonts.

Fontpicker jQuery Plugin A component to quickly choose fonts from Google Web Fonts, custom fonts you (the web developer) provide, as well as system fo

Arjan Haverkamp 24 Dec 3, 2022
Context-Full Web Component Library

CWCO Contextfull Web Component Library created to improve native Web Component APIs user experience with: ✅ No Build Required! ✅ Works with other libr

Before Semicolon 51 Jan 2, 2023
🗂 Universal Media Library as a web component.

Kondonizer Kondonizer is a custom element (a native HTML tag) that can be integrated in any frontend code. It displays a media library based on a Medi

EcoHead 6 Jul 19, 2022
Tool Cool Color Picker is a color picker library written in typescript and using web component technologies.

Tool Cool Color Picker Tool Cool Color Picker is a color picker library written in typescript and using web component technologies. Check out the demo

Tool Cool 13 Oct 23, 2022
A vanilla JavaScript multi-checkbox dropdown web component.

Multi-Checkbox Web Component Multi-Checkbox is a web component that utilizes multiple checkboxes in a dropdown list to populate the value of an input.

null 2 Dec 24, 2021
Simple yet flexible charting Lightning Web Component using Chart.js for admins & developers

Lightning Web Chart.js Component Simple yet flexible charting Lightning Web Component using Chart.js for admins & developers Documentation Getting sta

@SalesforceLabs 109 Dec 9, 2022
Hands Off Ukraine Web Component

A banner web component that enables companies/individuals to quickly show their support for Ukraine regarding the recent Russian invasion. It hopes to raise awareness to the incident and allow users to quickly access support websites & donate.

Filipe Freire 8 Mar 15, 2022
A web component for progressively-enhanced auto-expanding textareas

Elastic Textarea A web component for progressively-enhanced auto-expanding textareas. This web component progressively enhances the native textarea: a

Cloud Four 29 Jan 9, 2023
An example of Lit web component built with vite for use in capacitor.

Vite + Lit + Capacitor An example of Lit web component built with vite for use in capacitor. Demo Features ✅ Typescript ?? Lit ?? Vite ?? Desktop ?? i

Rody Davis 8 Aug 17, 2022