Skip to content

Commit

Permalink
more nudging and prep for release
Browse files Browse the repository at this point in the history
  • Loading branch information
@argyleink
argyleink committed Nov 26, 2018
1 parent 406afc7 commit 4f9deea
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 54 deletions.
16 changes: 12 additions & 4 deletions app/demo/artboard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,18 @@
}
}

& .tip {
margin-top: 0;
margin-bottom: 0;
font-size: 0.9rem;
& .tips {
display: grid;
grid-gap: 0.5rem;
border: 1px solid var(--darkest-grey);
border-radius: 1rem;
padding: 0.5rem 0.75rem;

& > p {
margin-top: 0;
margin-bottom: 0;
font-size: 0.8rem;
}
}

& > [grid][vertically-aligned] {
Expand Down
7 changes: 4 additions & 3 deletions app/demo/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ img {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: right;
justify-content: space-between;
grid-gap: 0.5rem;
}
}
Expand Down Expand Up @@ -192,11 +192,12 @@ img {

kbd {
font-weight: bold;
font-size: 1rem;
background: var(--lighter-grey);
border-radius: 0.5rem;
padding: 0.1em 0.6em 0.4em;
padding: 0.1em 0.6em 0.2em;
position: relative;
bottom: 0.2em;
bottom: 0.05em;
}

.key {
Expand Down
1 change: 1 addition & 0 deletions app/demo/shapes.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
&.google-yellow { background-color: #F4B400; width: 15vw; height: 15vw; }
&.google-red { background-color: #DB4437; width: 15vw; height: 15vw; }
&.google-green { background-color: #0F9D58; width: 15vw; height: 15vw; }
&.shadow-circle { background-color: white; box-shadow: 0 10px 30px 2px hsla(0,0%,0%,20%); }
}

[round-icon] {
Expand Down
109 changes: 62 additions & 47 deletions app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,9 +116,9 @@ <h2 class="You_did_it!"><b class="You_did_it!">Click</b> Me 😏</h2>

<article span2x1 class="artboard" padded grid vertically-distributed="between">
<label>Keyboard Nav</label>
<div>
<p class="tip">💡 <kbd>Tab</kbd> & <kbd>Shift + Tab</kbd> traverse laterally</p>
<p class="tip">💡 <kbd>Enter</kbd> & <kbd>Shift + Enter</kbd> traverse lineage</p>
<div class="tips">
<p> <kbd>Tab</kbd> & <kbd>Shift + Tab</kbd> traverse laterally</p>
<p> <kbd>Enter</kbd> & <kbd>Shift + Enter</kbd> traverse lineage</p>
</div>
<div grid horizontally-distributed="between" vertically-aligned="center">
<div class="outlined-square" grid horizontally-distributed="around" vertically-aligned="center">
Expand All @@ -139,10 +139,10 @@ <h2 class="You_did_it!"><b class="You_did_it!">Click</b> Me 😏</h2>

<article span2x1 select-multiple padded class="artboard" grid vertically-distributed="between">
<label class="Learn_to_select_multiple_items_👇">Select Multiple</label>
<div>
<p class="tip">💡 Hold <kbd>shift</kbd> to manually multi-select</p>
<p class="tip">💡 Press <kbd>cmd+e</kbd> to expand your selection</p>
<p class="tip">💡 Press <kbd>cmd+shift+e</kbd> to expand to all matches</p>
<div class="tips">
<p> Hold <kbd>shift</kbd> to manually multi-select</p>
<p> Press <kbd>cmd+e</kbd> to expand your selection</p>
<p> Press <kbd>cmd+shift+e</kbd> to expand to all matches</p>
</div>
<div grid vertically-aligned="center">
<span class="tip">try here 👉</span>
Expand All @@ -165,8 +165,8 @@ <h2 class="You_did_it!"><b class="You_did_it!">Click</b> Me 😏</h2>

<article span1x2 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Margin Tool</label>
<div>
<p class="tip">💡 Hotkey <kbd>m</kbd></p>
<div class="tips">
<p> Hotkey <kbd>m</kbd></p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center">
<nav margin>
Expand All @@ -189,8 +189,8 @@ <h2 class="Press_the_delete_key!">Ad</h2>

<article span1x1 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Guides</label>
<div>
<p class="tip">💡 Redlines & distance coming soon!</p>
<div class="tips">
<p> Redlines & distance coming soon!</p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center">
<h3>Am I in the center?<span class="👾_wtf_is_this? delete_it!">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></h3>
Expand Down Expand Up @@ -225,8 +225,8 @@ <h2>BUT<br>

<article span1x1 padded class="artboard" grid="rows" vertically-distributed="between">
<label class="Learn_to_multiply_items_👇">Duplicate</label>
<div>
<p class="tip">💡 Press <kbd>cmd+d</kbd></p>
<div class="tips">
<p> Press <kbd>cmd+d</kbd></p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center" horizontally-distributed="around">
<button class="mdc-button mdc-button--raised" style="margin-bottom:0.5rem;">Submit</button>
Expand All @@ -235,9 +235,9 @@ <h2>BUT<br>

<article copy_paste padded span2x1 class="artboard" grid vertically-aligned="center" vertically-distributed="between">
<label>Copy/Paste Elements</label>
<div>
<p class="tip">💡 Copy the circle <b>from the left box</b> and paste it <b>in the right box</b></p>
<p class="tip">💡 Works across tabs!</b></p>
<div class="tips">
<p> Copy the circle <b>from the left box</b> and paste it <b>in the right box</b></p>
<p> Works across tabs!</b></p>
</div>
<div grid horizontally-distributed="around" vertically-aligned="center">
<div class="outlined-square" grid horizontally-distributed="around" vertically-aligned="center">
Expand All @@ -250,10 +250,10 @@ <h2>BUT<br>

<article span2x1 class="artboard" padded grid="rows" vertically-distributed="equal">
<label>Copy/Paste Styles</label>
<div>
<p class="tip">💡 Copy styles with <kbd>cmd+opt+c</kbd></p>
<p class="tip">💡 Paste copied styles with <kbd>cmd+opt+v</kbd></p>
<p class="tip">💡 <b>For fun:</b> copy the styles of a dark artboard and paste it over some light artboards</p>
<div class="tips">
<p> Copy styles with <kbd>cmd+opt+c</kbd></p>
<p> Paste copied styles with <kbd>cmd+opt+v</kbd></p>
<p> <b>For fun:</b> copy the styles of a dark artboard and paste it over some light artboards</p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center" horizontally-distributed="around">
<button class="mdc-button mdc-button--raised" style="background:hsl(0,0%,10%);color:hsl(0,0%,70%);">Copy my darkness</button>
Expand Down Expand Up @@ -281,8 +281,8 @@ <h2>BUT<br>

<article span3x1 class="artboard" padded grid vertically-distributed="equal">
<label>Text Styles</label>
<div>
<p class="tip">💡 Multiselect these headings and edit the ramp with the font tool</p>
<div class="tips">
<p> Multiselect these headings and edit the ramp with the font tool</p>
</div>
<div text-styles>
<h1>The quick brown fox jumps over the lazy dog</h1>
Expand All @@ -296,8 +296,8 @@ <h6>The quick brown fox jumps over the lazy dog</h6>

<article span2x1 class="artboard" padded grid vertically-distributed="between">
<label>Move Tool</label>
<div>
<p class="tip">💡 <b>Fix the order</b> of the circles below</p>
<div class="tips">
<p><b>Fix the order</b> of the circles below</p>
</div>
<div ordered-numbers fit-height>
<div class="filled-circle">3</div>
Expand All @@ -310,7 +310,9 @@ <h6>The quick brown fox jumps over the lazy dog</h6>

<article span1x2 class="artboard" padded grid="rows" vertically-distributed="equal" horizontally-aligned="center">
<label>Move Tool</label>
<p class="tip">💡 Flow direction can make left/right be up/down 🤔</p>
<div class="tips">
<p >Flow direction can make left/right be up/down 🤔</p>
</div>
<div stop-light fit-height>
<div class="filled-circle green"></div>
<div class="filled-circle yellow"></div>
Expand Down Expand Up @@ -338,11 +340,11 @@ <h2>Site<br>
</div>
</article>

<article span2x2 class="artboard" grid horizontally-distributed="equal">
<article padded span2x2 class="artboard" grid="rows" horizontally-distributed="space-between">
<label>Inline SVG</label>
<div padded>
<p class="tip">💡 delete, copy, paste, duplicate</p>
<p class="tip">💡 change color, move x/y, inspect</p>
<div padded class="tips">
<p>Delete, copy, paste, & duplicate svg!</p>
<p>Change color, move x/y, & inspect svg!</p>
</div>
<div grid vertically-aligned="center" horizontally-aligned="center">
<svg height="90%" width="90%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
Expand Down Expand Up @@ -373,8 +375,8 @@ <h2>Site<br>

<article span2x1 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Padding Tool</label>
<div>
<p class="tip">💡 Hotkey <kbd>p</kbd></p>
<div class="tips">
<p> Hotkey <kbd>p</kbd></p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center">
<nav>
Expand All @@ -387,10 +389,13 @@ <h2>Site<br>
</div>
</article>

<article span1x1 padded class="artboard">
<article span1x1 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Drop Shadow Tool</label>
<div>
<p class="tip">💡 Hotkey <kbd>d</kbd></p>
<div class="tips">
<p>Hotkey <kbd>d</kbd></p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center">
<div class="filled-circle shadow-circle"></div>
</div>
</article>

Expand All @@ -406,9 +411,9 @@ <h2>for help</h2>

<article span1x1 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Position Tool</label>
<div>
<p class="tip">💡 Hotkey <kbd>l</kbd></p>
<p class="tip">💡 Click to select, then click hold and drag anything around</p>
<div class="tips">
<p> Hotkey <kbd>l</kbd></p>
<p> Click to select, then click hold and drag anything around</p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center">
<p style="text-align: center;">Move this artboard to somewhere wierd!</p>
Expand All @@ -417,8 +422,8 @@ <h2>for help</h2>

<article span2x1 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Align Tool</label>
<div>
<p class="tip">💡 Hotkey <kbd>a</kbd></p>
<div class="tips">
<p> Hotkey <kbd>a</kbd></p>
</div>
<div class="Use_the_align_tool_arrow_keys_on_me!" fit-height grid vertically-aligned="center" horizontally-aligned="center">
<a class="padding-link" href="#">Left</a>
Expand All @@ -429,17 +434,27 @@ <h2>for help</h2>
</div>
</article>

<article span2x1 padded class="artboard">
<article span2x1 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Search Tool</label>
<div>
<p class="tip">💡 Hotkey <kbd>s</kbd></p>
<div class="tips">
<p> Hotkey <kbd>s</kbd></p>
</div>
<div class="Use_the_search_tool_to_select_elements!" fit-height grid="rows" vertically-aligned="center" horizontally-aligned="center">
<h4 class="Select_me_programmatically search-title">Select me by searching ".search-title"</h4>
<div class="Select_all_my_children_programatically">
<a class="search-link" href="#">Search</a>
<a class="search-link" href="#">".search-link"</a>
<a class="search-link" href="#">To</a>
<a class="search-link" href="#">Select</a>
<a class="search-link" href="#">Us</a>
</div>
</div>
</article>

<article span1x1 grid="rows" padded class="artboard Delete_styles" grid="rows" horizontally-distributed="between">
<label class="Learn_to_delete_styles_👇">Delete styles</label>
<div>
<p class="tip">💡 Press <kbd>opt+del</kbd> to remove inline styles</p>
<div class="tips">
<p> Press <kbd>opt+del</kbd> to remove inline styles</p>
<small class="Fix_me!">Ew, get rid of these terrible edits someone (me) did! 👇</small>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center">
Expand All @@ -449,9 +464,9 @@ <h2 style="font-size: 3rem; color: green; text-shadow: 0 2px 4px red; font-weigh

<article span2x2 padded class="artboard" grid="rows" horizontally-distributed="between">
<label>Foreground / Background Color</label>
<div>
<p class="tip">💡 Hotkey <kbd>h</kbd></p>
<p class="tip">💡 Hotkey <kbd>[</kbd> or <kbd>]</kbd> to switch between foreground/background</p>
<div class="tips">
<p> Hotkey <kbd>h</kbd></p>
<p> Hotkey <kbd>[</kbd> or <kbd>]</kbd> to switch between foreground/background</p>
</div>
<div fit-height grid vertically-aligned="center" horizontally-aligned="center" horizontally-distributed="around">
<div class="filled-circle google-blue">1</div>
Expand Down

0 comments on commit 4f9deea

Please sign in to comment.