p9.textContent="They could but I haven't taken the time to make them adapt. That may come in a later release. Try it anyway\nas you may be surprised how well the layouts still work on smaller screens.";
p9.textContent="I haven't done the work needed to adapt this to phones yet. That may come in a later release. Try it anyway\nas you may be surprised how well the layouts still work on smaller screens.";
t87=space();
h25=element("h2");
h25.textContent="Can I suggest a challenge?";
t89=space();
p10=element("p");
t90=text("Yes please. If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on ");
a=element("a");
a.textContent="Twitter at @lzsthw";
a0=element("a");
a0.textContent="Twitter at @lzsthw";
t92=text(" and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using. This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks. Also keep in mind that I am not invested in \"winning\" and only curious about the limits of flexbox and CSS grids. If you find something I can't do, that means I found a useful limit to avoid. It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s.");
t93=space();
h26=element("h2");
h26.textContent="How did you make this site?";
t95=space();
p11=element("p");
t96=text("It's actually all hand coded HTML, CSS, and JavaScript, with the only technology being ");
a1=element("a");
a1.textContent="Svelte";
t98=text(" to make things easier. You could do all of this without Svelte and it wouldn't be much harder. Svelte is why if you do \"view source\" it's a mostly empty HTML page that just loads some JavaScript, and if you inspect the results it's full of ");
b28=element("b");
b28.textContent="svelte-";
t100=text(" classes. If you want to see the real HTML then each demo has the source given.");
attr_dev(h1,"class","svelte-c8ddwn");
add_location(h1,file$B,7,2,61);
add_location(section,file$B,6,0,49);
@ -15194,9 +15215,14 @@ var app = (function () {
add_location(h24,file$B,39,0,4645);
add_location(p9,file$B,40,0,4685);
add_location(h25,file$B,43,0,4879);
attr_dev(a,"href","https://twitter.com/lzsthw");
add_location(a,file$B,44,123,5038);
attr_dev(a0,"href","https://twitter.com/lzsthw");
add_location(a0,file$B,44,123,5038);
add_location(p10,file$B,44,0,4915);
add_location(h26,file$B,47,0,5629);
attr_dev(a1,"href","https://svelte.dev");
add_location(a1,file$B,49,90,5757);
add_location(b28,file$B,49,372,6039);
add_location(p11,file$B,49,0,5667);
},
l:functionclaim(nodes){
thrownewError("options.hydrate only works if the component was compiled with the `hydratable: true` option");
<p>All this website does is demonstrate that you don't need <b>so much div.class</b>. You can scrap a lot of what you're using now to do layout and go with clean HTML with flatter structure, then judiciously use <b>div.class</b> as needed. Treat <b>div.class</b> like salt. Right now you're pouring a whole box of it on your HTML when a little bit makes it taste better.</p>
<h2>Do these demos work on phones?</h2>
<p>They could but I haven't taken the time to make them adapt. That may come in a later release. Try it anyway
<p>I haven't done the work needed to adapt this to phones yet. That may come in a later release. Try it anyway
as you may be surprised how well the layouts still work on smaller screens.</p>
<h2>Can I suggest a challenge?</h2>
<p>Yes please. If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on <ahref="https://twitter.com/lzsthw">Twitter at @lzsthw</a> and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using. This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks. Also keep in mind that I am not invested in "winning" and only curious about the limits of flexbox and CSS grids. If you find something I can't do, that means I found a useful limit to avoid. It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s.
</p>
<h2>How did you make this site?</h2>
<p>It's actually all hand coded HTML, CSS, and JavaScript, with the only technology being <ahref="https://svelte.dev">Svelte</a> to make things easier. You could do all of this without Svelte and it wouldn't be much harder. Svelte is why if you do "view source" it's a mostly empty HTML page that just loads some JavaScript, and if you inspect the results it's full of <b>svelte-</b> classes. If you want to see the real HTML then each demo has the source given.
