-
-
Notifications
You must be signed in to change notification settings - Fork 130
Add HTML #44
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.
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
Add HTML #44
Conversation
✅ Deploy Preview for quicksnip ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
public/data/html.json
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you please move the style tag inside the head element ? Like you did for the second example ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Its a pain to do anything afterwards but I did the thing.
We really need a piece of code to go to and from the JSON
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was wondering if this code snippet actually belongs to HTML. As far as I understand, the main point of this snippet is making the header and footer sticky. Since it has more CSS, I feel like it would make sense to add it in CSS instead. Let me know your thoughts.
Yeah it's true that the boundary between HTML and CSS is a bit complicated to place...
I think it belongs in HTML more, because of the fact that it's a "whole" feature/example
For me CSS snippets are more like: "This shows you how to use X feature of CSS" and not: "Here is how you make an element do X with CSS"
I think this belongs in HTML. While it does contain CSS, this snippet is fundamentally about showing a working base layout template.
When people search for HTML examples, they often want complete, working examples they can use as a starting point. CSS snippets are usually about specific styling techniques (like "how to create a gradient" or "how to use grid"), while this is more about "here's a basic webpage layout that works."
The problem is that there's no objective answer here, as both are important. If I where to share the snippet less developed like so:
<!DOCTYPE html> <html style="margin:0"> <head></head> <body style="margin:0;min-height:100vh;display:flex;flex-direction:column"> <div style="position:sticky;top:0">header</div> <div style="flex-grow:1">body</div> <div style="position:sticky;bottom:0">footer</div> </body> </html>
To me it suddenly looks a lot less like it belongs in the CSS category.
Same for:
<!DOCTYPE html> <html style="margin:0"> <head></head> <body style="margin:0;min-height:100vh;display:grid;grid-template-rows:auto 1fr auto"> <div style="display:flex"> Header <nav style="margin-left:auto"> <ul style="display:flex"> <li><a href="#">Contact</a></li> </ul> </nav> </div> <div>Main Content</div> <div>Footer</div> </body> </html>
e741ace
into
quicksnip-dev:main
It adds HTML as a language and adds two snippets for having a webpage with a sticky header and footer.
There's many ways to do this and I've added one for grid and one for flexbox.