Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/praetoriani/web-components

With this repository I would like to show how easy it is to create your own web components using HTML, Javascript and CSS.
https://github.com/praetoriani/web-components

component-library components css framework html html5 javascript javascript-library justplaincode libraries no-frameworks nobullshit reusable-components web-component web-components web-development web-worker

Last synced: about 1 month ago
JSON representation

With this repository I would like to show how easy it is to create your own web components using HTML, Javascript and CSS.

Awesome Lists containing this project

README 

        
![Web Components](./assets/Web-Components-Profile-Image.png)



![Static Badge](https://img.shields.io/badge/Uses%20HTML5-%23525252?style=plastic&logo=html5&logoColor=%2333bbff&label=%20&labelColor=%23525252&link=https%3A%2F%2Fgithub.com%2Fpraetoriani)

![Static Badge](https://img.shields.io/badge/Uses%20CSS3-%23525252?style=plastic&logo=css3&logoColor=%2333CC33&label=%20&labelColor=%23525252&link=https%3A%2F%2Fgithub.com%2Fpraetoriani)

![Static Badge](https://img.shields.io/badge/Uses%20Javascript-%23525252?style=plastic&logo=javascript&logoColor=%23ffd633&label=%20&labelColor=%23525252&link=https%3A%2F%2Fgithub.com%2Fpraetoriani)



## Welcome to my Web Component Repo



I'm pleased that you found your way here to this repository.
I've been working a lot on this private project lately and made some changes to this repository as well.





This repository now has its own website (here on Github). I created this website to provide information about web components as well as to show examples of what is possible with web components. There is also a tutorial in which I explain how to create a simple web component.







## News/Updates



Latest Update: 15.02.2024


In the last few days I have revised the tooltip popup and published a new version. Information about this can be found in the release information. There is also another new web component. The modal window. This is a further development of the Simple Popup. The modal window offers more setting options and can be configured in almost all ways.







## Informations about the website:**

![Website Requirements](./assets/website-requirements.png)





I optimized my website for Google Chome and Microsoft Edge (these browsers have the largest market share).


I tested the website with the following browsers:





Chrome (Version 121.0.6167.140 ) 


Edge (Version 121.0.2277.98) 


Opera One (Version 106.0.4998.70) 


Firefox (Version 122.0) 





The website works perfectly on all chromium-based browsers (with Blink Browser Engine).


This applies to the following browsers:


Chrome , Edge , Opera , Vivaldi , Brave , Bomite





Please note




Currently the website is not optimized for mobile devices. The website can be viewed on mobile devices, but it might be that you'll notice some issues with the layout of the website. 

At the moment the website does not yet fully support Firefox. You might recognize some small design issues.





You can find the website here:


https://praetoriani.github.io/web-components/




I don't want to say too much in advance... but the website starts with an intro animation.

If you would prefer to go directly to the homepage of the website, simply use the following link:


https://praetoriani.github.io/web-components/landingpage.html






## A guide to this repo



Let me give you a short guide on how this repo is structured and how I organzied everything:



 **assets**


Here are just various images that I use in the readme pages.





 **development**


This folder contains all the web components that I have designed so far. So for each web component there is a separate subfolder with the complete source code (including application example). Each web component comes with its own readme (I recommend reading this one). All web components in this folder are not officially released and should therefore only be used for testing and development processes.





 **docs**


This directory is exclusively for the repository website.
All important and relevant data for the website is stored here.





 **releases**


Here you can find the officially released web components. There is a README.MD inside the releases folder ,which contains informations about the current (latest) releases. Each web component has its own subfolder inside the releases folder, which contain all published versions of the web components (as a ZIP archive). The structure will look like this:





 releases


      demo-component


           demo-component-v1.00.01.zip


           demo-component-v1.00.02.zip


      sample-component


           sample-component-v1.00.01.zip






## Important information about the releases

First of all: This whole repo is a private project in which I have invested a lot of time (especially recently). I developed every single web component in my free time and make them available here (under the MIT license).





When developing the web components, I did my best to offer the most flexible and error-free solution possible. But unfortunately I cannot guarantee that all of my code will work without errors on all browsers and under all circumstances. Therefore, I try to cover the largest market share. And this is on chromium-based browsers.





My web components consist of HTML, CSS and Javascript. The code is optimized for all chromium-based browsers that use the Blink Browser Engine. This applies to the current versions of the following browsers:


Chrome , Edge , Opera , Vivaldi , Brave , Bomite





Before I deploy and publish my components, I test them at least with Google Chrome and Microsoft Edge. Unfortunately, due to lack of time, I haven't gotten around to supporting other browsers (browser engines) yet. But I'm working on ensuring that every web component runs on as many browsers as possible. The plan is to create an overview showing which web component supports which browser. There is no complete overview yet, but you can find some informations about compatibility in the README.md in the release folder.





If you want to use my web components, you should remember that I have only developed, tested and released them for chromium-based browser engines.





You can find more informations about the releases and their compatibility in the README.md in the releases folder






## Why isn't Apple/Safari mentioned?

I work with Windows. Apple stopped supporting Safari on Windows back in 2012. The latest version available is Safari 5.1.7. So pretty outdated. Unfortunately, I haven't yet found a satisfying solution to test the website/components for compatibility with Apple/Safari (and the Webkit browser engine). So all I can currently say is that the website/components probably almost certainly work with Safari. But I cannot guarantee that everything will behave as it should.





There is also a requirement from Apple that all browsers under iOS must also use the Webkit browser engine. This means that both, my website and the web components I developed may produce completely different results under iOS with Chrome/Edge/Firefox than it would be the case under Windows.