Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Example pages built with weightless #64

Open
kevinsimper opened this issue Jun 2, 2019 · 1 comment
Open

Example pages built with weightless #64

kevinsimper opened this issue Jun 2, 2019 · 1 comment
Labels
feature New feature
Milestone
1.0.0

Comments

@kevinsimper
Copy link

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>
@andreasbm
Copy link
Owner

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.

@andreasbm andreasbm added this to the 1.0.0 milestone Jun 9, 2019
@andreasbm andreasbm added the feature New feature label Jun 9, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature New feature
Projects
None yet
Milestone
1.0.0
Development

No branches or pull requests
2 participants
@kevinsimper @andreasbm