Little Corner is a web component library meant to be easy to use and framework agnostic ; with the promise that each component can be completely redesigned. It is based on web standards such as web components or css var and does not use any libraries other than those needed to build it.
Basic exemple :
import { Checkbox } from 'little-corner'
// or
import Checkbox from 'little-corner/dist/components/checkbox/Checkbox'
const tagName = 'lc-checkbox'
customElements.define(tagname, Checkbox)
// or with one line :
customElements.define('lc-checkbox', Checkbox)Once this has been done, we can create this component in any HTML document using only its tag :
<div>
<lc-checkbox></lc-checkbox>
</div>Each component comes with a documentation, an exemple, an exhaustive list of its attributes, an exhaustive list of its events and an exhaustive list of its css vars : custom-elements.md
You can find all webcomponents' documentation in the custom-elements.md. This doc is based on the JSON custom-elements.json which follows the Custom Element Manifest community standard (more infos here).
Info : If a component extends from another component, it also gets its CSS properties (eg. the TickedSlider component has the Slider's CSS Properties).
The documentation is built over the build of the components, you first need to build the project :
npm run buildAfter that, you can run this command to build the custom-elements.json :
npm run cemIf you also want to build the markdown version of the documentation, you can run this command :
npm run cem:md- CSS vars naming convention
- Styling with CSS vars
- Minimum component template
- Handcrafting a component style
- Creating a component
If you are using Windows, you need, before wrinting any code, to change git config with these commands :
git config core.autocrlf false
git rm -rf --cached .
git reset --hard HEAD
And if you are using VsCode, add "files.eol": "\n" in settings.json, then restart it.