You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.8 KiB
91 lines
2.8 KiB
<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>
|
|
<code class="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>
|
|
<code class="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>
|
|
<code class="language-javascript">
|
|
import {onMount} from 'svelte';
|
|
|
|
export let theme = localStorage.getItem('theme') ? localStorage.getItem('theme') : 'light';
|
|
|
|
const set_theme = () => {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
}
|
|
|
|
const toggle = () => {
|
|
theme = theme == 'light' ? 'dark' : 'light';
|
|
set_theme();
|
|
}
|
|
|
|
onMount(() => {
|
|
set_theme()
|
|
});
|
|
</code>
|
|
</pre>
|
|
|
|
<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>
|
|
|