thrownewError("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
getnotes(){
thrownewError("<CodeView>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
setnotes(value){
thrownewError("<CodeView>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
}
}
/* src/thumbs/Cards.svelte generated by Svelte v3.30.0 */
<p>The first demo I created and easily the simplest. In fact it may be more complicated than it needs to be because I was just figuring this out at that time. There are a few things that I feel need to be fixed. For speed I just threw in a <b>width: 50ch</b> on the search to get it done. You'll notice that as you shrink the UI this search bar doesn't shrink too, so fixing that would be the first improvement.</p>
<p>You may also notice a couple uses of <b>unset</b> which is simply to disable the MVP.css defaults so that it's closer to Google's.
<p>Instagram's design ends up being the easiest of the big sites. It's just a big simple header with a big simple grid. The end. This is my actual instagram account.
<p>I feel like flexbox was possibly created to solve the "Pinterest challenge." Pinterest has always had this slick ragged elements display for their image listings, and copying it in pure CSS is considered borderline impossible without some amount of JavaScript. In this demo I'm only using flexbox and some JavaScript to generate image thumbs of different lengths. No JavaScript is used to figure out the packing on these columns.
</p>
<p>You'll notice that this mostly works, but if you scroll the bottom the randomized image sizes is not smoothly distributed. To make that work you'd want to use JavaScript to still arrange the contents of the lanes to be relatively the same size.
</p>
<p>You'll also notice I'm using a variable to set the "pinterest red" on some elements as a demonstration:</p>
<pre>
<codeclass="language-css">
:root {
--pin-red: #e60023;
}
header logo {
color: var(--pin-red);
display: flex;
font-size: 1.2em;
}
header nav button#signup {
background-color: var(--pin-red);
color: var(--color-bg);
}
</code>
</pre>
<p>That's simply a demonstration of variables and their use in removing "magic numbers" from your CSS. You can also use this to create alternate views of your CSS and play with different colorschemes easier. Here's the snippet from this site's use of variable to create the darkmode button:</p>
<pre>
<codeclass="language-css">
:root {
--color: #000;
--color-accent: #111;
--color-inactive: #999;
--color-inactive-secondary: #fff;
--color-bg: #fff;
--color-bg-secondary: #eee;
--color-secondary: #666;
--color-secondary-accent: #888;
--color-shadow: #ddd;
--color-shadow-secondary: #fff;
--color-shadow-dark: #888;
--color-bg-inverted: #555;
--color-text: #000;
}
[data-theme="dark"] {
--color: #bbb;
--color-accent: #fff;
--color-bg: #333;
--color-bg-secondary: #555;
--color-shadow-secondary: #333;
--color-secondary: #ddd;
--color-secondary-accent: #ddd;
--color-shadow: #bbb;
--color-text: #fff;
--color-text-secondary: #aaa;
--color-inactive: #666;
--color-bg-inverted: #fff;
}
</code>
</pre>
<p>Then the darkmode JavaScript (with Svelte flavor) is this:</p>
<pre>
<codeclass="language-javascript">
import {onMount} from 'svelte';
export let theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'light';
<p>The magic is in the line <b>document.documentElement.setAttribute('data-theme', theme);</b> which switches the data element in the above CSS to "dark" triggering the variable changes.
<p>This demo has two versions. One just shows how to do a basic layout with 3 tabs and no
interaction. Using flexbox I'm able to simplify the HTML with only <b>a</b> tags rather than the usual pattern of using a <b>ul/li</b> combination. I don't have to use <b>a</b> tags at all and can use anything I can attach an <b>onClick</b> event handler to.
</p>
<p>The second demo does a complete set of 3 tabs with associated panels and the JavaScript necessary to make them work. The code you see here is <ahref="https://svelte.dev">Svelte</a> template code to make the example more succinct, and to provide the handlers and interaction. You could also do this with Vanilla JavaScript with not much more hassle.
</p>
<p>The interactive demo isn't terribly difficult. You need to use a class to toggle the visuals for "active" vs. inactive tabs and panels, and you have to mark the inactive panels <b>display: none</b> so they aren't visible.
</p>
<pre>
<codeclass="language-css">
tabs a.active {
background-color: var(--color-bg-secondary);
}
panel {
display: none;
}
panel.active {
border: 1px solid var(--color-accent);
display: flex;
flex-direction: column;
padding: 1em;
}
</code>
</pre>
<p>It's the only place you need a class for this simple demo. Using classes to design state changes and different
appearances works well since the alternative would be to somehow change the tags, and that won't work.
</p>
<p>Finally, I continue to use my more explicit style of <b>tabs a</b> rather than using classes to avoid specifying the structure I want to select. I would say you don't have to do this, but it does make it a lot easier to find the HTML that a piece of CSS applies to, and also makes sure you aren't accidentally applying a style from somewhere else via the cascade.
<p>Twitter's UI is easily the weirdest and most gross one to implement. They're fond of the card. Cards everywhere, in all different shapes, for all manner of things. You have cards for the login and cards for the related news and cards for each tweet. They also utilize some kind of CSS/HTML generator that <b>loves</b> divs. Figuring out how they do most of this was an exercise in spelunking the div.
</p>
<p>The most difficult part of this is definitely overlaying the profile image on the header image in a reliable way. My version most likely doesn't really match the pixels of Twitter's but mine definitely is simpler. Looking at the code it seems this one header graphic makes up most of the CSS layout.
</p>
<p>This is the first one where I started to realize we have some weird aversion to directional and positional names on tags. I first tried to avoid words like "left", "middle", and "right" because...that's just what we were always told. You'd hear people rant about how naming visual elements with their position is bad form because you may move them, and then those same people never moved them. I'm now thinking using names that match positions is far easier because I can easily mentally map "right" with the things on the actual right of the screen. If I later need to rename it for some arbitrary stylistic irrationality then I can after I get it working.
<p>Youtube's design isn't too difficult once you figure out they're a giant video with a ton of tiles for everything. Related video tiles weirdly come in two sizes, so I just shrink them with this:</p>
<pre>
<codeclass="language-css">
card.small {
--img-width: 100px;
--img-height: 70px;
--font-size: 0.6em;
}
</code>
</pre>
<p>What's interesting about this is I'm using a class <b>small</b> to tag those small cards (aka tiles) but I'm changing their dimensions through the use of CSS variables. The alternative is to alter the CSS settings, but with this I don't have to remember to find everywhere I did that if I ever change the <b>card</b>. As long as those variables are maintained I can change the design of <b>card</b> and everything should keep working across the site.
</p>
<p>I think of this as being closer to how you can subclass in an Object Oriented Programming language. I'm "subclassing" the base <b>card</b> to create <b>card.small</b> and then changing the variables to define what this new variant means.</p>
