Add HTML #44
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
| " <div class=\"body\">body/content</div>", | ||
| " <div class=\"footer\">footer</div>", | ||
| " </body>", | ||
| " <style type=\"text/css\">", |
There was a problem hiding this comment.
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.
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
|
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 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> |
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.