<h1 align=center>snuggsi ツ - Easy Web Elements in <a href=https://github.com/devpunks/snuggsi/tree/master/dist#readme>~1kiloByte</a> </h1> <p align=center> <a href=https://www.npmjs.com/package/snuggsi target=external> <img alt='npm version' src=https://img.shields.io/npm/v/snuggsi.svg></a>

<p align=center> <strong align=center>All you need is a browser and basic understanding of <a href=https://developer.mozilla.org/en-US/docs/Web/HTML target=mdn>HTML</a>, <a href=https://developer.mozilla.org/en-US/docs/Web/CSS target=mdn>CSS</a>, & <a href=https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes target=mdn>JavaScript Classes</a> to be productive!</strong> <p align=center> <q><em>Performance is the art of avoiding work</em></q> - #FreeJewelry 💍 💎 </p>

Navigation

Why ?
Easy Installation
Browser Support
Quick Tour
- <custom-elements>
- Template
Build Process
References
Contributors

Why ?

I have a special disdain for beginner JavaScript tutorials that have you run create-react-app as the first step, and this exercise has only strengthened my conviction that every beginner programmer should get to grips with HTML, CSS and vanilla JS before delving into frameworks. ⸺ "Using the platform" - Elise Hein

You prefer convention over configuration.
Because You (probably) don't need a JavaScript Framework.
You prefer to be D.R.Y. and build reusable web components on a gradual learning curve.
Web Components are ready for production & Custom Elements v1 has support for every 🍃 greenfield browser.

Easy Installation

Made with 💖 Vanilla JS™ No need to learn Node.js, React, Webpack, Babel, or Gulp. (You can if ya want to use snuggsiツ with those tools. But you don't need to!)

#UseThePlatform

snuggsiツ works in a plain ol' *.html file! Simply place the following <script> tag within your page:

<script src=https://unpkg.com/snuggsi></script>

Et Voila (that's it!) ツ

Browser Support

snuggsiツ provides a prolyfill for the following native web platform features:

| Support | Edge* | Chrome* | Firefox* | Safari 9+ | Android* | iOS Safari* | |:----------:|:-----:|:-------:|:--------:|:---------:|:--------:|:--------------:| | Templates |✅ |✅ |✅ |✅ |✅ |✅ | | Custom Elements |✅ |✅ |✅ |✅ |✅ |✅ | | Slot Replacement |✅ |✅ |✅ |✅ |✅ |✅ |

*Indicates the current version of the browser

Quick Tour

snuggsiツ encourages convention over configuration using familiar techniques that are native to all browsers.

Gone are the sleepless nights where your code suffers from <div>itus, or need to install packages on a terminal just to write HTML. People who are more comfortable with HTML should be able to start creating their ideas immediately! You shouldn't have to know CSS or JavaScript! (But it definitely helps if you need styling and functionality).

snuggsiツ believes in using Progressive Enhancement. Not just with your code, but also with your Developer eXperience (DX). We will start from the beginning with a simple Custom Element and gradually enhance functionality step-by-step.

<`custom-elements`>

When picking a tag name for your custom element there are a few naming conventions you must be aware of. The tag name must start with a lowercase letter (a-z) and include at least one hyphen (-). For example, a-b and c- are both valid Custom Element tag names. However, -d and e-F are both invalid tag names due to the former starting with a hyphen and the latter containing an uppercase letter. These requirements distinguish custom elements from standard HTML elements and will ensure forward compatibility. For now, we can simply use hello-world.

`HTML` Declaration

HTML has always been a declarative language. Why not just use it to declare Custom Elements? If you know how to write HTML you can start using snuggsiツ immediately. Sometimes you need to sandbox a section of your page for styling. Other times you need a custom container of complex functionality. In the bad ol' days you would usually start with a generic HTML element declaration (e.g. <div id="hello-world">).

A Brief History Lesson

Not all HTML tags are created equal!

A "valid HTML Element" has always allowed non-standard tag names (as long as you remember to provide a closing tag). In the bad old days of the web, HTML5 elements were once "non-standard" to HTML 4.0. However, these days we have far more flexibility in our markup. For example, some native HTML elements have an optional closing tag (e.g. <p>, <li> & <td>). While self-closing tags can have an optional (/) solidus mark (e.g. <br /> & <img />).

<a>…</a> <!-- valid (hyperlink) -->
<b>…</b> <!-- valid (HTML4.01)-->
<c>…     <!-- invalid (no closing tag) -->
<c>…</c> <!-- valid (HTMLUnknownElement) -->
<p>…</p> <!-- valid (with closing tag)  -->
<p>…     <!-- valid (with optional closing tag)  -->
<img />  <!-- valid (x-HTML self closing tag)  -->
<hr>     <!-- valid (no content tag)  -->

👍 Rule of thumb: Close all non-standard unknown HTML Element tags!

<hr>

As you learned earlier there are a few conventions to adhere to be considered a "valid Custom Element" the HTML tag name will need a lowercase alpha-numeric character followed by a hyphen (at minimum):

<foo></foo> <!-- invalid (CUSTOM element but valid HTML unknown element) -->
<foo-bar>   <!-- invalid (valid tag name, but invalid markup due to no closing tag) -->
<a-></a->   <!-- valid (minimum requirement of starting with an alpha character and includes a hyphen) -->
<foo-bar></foo-bar> <!-- valid (starts with alpha character, includes a hyphen, is completely lowercase, & has a closing tag) -->

👍 Rule of thumb: Use kebab case (with hyphens) for tag names.

<hr>

We now know enough to be dangerous and make your own HTML Custom Element tag:

<hello-world></hello-world>

Et Voila ツ (No really … That's it!)

<hr>

At this point your custom element can be styled using CSS just like any other element.

<style>
  hello-world { background: #bada55 }
</style>

<hello-world>
  Hello
</hello-world>

See A JavaScript-free custom element implementation And Building a <tool-tip> component for more (sans JavaScript) custom elements CSS fun!

<hr>

Live `{token}` Declarations

The {token} is simply a well named dynamic variable you will Describe later. {token}s are placeholders which watch for changes to your custom element's class property of the same name. Since they are "placeholders" and not live code, Front-end designers are no longer blocked by needing to install a JavaScript framework just to write CSS!

<foo-bar> This is a token 👉 {baz} and {bat} is another! </foo-bar>

👍 Rule of thumb: If the {token} name is not in a thesaurus then I probably shouldn't use it.

<hr>

A "live token" is a declarative way to bind data values to your Custom Element. A nice convention to a real historical P.I.T.A. of kee

Snuggsi

Install / Use

README

Navigation

Why ?

Easy Installation

Browser Support

Quick Tour

<`custom-elements`>

`HTML` Declaration

A Brief History Lesson

Live `{token}` Declarations

Snuggsi

Install / Use

README

Navigation

Why ?

Easy Installation

Browser Support

Quick Tour

<custom-elements>

HTML Declaration

A Brief History Lesson

Live {token} Declarations

<`custom-elements`>

`HTML` Declaration

Live `{token}` Declarations