Inspired by Github's callout elements, I published a native web component for adding your own Callout Alerts in HTML! 🎉

https://github.com/JRJurman/callout-alert

It's customizable with both CSS Variables and slot elements, and comes with an icon library for any icon you might want! 🔧

After a full year working on a library to build Web Components, this is admittedly the first one I've published outside of any specific project, but it won't be the last! 😁

#TramLite #WebComponents #WebDev #HTML

GitHub - JRJurman/callout-alert: Markdown Callouts, as a Web Component, written in Tram-Lite

Markdown Callouts, as a Web Component, written in Tram-Lite - GitHub - JRJurman/callout-alert: Markdown Callouts, as a Web Component, written in Tram-Lite

GitHub

External Scripts are now supported in Tram-Lite 🎉

You can use this to load other javascript libraries in your web components, simply by including a script tag 🔧

For a long while, I wasn't totally sure what tradeoffs I would need here, but it turned out to be pretty straight-forward 😁

https://codepen.io/JRJurman/pen/dyrMzyB

#TramLite #WebComponents #Javascript #WebDev

Tram-Lite - v5.2.0 - External Scripts

...

I love being able to take simple examples on #codepen and being able to translate them directly into reusable #WebComponents

#TramLite makes this super easy because I can take the content, styles, and script tags directly, and don't have to do anything wonky to port them to Web Component classes.

In this example, I create a web component for wavy text. It also includes parameters for the speed, delay for each letter, and bounce distance.

https://codepen.io/JRJurman/pen/BaboYKM

#WebDev #HTML

Tram-Lite - Wavy Text

...

Based on @argyleink amazing compare component, I built a re-usable #WebComponents version of his demo in #TramLite 🎉

Tram-Lite's declarative HTML interface made it pretty simple to port over, and now I can make as many drag-compare elements as I want 😆

https://codepen.io/JRJurman/pen/OJqJbap

Tram-Lite - Declarative Compare Component

...

Tram-Lite v5 is now available 🥳

* new custom element tl-broadcast, that emits events on attribute changes
* new attribute tl-rebroadcast, that can map existing events to new events out from the element

Both of these can emit events up or down the light and shadow DOM, making it possible to define powerful behavior between components, all in HTML! 😮

Check out the docs and examples on the website! 📜

https://tram-one.io/tram-lite/

#TramLite #WebComponents #htmlFirst #WebDev #HTML

Tram-Lite

Declarative HTML library for native web-components

Added #CodePen live widgets to the Tram-Lite documentation. It's awesome to be able to embed a live playground in any page, and makes it that much easier for people to kick-start using the project. 🎉

And, since everything is in #html there's no tab switching required 😁

Check it out here: https://tram-one.io/tram-lite/#tl-definition

#TramLite #htmlFirst

Tram-Lite

Declarative HTML library for native web-components

Happy to share that Tram-Lite now supports exporting and importing components! 🎉

This means you can create web-components with Tram-Lite and share them to be used in any project! 🔧

You can read all the details here: https://tram-one.io/tram-lite/#importing-and-exporting

If you haven't already, now is the best time to start building
(and now sharing) components with Tram-Lite!

If you make something cool, you can even make a PR for some hacktoberfest cred 🎃  

#WebComponents #WebDev #HTML #TramLite #HTMLfirst

Tram-Lite

Declarative HTML library for native web-components

#hacktoberfest has officially started 🎃  

I hope everyone has some awesome projects they are working on, and a great experience working with the open source community 🎉

If people are looking for a project to contribute to, Tram-Lite has a call for Projects and Posts.

https://github.com/Tram-One/tram-lite/issues/39

If you write a blog post, a small component in codepen, or a full blown project, it's all fair game for making a PR and linking on the website! 🔗

#TramLite #WebDev #FrontEnd

Call for Projects & Posts #hacktoberfest · Issue #39 · Tram-One/tram-lite

Summary As part of hacktoberfest, and because it would generally useful, there is now a Project & Posts page. You can see the page live here: https://tram-one.io/tram-lite/#projects-and-posts The s...

GitHub

Excited for the new Tram-Lite v4 - which makes Tram-Lite an HTML-first library for developers that want to build and work with web-components! 🎉

https://tram-one.io/tram-lite/

Attributes for 2-way data binding, and retriggering scripts on attribute changes, all in HTML 😮

Also, a way for developers to build their own custom behaviors for elements! 🔧

This has been in the works for a long while, and there's still more awesome things to come! 😁

#WebDev #WebComponents #TramLite #HTML #htmlFirst

Tram-Lite

Declarative HTML library for native web-components

Very excited about what will be the v4 release of Tram-Lite - an HTML-first way to build or enhance web-components!

https://github.com/Tram-One/tram-lite/pull/30

There's still some administrivia, docs and so on, but if anyone is interested, there's a beta release that people can try out right now!

https://unpkg.com/tram-lite@beta

Happy to take any questions and feedback here on Mastodon!

#WebComponents #HTML #htmlFirst #TramLite

HTML First Interface - v4 by JRJurman · Pull Request #30 · Tram-One/tram-lite

Summary This version is available by pointing to tram-lite@beta. https://unpkg.com/tram-lite@beta This version focuses on an HTML first interface, allowing developers to build complex behaviors in ...

GitHub