parent
d0c1a3b39b
commit
22e8fb8eeb
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,14 @@ |
||||
<p>The HTML in this demo is using the Svelte templating system to generate a bunch of fake dates. This makes it easier for you to see the essential HTML, but might confuse you if you don't know the syntax.</p> |
||||
|
||||
<p>This CSS demo uses the grid system to create a 7 column grid, but <b>auto</b> rows. You then just write each date as a tag and the grid does the rest for you. You should also notice how I did the month display on the top:</p> |
||||
|
||||
<pre> |
||||
<code class="language-css"> |
||||
calendar month { |
||||
grid-column: span 7; |
||||
} |
||||
</code> |
||||
</pre> |
||||
|
||||
<p>When you're dealing with a regular grid like this it's easier to use numeric indexes, but I think for more complex layouts it's better to use the method in <a href="/#/demos/GridOverGraphic">GridOverGraphic</a> where you name the grid cells instead of using numbers.</p> |
||||
|
||||
@ -0,0 +1,2 @@ |
||||
<p>A card is another container similar to a <a href="/#/demos/Tiles">Tiles</a> but vertical. You'll also notice the main image takes over the entire space so its main focus is on displaying an image with text and buttons. There's various ways to organize a card, but I chose just one that was common.</p> |
||||
<p> |
||||
@ -0,0 +1,55 @@ |
||||
<p>When you use Photoshop--or any visual editing software--you have the concept of "layers". If your page is A4 size, and you create 10 layers, then it has 10 A4 sized invisible sheets stacked on top of each other. It's a simple concept that's so simple it's weird to explain it, and yet the browser does not have this essential concept needed for advanced compositing.</p> |
||||
|
||||
<p>To accomplish the same thing in CSS you have to follow this process:</p> |
||||
|
||||
<ol> |
||||
<li>Create an outer box that is set to <b>position: relative</b> or any position that's not <b>static</b>.</li> |
||||
<li>Create an inner box that's set to <b>position: absolute</b>.</li> |
||||
<li>Set this inner box (the bottom layer) to <b>top</b>, <b>bottom</b>, <b>left</b>, <b>right</b> all to <b>0</b>, which sticks the layer's dimensions to the same as the outer box.</li> |
||||
<li>Place your next layer on this like normal by putting it inside the outerbox.</li> |
||||
<li>Use the <b>z-index:</b> to alter the layers' ordering if the natural ordering isn't correct.</li> |
||||
</ol> |
||||
|
||||
<p>The secret that nobody tells you is <b>position:absolute</b> has a footgun which makes it behave differently depending on its outer box. If your outer box doesn't have a position set then your attempt to use <b>position:absolute</b> will cover the entire browser window, <b>but</b> if the outer box is given any other position setting <em>then</em> the <b>position:absolute</b> will cover the outer box.</p> |
||||
|
||||
<p>So the next time a CSS guru says to you, "just use position:absolute", you can fire back a strategically placed sniper shot of, "Don't you mean use position:absolute inside another box set to position:relative or did you not know that?"</p> |
||||
|
||||
<h2>Using Named Grid Cells</h2> |
||||
<p>The most important thing about this demo is using <b>named grid cells</b> using <b>grid-template-areas:</b> in the grid, and then using <b>grid-area:</b> in each element you want in the cell. First, I set the <b>overlay</b>: |
||||
|
||||
<pre> |
||||
<code class="language-css"> |
||||
overlay { |
||||
display: grid; |
||||
grid-template-columns: repeat(2,1fr); |
||||
grid-template-rows: auto; |
||||
grid-template-areas: |
||||
"topleft topright" |
||||
"middle middle" |
||||
"bottomleft bottomright"; |
||||
} |
||||
</code> |
||||
</pre> |
||||
|
||||
<p>You name the areas using <b>"name name name"</b> for each column, and you can set a cell empty using the dot (.) as a name. In the above example I have <b>"topleft topright"</b> for the first row, <b>"middle middle"</b> for the second row, and <b>"bottomleft bottomright"</b> for the last row. You'll also notice I used "middle middle" so that when I use that name it will cover <b>both</b> grid cells.</p> |
||||
|
||||
<p>Once I have this setup I just have to give each cell a name. Here's the relevant part of the code from the demo:</p> |
||||
|
||||
<pre> |
||||
<code class="language-css"> |
||||
one { |
||||
grid-area: topright; |
||||
} |
||||
|
||||
two { |
||||
grid-area: middle; |
||||
} |
||||
|
||||
three { |
||||
grid-area: bottomleft; |
||||
} |
||||
</code> |
||||
</pre> |
||||
|
||||
<p>Make sure you see how these are mapping from the original source so you know that it works. A very nice feature of this is you can change the positions of these tags <b>without</b> changing the HTML. You just give them a new <b>grid-area:</b> name and it will be put in that cell (or cells).</p> |
||||
|
||||
@ -0,0 +1 @@ |
||||
<p>Most of this demo is done for me with <a href="https://andybrewer.github.io/mvp/">mvp.css</a> and all I'm doing is placing it in a standard flexbox content block. I may redo this using flexbox to demonstrate how to do it better.</p> |
||||
@ -0,0 +1,23 @@ |
||||
<p>Once again we have the common "panel/card/tile" container theme. There's not much new here except for the way I made the buttons take up an entire strip on the bottom:</p> |
||||
|
||||
<pre> |
||||
<code class="language-css"> |
||||
panel bottom { |
||||
flex-shrink: 0; |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-evenly; |
||||
} |
||||
|
||||
panel bottom button { |
||||
display: flex; |
||||
margin: 0; |
||||
border-radius: unset; |
||||
width: 100%; |
||||
justify-content: space-evenly; |
||||
} |
||||
</code> |
||||
</pre> |
||||
|
||||
<p>The key to this is setting <b>justify-content: space-evenly</b> on the containing <b>panel bottom</b>, then set the width of each button to 100% with <b>width: 100%</b>. There are other ways to force the buttons to max width, but I've found width:100% is the most reliable method. |
||||
</p> |
||||
@ -0,0 +1,19 @@ |
||||
<p>Tiles, Cards, Panels, and Sheets all seem to be similar containers with slightly different directional organization. There isn't any official terminology so I went with this being the kind of panel you'd find in Youtube's UI, especially in the comments section and related videos. I've added a couple buttons in the top right to demonstrate how that works, which also means this can function as a toast pattern too if you wanted. |
||||
</p> |
||||
|
||||
<p>The key to this UI realizing that it's actually 3 columns, not 2 rows. The first column has the 48x48 image, then the title/content, then the buttons. Since the main tile component already uses a <b>flex-direction: row</b> the 48x48 image will automatically be on the left, and we only need to have CSS for the middle and right. You should also look at this little bit:</p> |
||||
|
||||
<pre> |
||||
<code class="language-css"> |
||||
tile middle { |
||||
/* ... */ |
||||
flex-shrink: 3; |
||||
} |
||||
|
||||
tile right { |
||||
flex-shrink: 0; |
||||
} |
||||
</code> |
||||
</pre> |
||||
|
||||
<p>Setting <b>flex-shrink: 0</b> sets that column to not shrink (collapse) when it gets small. Without this the buttons would go vertical when the UI is shrunk down. I also found I had to put <b>flex-shrink: 3</b> on the middle component or it would expand as the amount of text increased. This forces it to shrink significantly when possible while keeping the buttons on the right solid.</p> |
||||
@ -1 +0,0 @@ |
||||
<h1>About Page</h1> |
||||
Loading…
Reference in new issue