Basics

Hi ✌️

This is a collection of some components that I use from time to time. You can use those components on their own, but when you put it all together, you almost have something lightweight framework-y and fun.
Beware this is a work in progress. It will propably be forever, but right now I haven't even finished writing this document. I'm currently working on more detailed descriptions of everything. Please be patient :)
Here's the repo.

What's in?


How to install?

Clone the repo and work from there. NPM stuff is coming soon.


Design Principles

These components are built with Progressive Enhancement, Separation of Concerns and Accessibility in mind.

Here's why I'm choosing this approach.
Progressive enhancement is a strategy for web design that emphasizes core webpage content first. This strategy then progressively adds more nuanced and technically rigorous layers of presentation and features on top of the content as the end-user's browser/internet connection allow. The proposed benefits of this strategy are that it allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth.
HyperText Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript (JS) are complementary languages used in the development of web pages and websites. HTML is mainly used for organization of webpage content, CSS is used for definition of content presentation style, and JS defines how the content interacts and behaves with the user. Historically, this was not the case: prior to the introduction of CSS, HTML performed both duties of defining semantics and style.
I'm trying to achieve:

Examples

Event Bus

This site lets its components communicate with each other via an event bus.

I'm currently working on a more detailed description and a manual. Until that's done, you might have to dig through my code on how to use it. I suggest starting here or here.


State Machine

A state machine is used to process predefined states. You can bind methods and styles to states.

I'm currently working on a more detailed description and a manual. Until that's done, you might have to dig through my code on how to use it. I suggest starting here.


Component Loader

A component loader proides some basic funtionality and bootstrapping for components, making it easier to set up.

My components are basically just html files with optional css- and js-files. You first write the markup, and then build styles and javascript upon that.

I'm currently working on a more detailed description and a manual. Until that's done, you might have to dig through my code on how to use it. I suggest starting here.


Main Menu

It's this site's main menu. On smaller viewports it's a drawer, on larger viewports it's a big ol' menu. I try to keep at as accessible as possible and working without javascript.

Here's the component.


Article Teaser for DEV.to

Fetch and display an article teaser to a post on DEV.to

Here's the component.


Prototype for Multithreaded Component

This component performs a costly operation to count up to a certain number, but is deferred to a webworker. I try to keep this prototype as simple as possible in order to asbtract it later.

Loading
counting up: 0

Here's the component.


Carousel

A simple carousel and lightweight carousel featuring pointer and touch support and progressively enhanced funcionality. Future iterations of this will include buttons, a center mode and an accessibility audit.

Here's the component.

Modal

A simple modal component.

Here's the component.

Share Links

Here's the component.