Coffeekraken – Kitchen Sink

Activate

Simple webcomponent extension that give the ability to activate a target element by adding/removing a class on it. Useful to create some toggle, tabs, etc... behaviors.

Hello World #1

Cras cursus diam eu ligula auctor, at tempor felis finibus. Aenean eget vulputate justo.

Fusce quis eleifend felis. Proin placerat gravida sem, ac pharetra arcu aliquet condimentum. Nullam et efficitur metus, vel sagittis odio. Cras gravida mauris vitae ultrices pharetra. Nullam laoreet auctor enim sed placerat. Aliquam erat volutpat. Sed turpis nisi, lacinia at varius vestibulum, volutpat eget lacus. Nulla elementum egestas dolor, ac.

Do something great

Hello World #2

Cras cursus diam eu ligula auctor, at tempor felis finibus. Aenean eget vulputate justo.

Hello World #3

Cras cursus diam eu ligula auctor, at tempor felis finibus. Aenean eget vulputate justo.

Fusce quis eleifend felis. Proin placerat gravida sem, ac pharetra arcu aliquet condimentum. Nullam et efficitur metus, vel sagittis odio. Cras gravida mauris vitae ultrices pharetra. Nullam laoreet auctor enim sed placerat. Aliquam erat volutpat. Sed turpis nisi, lacinia at varius vestibulum, volutpat eget lacus. Nulla elementum egestas dolor, ac.

Hello World #4

Cras cursus diam eu ligula auctor, at tempor felis finibus. Aenean eget vulputate justo.

Fusce quis eleifend felis. Proin placerat gravida sem, ac pharetra arcu aliquet condimentum. Nullam et efficitur metus, vel sagittis odio. Cras gravida mauris vitae ultrices pharetra. Nullam laoreet auctor enim sed placerat. Aliquam erat volutpat. Sed turpis nisi, lacinia at varius vestibulum, volutpat eget lacus. Nulla elementum egestas dolor, ac.

Accordion title #1: Quis sociosqu praesent faucibus quam

Eleifend rhoncus augue dictum per ornare in senectus habitant turpis ultrices adipiscing est a feugiat urna ac amet natoque praesent convallis hac sem id class et inceptos ipsum enim tincidunt

Penatibus a tristique cubilia sociis accumsan conubia sollicitudin suspendisse adipiscing nisi habitasse luctus hac augue mollis pharetra senectus amet faucibus
Accordion title #2: Quis sociosqu praesent faucibus quam

Eleifend rhoncus augue dictum per ornare in senectus habitant turpis ultrices adipiscing est a feugiat urna ac amet natoque praesent convallis hac sem id class et inceptos ipsum enim tincidunt
Accordion title #3: Quis sociosqu praesent faucibus quam

Back to top

Provide an easy to use 'back to top' component that let you total control over the display

This component is used on this website to create the back to top button on the bottom right.

Custom scrollbar

Simple webcomponent that let you skin the scrollbar as you want. It use internally the nice "simplebar" library

Duis volutpat vehicula aliquam. Praesent aliquet ac orci et vehicula. Fusce pharetra eleifend orci, vulputate consectetur risus vehicula vitae. Pellentesque sed mauris id elit semper interdum. Pellentesque dictum sollicitudin risus tincidunt consectetur. Fusce imperdiet nec purus eu eleifend. Ut feugiat ultricies finibus. In eu enim eget libero aliquet venenatis. Praesent gravida ligula id mauris cursus mollis. Aenean lacinia ullamcorper tincidunt. Sed posuere ultrices tortor, sit amet convallis leo rutrum non.

Equalize

Simply made some equal height columns

Column 1

Integer congue a nibh sed elementum. Mauris ligula sem, scelerisque.

More infos...

Column 2

Donec scelerisque eu felis sit amet sodales. Nam sit amet lacus purus. Aliquam rutrum facilisis velit non egestas. Maecenas condimentum condimentum eleifend. Ut sed massa tempus, pellentesque orci id, facilisis dolor. Integer ac ligula convallis, egestas sem ut, luctus purus.

More infos...

Column 3

Donec scelerisque eu felis sit amet sodales. Nam sit amet lacus purus. Aliquam rutrum facilisis velit non egestas. Maecenas condimentum condimentum eleifend.

More infos...

Internal page nav

Provide a simple way to create a nice internal page navigation that automaticaly activate the good link depending on the displayed section

This component is used in the sidemenu to the left of this website.

Lit-html

Base class that allows the creation of [lit-html](https://lit-html.polymer-project.org/) based webcomponent

One time display

Webcomponent that provide the ability to display itself depending on a cookie or a local|sessionStorage flag

I will be displayed until someone click on the button bellow

Scroll to

Extension to the anchor tag that provide an easy way to specify a target to scroll to smoothly

Scroll top page top

Share

Easily create some share buttons to target facebook, twitter, linkedin, google+, etc...

Share on Facebook

Share on Twitter

Share on LinkedIn

Sticky

Stick any items with ease inside his container or depending on a totaly different element with full control over the display

Hello red sticky element

Hello violet sticky element

Template

Base class that allows the creation of JSX ([inferno](https://infernojs.org/)) based webcomponent.

Topbar show on scroll up

Provide a simple way to create a topbar that display/hide itself on scroll up/down

Check the topbar of this website that is using this component...

Hello World

Hello World

Join us on

Utils

{{ yml.title }}

{{ yml.title }}

Activate

Hello World #1

Hello World #2

Hello World #3

Hello World #4

Quis sociosqu praesent faucibus quam

Quis sociosqu praesent faucibus quam

Quis sociosqu praesent faucibus quam

Back to top

Custom scrollbar

Equalize

Column 1

Column 2

Column 3

Internal page nav

Lit-html

One time display

Read more

Scroll to

Sticky

Template

Topbar show on scroll up

Our tools

Contribute

Join us