+
+
+
+ 
+
+ Website + · + Guides + · + Components + · + Documentation + · + Blog +
-For some more details see the [announcement blog post](https://medium.com/ing-blog/ing-open-sources-lion-a-library-for-performant-accessible-flexible-web-components-22ad165b1d3d). + -[](https://www.tickgit.com/browse?repo=github.com/ing-bank/lion) +**Lion is a set of highly performant, accessible and flexible Web Components.!** -## Demos +They provide an unopinionated, white-label layer that can be extended to your own layer of components. -We do have a [live Storybook](http://lion-web-components.netlify.com) which shows all our components. +- **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies. +- **Accessibility:** Aimed at compliance with the WCAG 2.1 AA standard to create components that are accessible for everybody. +- **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs. +- **Modern Code:** Lion is distributes as pure es modules. +- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form. -**Please note:** This project uses Yarn [Workspaces](https://classic.yarnpkg.com/en/docs/workspaces). If you want to run all demos locally you need to get [Yarn](https://classic.yarnpkg.com/en/docs/install) and install all dependencies by executing `yarn install`. - -The code examples make use of [Javascript tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) which are a key component of the [lit-html engine](https://lit-html.polymer-project.org/) used in Lion. -Additionally imports like `import '@lion/form/lion-form.js'` need to be transformed somehow, for example by [es-dev-server](https://open-wc.org/developing/es-dev-server.html#node-resolve). - -## Features - -- High Performance - Focused on great performance in all relevant browsers with a minimal number of dependencies -- Accessibility - Aimed at compliance with the WCAG 2.1 AA standard to create components that are accessible for everybody -- Flexibility - Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs -- Pure ES Modules -- Exposes functions/classes and Web Components - -> Note: These demos may look a little bland but that is on purpose. They only come with functional stylings. +> Note: Our demos may look a little bland but that is on purpose. They only come with functional stylings. > This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings. + + ## How to install ```bash @@ -82,7 +104,7 @@ You can also use the lion elements directly, although this is likely not a commo ```htmlLorem ipsum dolor sit, amet consectetur adipisicing elit.
++ Laboriosam sequi odit cumque, enim aut assumenda itaque quis voluptas est quos fugiat unde + labore reiciendis saepe, iure, optio officiis obcaecati quibusdam. +
+Lorem ipsum dolor sit, amet consectetur adipisicing elit.
++ Laboriosam sequi odit cumque, enim aut assumenda itaque quis voluptas est quos fugiat unde + labore reiciendis saepe, iure, optio officiis obcaecati quibusdam. +
+content 1
+content 2
+content 1
+content 2
+content 1
+content 2
+ ${this.__collection.map( + item => html` + +${item.content}
+ `, + )} +${item.content}
+ `)} +Lorem ipsum dolor sit, amet consectetur adipisicing elit.
++ Laboriosam sequi odit cumque, enim aut assumenda itaque quis voluptas est quos fugiat unde + labore reiciendis saepe, iure, optio officiis obcaecati quibusdam. +
+Info page with lots of information about us.
+ +Work page that showcases our work.
+Info page with lots of information about us.
+Work page that showcases our work.
+Find some more info about our favorite movies:
++ Cars is a 2006 American computer-animated comedy film produced by Pixar Animation Studios + and released by Walt Disney Pictures. +
++ The feature film directorial debut of John Lasseter, it was the first entirely + computer-animated feature film, as well as the first feature film from Pixar. +
+Work page that showcases our work.
+panel 1
+ +panel 2
+panel 1
+ +panel 2
+ ${this.__collection.map( + item => html` + +${item.panel}
+ `, + )} +${item.panel}
+ `)} +Info page with lots of information about us.
+ +Work page that showcases our work.
+