weightless
weightless copied to clipboard
andreasbm
Example pages built with weightless
I think it would be great with some sample pages as it would be quicker to spin up a new page that looks great.
I think it will be easier to see how they play together, there is some design inconsistencies with the border-radius with different elements :)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Sample Page</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<wl-nav shadow fixed>
<span slot="title">Header</span>
<div slot="right"><wl-button>Sign in</wl-button></div>
</wl-nav>
<script type="module">
import "https://unpkg.com/weightless/nav?module";
import "https://unpkg.com/weightless/button?module";
</script>
</body>
</html>
Great idea :-) I'm thinking of using code pen to create the example pages - for instance, the code you wrote above is shown here https://codepen.io/andreasbm/pen/oRKVRo. I like that it is easy to visualize and play with. Feedback is welcome.
I'm also working on another project that can help setting up new projects quickly - If you run npm init web-config new my-project --lit you can try it out. It is still very early in its development, but you'll get an idea of how it works. My idea for this is that you should be able to spit out example apps if specified.
