Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!--
	#Content
1. I can see a <main> element with a corresponding id="main-doc", which contains the page's main content (technical documentation). ‣
2. Within the #main-doc ( <main> ) element, I can see several <section> elements, each with a class of "main-section". There should be a minimum of 5. ‣
3. The first element within each .main-section should be a <header class="h2"> element which contains text that describes the topic of that section. ‣
4. Each <section> element with the class of "main-section" should also have an id that corresponds with the text of each <header class="h2"> contained within it. Any spaces should be replaced with underscores (e.g. The <section> that contains the header "Javascript and Java" should have a corresponding id="Javascript_and_Java"). ‣
5. The .main-section elements should contain at least 10 <p> elements total (not each). ‣
6. The .main-section elements should contain at least 5 <code> elements total (not each). ‣
7. The .main-section elements should contain at least 5 <li> items total (not each). ‣
8. I can see a <nav> element with a corresponding id="navbar". ‣
9. The first element within the navbar should be a <header class="h2"> which contains text that describes the topic of the technical documentation. ‣
10. Additionally, the navbar should contain link (<a>) elements with the class of "nav-link". There should be one for every element with the class "main-section". ‣
11. Each element with the class of "nav-link" should contain text that corresponds to the <header class="h2"> text within each <section> (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world"). ‣
12. When I click on a navbar element, the page should navigate to the corresponding section of the "main-doc" element (e.g. If I click on a "nav-link" element that contains the text "Hello world", the page navigates to a <section> element that has that id and contains the corresponding <header class="h2">. ‣
#Layout
1. On regular sized devices (laptops, desktops), the element with id="navbar" should be shown on the left side of the screen and should always be visible to the user. ‣
2. My Technical Documentation page should use at least one media query.
-->
<head>
<style>*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.grid-block{clear:both;letter-spacing:-.31em;display:-webkit-flex;-webkit-flex-flow:row wrap;display:-ms-flexbox;-ms-flex-flow:row wrap;overflow:hidden;text-rendering:optimizespeed;width:100%}.grid-block,.grid-1,.grid-lg-1-2,.grid-lg-1-3{display:inline-block;float:left;letter-spacing:normal;padding:0px 10px;vertical-align:top;word-spacing:normal;text-rendering:auto;width:100%;zoom:1}@media screen and (min-width: 64em){.grid-lg-1-2{width:50%}.grid-lg-1-3{width:33.3333%}}body{background-color:#fff;color:#000;font-family:Georgia, serif;font-size:16px; display:flex; flex-direction: row; flex-wrap: nowrap; justify-content; flex-start;}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:inherit;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:normal;line-height:1.1;margin-top:20px;margin-bottom:10px}h1,.h1{font-size:45px;margin-bottom:0px;margin-top:30px}h1 a{color:#FA4949}h2,.h2{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:24px}a{color:#1a0dab;text-decoration:none}a:hover{text-decoration:underline}p{margin:12px 0;line-height:20px;letter-spacing:normal}ul{padding:0}li{border-bottom:1px dashed #e0e0e0;line-height:1.55;list-style-type:none;padding:7px 0}kbd{background-color:#eee;color:#000;border-radius:0;box-shadow:none;font-family:'Inconsolata', monospace;font-size:1em;font-weight:bold;padding:4px}.container{background:#fff;margin:0 auto;width:100%;max-width:1170px}.well{background:#f8f8f8;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;min-height:20px;margin-bottom:20px;padding:19px}.link-to-repo{margin:20px 0;text-align:center}.link-to-repo p{margin-bottom:inherit}.ja{font-size:13px}.ja h2{font-size:20px}.ja kbd{font-size:16px}.box{background:#f8f8f8;border:1px solid #E7E7E7;margin:10px 0;width:100%}.box .grid-block{padding:0}.box-header{background:#EBEBEB;min-height:30px;padding:10px}.box-header h2{font-size:16px;margin:5px 0}.box-body{font-size:14px;display:block;clear:both;overflow:hidden;padding:0 10px;padding-bottom:20px}.box-body li{border-bottom:none;line-height:inherit;list-style-type:none;padding:7px 7px}@media print{html,body{height:90%}body{line-height:1.3;font-size:10px}h1{font-size:20px;margin-left:0;margin-bottom:8px;margin-top:0}h2{font-size:10px;margin-bottom:-10px;margin-top:0;line-height:10px}#footer,.link-to-repo{height:0px;display:none}.commands-container{clear:both;overflow:hidden}.commands-container>.grid-block:first-child{width:60%}.commands-container>.grid-block:last-child .grid-lg-1-3{width:50%}.grid-block{clear:none;float:left;display:inline-block;overflow:hidden;width:40%}.grid-1{padding:0;margin:0}.grid-lg-1-3{display:inline-block;float:left;letter-spacing:normal;padding:0;word-spacing:normal;text-rendering:auto;width:33.3333%;zoom:1}li{line-height:initial;padding:4px 5px}kbd{color:#000;font-size:12px;padding:0}.well{height:0px;display:none}}@page{margin:0.5cm}#navbar{width: 16rem; top:0px; left: 0px; position: fixed; padding: 0 1rem;} #main-doc{width: calc(100% - 16rem); top: 0px; right: 0px; position: absolute;}
</style>
</head>

<body>
<nav id="navbar">
        <header class="h1" style="margin-top: 20px;">Design Shortcuts</header>
        <h1><a class="nav-link" href="#Mac_Shortcuts">Mac Shortcuts</a></h1>	
        <h1><a class="nav-link" href="#Photoshop">Photoshop</a></h1>	
        <h1><a class="nav-link" href="#Illustrator">Illustrator</a></h1>	
        <h1><a class="nav-link" href="#InDesign">InDesign</a></h1>	
        <h1><a class="nav-link" href="#Sketch">Sketch</a></h1>
  <h5>Inspired by <a href="https://vim.rtorr.com/">Vim Cheat Sheet</a>
</nav>

<main id="main-doc">

<section class="main-section" id="Mac_Shortcuts">
	<header class="h2">Mac Shortcuts</header>
	<p></p>
	<p></p>
	<code></code>
	<ul>
	<li><kbd>⌘</kbd> – Command</li>
<li><kbd>⇧</kbd> – Shift</li>
<li><kbd>⌥</kbd> – Option</li>
<li><kbd>⌃</kbd> – Control</li>
<li><kbd>⇪</kbd> – Caps Lock </li>
<li><kbd>Fn</kbd> – Fn</li>	
	</ul>

<section class="main-section" id="Photoshop">
	<header class="h2">Photoshop</header>
	<p></p>
	<p></p>
	<code></code>
	<ul>
<li><kbd>Command + T</kbd>	– Free Transform</li>
<li><kbd>[</kbd>	– Decrease Brush Size</li>
<li><kbd>]</kbd>	– Increase Brush Size</li>
<li><kbd>{</kbd>	– Decrease Brush Hardness</li>
<li><kbd>}</kbd>	– Increase Brush Hardness</li>
<li><kbd>D</kbd>	– Default Foreground/Background colors</li>
<li><kbd>X</kbd>	– Switch Foreground/Background colors</li>
<li><kbd>Command + J</kbd>	– New layer via copy</li>
<li><kbd>Shift + Command + J</kbd>	– New layer via cut</li>
<li><kbd>Any selection tool + Shift-drag</kbd>	– Add to a selection</li>
<li><kbd>Option-click brush or swatch</kbd>	– Delete brush or swatch</li>
<li><kbd>Command-click</kbd>	– Toggle auto-select with move tool</li>
<li><kbd>Escape</kbd>	– Cancel any modal dialog window (including the Start Workspace)</li>
<li><kbd>Return</kbd>	– Select the first edit field of the tool bar</li>
<li><kbd>Tab</kbd>	– Navigate between fields</li>
<li><kbd>Tab + Shift</kbd>	– Navigate between fields in opposite direction</li>
<li><kbd>Option</kbd>	– Change Cancel to Reset</li>
	</ul>
</section>

<section class="main-section" id="Illustrator">
	<header class="h2">Illustrator</header>
	<p></p>
	<p></p>
	<code></code>
	<ul>
<li><kbd>Shortcuts</kbd>	– macOS</li>
<li><kbd>Undo</kbd>	– Command + Z</li>
<li><kbd>Redo</kbd>	– Shift + Command + Z</li>
<li><kbd>Cut</kbd>	– Command + X</li>
<li><kbd>Copy</kbd>	– Command + C</li>
<li><kbd>Paste</kbd>	– Command + V</li>
<li><kbd>Paste in front</kbd>	– Command + F</li>
<li><kbd>Paste at back</kbd>	– Command + B</li>
<li><kbd>Paste in place</kbd>	– Shift + Command + B</li>
<li><kbd>Paste on all artboards</kbd>	– Option + Shift + Command + B</li>
<li><kbd>Check spelling</kbd>	– Command + I</li>
<li><kbd>Open the Color Settings dialog box</kbd>	– Shift + Command + K</li>
<li><kbd>Open the Keyboard Shortcuts dialog box</kbd>	– Option + Shift + Command + K</li>
<li><kbd>Open the Preferences dialog box</kbd>	– Command + K</li>
	</ul>

<section class="main-section" id="InDesign">
	<header class="h2">InDesign</header>
	<p></p>
	<p></p>
	<code></code>
	<ul>
<li><kbd>Mac OS</kbd>	– Tool</li>
<li><kbd>V, Esc</kbd>	– Selection tool</li>
<li><kbd>A</kbd>	– Direct Selection tool</li>
<li><kbd>Command+Control+Tab</kbd>	– Toggle Selection and Direct Selection tool</li>
<li><kbd>Shift+P</kbd>	– Page tool</li>
<li><kbd>U</kbd>	– Gap tool</li>
<li><kbd>P</kbd>	– Pen tool</li>
<li><kbd>=</kbd>	– Add Anchor Point tool</li>
<li><kbd>-</kbd>	– Delete Anchor Point tool</li>
<li><kbd>Shift+C</kbd>	– Convert Direction Point tool</li>
<li><kbd>T</kbd>	– Type tool</li>
<li><kbd>Shift+T</kbd>	– Type On A Path tool</li>
<li><kbd>N</kbd>	– Pencil tool (Note tool)</li>
<li><kbd>\</kbd>	– Line tool</li>
<li><kbd>F</kbd>	– Rectangle Frame tool</li>
<li><kbd>M</kbd>	– Rectangle tool</li>
<li><kbd>L</kbd>	– Ellipse tool</li>
<li><kbd>R</kbd>	– Rotate tool</li>
<li><kbd>S</kbd>	– Scale tool</li>
<li><kbd>O</kbd>	– Shear tool</li>
<li><kbd>E</kbd>	– Free Transform tool</li>
<li><kbd>I</kbd>	– Eyedropper tool</li>
<li><kbd>K</kbd>	– Measure tool</li>
<li><kbd>G</kbd>	– Gradient tool</li>
<li><kbd>C</kbd>	– Scissors tool</li>
<li><kbd>H</kbd>	– Hand tool</li>
<li><kbd>Spacebar (Layout mode), Option (Text mode), or Option+Spacebar (both)</kbd>	– Temporarily selects Hand tool</li>
<li><kbd>Z</kbd>	– Zoom tool</li>
<li><kbd>Command+Spacebar</kbd>	– Temporarily selects Zoom In tool</li>
<li><kbd>X</kbd>	– Toggle Fill and Stroke</li>
<li><kbd>Shift+X</kbd>	– Swap Fill and Stroke</li>
<li><kbd>J</kbd>	– Toggle between Formatting Affects Container and Formatting Affects Text</li>
<li><kbd>, [comma]</kbd>	– Apply Color</li>
<li><kbd>. [period]</kbd>	– Apply Gradient</li>
<li><kbd>/</kbd>	– Apply No Color</li>
<li><kbd>W</kbd>	– Switch between Normal View and Preview Mode</li>
<li><kbd>Y</kbd>	– Frame Grid tool (horizontal)</li>
<li><kbd>Q</kbd>	– Frame Grid tool (vertical)</li>
<li><kbd>Shift+G</kbd>	– Gradient Feather tool</li>
	</ul>

<section class="main-section" id="Sketch">
	<header class="h2">Sketch</header>
	<p></p>
	<p></p>
	<code></code>
	<ul>
Insert Shape
<li><kbd>R</kbd>	– Rectangle</li>
<li><kbd>O</kbd>	– Oval</li>
<li><kbd>U</kbd>	– Rounded Rectangle</li>
<li><kbd>L</kbd>	– Line</li>
<li><kbd>T</kbd>	– Text</li>
<li><kbd>V</kbd>	– Vector</li>
<li><kbd>A</kbd>	– Artboard</li>
<li><kbd>S</kbd>	– Slice</li>
<li><kbd>P</kbd>	– Pencil</li>
<li><kbd>Hold Shift</kbd>	– Keeps aspect ratio</li>
<li><kbd>Hold Alt</kbd>	– Draw shape from center</li>

<p>Before you start drawing the shape, you can use Smart guides to increase – precision.

Once created, press Alt to show distances between elements.
</p>
<h2>Editing Shapes
</h2>
<p>With a layer selected, you can do the following shortcuts.
</p><li><kbd>1 to 0</kbd>	– Layer Opacity</li>
<li><kbd>F</kbd>	– Toggle Fill</li>
<li><kbd>Ctrl C</kbd>	– Pick color</li>

<p>The Eyedropper tool can be used outside of the app.
</p><li><kbd>Double-click or Enter</kbd>	– Edit Mode (Ungrouped)</li>
<li><kbd>Double-Click</kbd>	– Select one level deeper (Grouped)</li>
<li><kbd>⌘ Click</kbd>	– Select any layer regardless of Groups</li>
<li><kbd>⌘ Shift T</kbd>	– Transform</li>
<li><kbd>⌘ Shift R</kbd>	– Rotate</li>
<li><kbd>⌘ Shift L</kbd>	– Lock / unlock layer</li>
<li><kbd>⌘ Shift H</kbd>	– Hide / show layer</li>
<li><kbd>⌘ Shift E</kbd>	– Export</li>
<li><kbd>Esc</kbd>	– Deselect / Select parent Artboard or Group</li>
<li><kbd>Space Drag</kbd>	– Move around canvas</li>

<h3>Multiple Shapes
</h3>
<p>When you have multiple shapes selected, you can use these shortcuts.
</p><li><kbd>Alt ⌘ U</kbd>	– Union</li>
<li><kbd>Alt ⌘ S</kbd>	– Subtract</li>
<li><kbd>Alt ⌘ I</kbd>	– Intersect</li>
<li><kbd>Alt ⌘ X</kbd>	– Difference</li>
<li><kbd>Ctrl ⌘ M</kbd>	– Use as Mask</li>
<li><kbd>⌘ G</kbd>	– Group</li>
<li><kbd>Shift ⌘ G</kbd>	– Ungroup</li>

<h3>Editing Points
</h3>
<p>Once you’re in Edit mode, you can apply a number of shortcuts.
</p><li><kbd>1</kbd>	– Straight</li>
<li><kbd>2</kbd>	– Mirrored</li>
<li><kbd>3</kbd>	– Disconnected</li>
<li><kbd>4</kbd>	– Asymmetric</li>
<li><kbd>Tab</kbd>	– Next point</li>
<li><kbd>Alt</kbd>	– Show only selected Point</li>
<li><kbd>⌘</kbd>	– Show middle point</li>

<h3>Move and Resize
</h3>
<p>As you drag or resize shapes, Smart Guides and Distances are automatically – visible.
</p><li><kbd>Shift Drag</kbd>	– Snap horizontally or vertically</li>
<li><kbd>Alt Drag</kbd>	– Duplicate Layer</li>
<li><kbd>⌘ D</kbd>	– Duplicate</li>

<p>If you use Alt Drag first, the duplicates will be distanced consistently.
</p><li><kbd>Shift Resize</kbd>	– Keep aspect ratio</li>
<li><kbd>Alt Resize</kbd>	– Resize from center</li>
<li><kbd>⌘</kbd>	– Rotate (hover borders)</li>
<li><kbd>Shift ←, →, ↑ or ↓</kbd>	– Move by 10px</li>
<li><kbd>⌘ → or ↓</kbd>	– Expand by 1px</li>
<li><kbd>⌘ ← or ↑</kbd>	– Contract by 1px</li>
<li><kbd>⌘ Shift → or ↓</kbd>	– Expand by 10px</li>
<li><kbd>⌘ Shift ← or ↑</kbd>	– Contract by 10px</li>

<h3>Type
</h3>
<p>These shortcuts apply to Text layers.
</p><li><kbd>⌘ B</kbd>	– Bold</li>
<li><kbd>⌘ I</kbd>	– Italic</li>
<li><kbd>⌘ U</kbd>	– Underline</li>
<li><kbd>⌘ Alt +</kbd>	– Bigger type</li>
<li><kbd>⌘ Alt -</kbd>	– Smaller type</li>
<li><kbd>⌘ T</kbd>	– Change Font</li>
<li><kbd>⌘ Shift O</kbd>	– Convert Text to Outlines</li>
<li><kbd>Alt Ctrl T</kbd>	– Tighten character spacing</li>
<li><kbd>Alt Ctrl L</kbd>	– Loosen character spacing</li>
<li><kbd>⌘ Shift }</kbd>	– Align Left</li>
<li><kbd>⌘ Shift {</kbd>	– Align Right</li>
<li><kbd>⌘ Shift |</kbd>	– Align Center</li>
<li><kbd>⌘ Ctrl Space</kbd>	– Emojis and Symbols</li>

<h3>Copy and Paste
</h3>
<p>You can Paste any format (JPG, PNG, SVG) to Sketch, from apps like Finder, – Keynote, Mail, etc. Sketch will try to capture the vector if possible. – Likewise, Sketch will Copy the vector to other apps like Keynote.
</p><li><kbd>⌘ C</kbd>	– Copy</li>
<li><kbd>⌘ V</kbd>	– Paste</li>
<li><kbd>⌘ Shift V</kbd>	– Paste in Place</li>
<li><kbd>Right-click / Paste Here</kbd>	– Paste at the cursor from center</li>
<li><kbd>Alt ⌘ C</kbd>	– Copy Style</li>
<li><kbd>Alt ⌘ V</kbd>	– Paste Style</li>

<h3>Arrange
</h3>
<p>Layers and Groups can be arranged within a parent Group or Artboard.
</p><li><kbd>Alt ⌘ ↑</kbd>	– Forward</li>
<li><kbd>Alt ⌘ ↓</kbd>	– Backward</li>
<li><kbd>Ctrl Alt ⌘ ↑</kbd>	– To Front</li>
<li><kbd>Ctrl Alt ⌘ ↓</kbd>	– To Back</li>

<h3>Zoom and Focus
</h3>
<p>Artboards and Layers can be focused on.
</p><li><kbd>⌘ 1</kbd>	– Focus on all the elements in the screen</li>
<li><kbd>⌘ 2</kbd>	– Focus on the element selected</li>
<li><kbd>⌘ 3</kbd>	– Center Selection</li>
<li><kbd>⌘ 0</kbd>	– Zoom to Actual Size (100%)</li>
<li><kbd>⌘ +</kbd>	– Zoom In</li>
<li><kbd>⌘ -</kbd>	– Zoom Out</li>

<h3>Grids and Rulers
</h3>
<p>In Preferences, enable Pixel Fitting to make sure that shapes land – accurately in the Pixels Grid. Use Show Pixels to determine if your shapes – are sharp.
</p><li><kbd>Ctrl G</kbd>	– Toggle Grid</li>
<li><kbd>Ctrl R</kbd>	– Toggle Rulers</li>

<p>To create a guide, click in the Ruler zone. Use Shift to move by 10 px. – Drag outside to remove.
</p><li><kbd>Ctrl L</kbd>	– Toggle Layout</li>
<li><kbd>Ctrl P</kbd>	– Toggle Pixels</li>
<li><kbd>Ctrl X</kbd>	– Toggle Pixels Grid</li>

<p>The Pixels Grid can only be seen at 1000% zoom.
</p>
<h3>Window
</h3><li><kbd>⌘ ~</kbd>	– Switch to next window</li>
<li><kbd>⌘ .</kbd>	– Toggle Presentation Mode</li>
<li><kbd>Alt ⌘ 1</kbd>	– Toggle Layers List</li>
<li><kbd>Alt ⌘ 2</kbd>	– Toggle Inspector</li>
<li><kbd>Alt ⌘ 3</kbd>	– Toggle Layers List, Inspector</li>
<li><kbd>Alt ⌘ T</kbd>	– Toggle Toolbar</li>
<li><kbd>Ctrl ⌘ F</kbd>	– Toggle Fullscreen</li>

<h3>Layers List
</h3>
<p>These shortcuts only apply to the Layers List.
</p><li><kbd>Alt</kbd>	– Switch to Lock instead of Hide</li>
<li><kbd>⌘ R or Double-click</kbd>	– Rename Layer</li>
<li><kbd>⌘ Click</kbd>	– Select multiple layers</li>
<li><kbd>Shift Click</kbd>	– Select multiple layers in a group</li>
<li><kbd>Option Click Expand Arrow</kbd>	– Expand or Collapse all layers</li>
<li><kbd>Tab</kbd>	– Next Layer</li>
<li><kbd>Shift Tab</kbd>	– Previous Layer</li>
<li><kbd>⌘ F</kbd>	– Find Layer by name</li>
<li><kbd>Fn ↑</kbd>	– Previous Page</li>
<li><kbd>Fn ↓</kbd>	– Next Page</li>
<li><kbd>Drag Outside</kbd>	– Export 1x PNG asset</li>

<p>You may override that setting by using Make Exportable.
</p>
<h3>Inspector</h3>

<p>You can use Math (+, -, *, /) and percentage (%) in fields.
</p><li><kbd>Alt Tab</kbd>	– Focus on next field</li>
<li><kbd>Drag Left or Right</kbd>	– Increase or decrease number</li>
<li><kbd>↑ or ↓</kbd>	– Increase or decrease by 1</li>
<li><kbd>Shift ↑ or ↓</kbd>	– Increase or decrease by 10</li>
<li><kbd>Alt ↑ or ↓</kbd>	– Increase or decrease by 0.1</li>
<li><kbd>Drag Outside</kbd>	– Remove Fills, Borders or Shadows</li>

<h3>Custom Shortcuts
</h3>
<p>Shortcuts can be customized in the System Preferences pane. To add, go to – Keyboard → Shortcuts → App Shortcuts.
</p><li><kbd>⌘ Shift C</kbd>	– Create Symbol</li>
<li><kbd>⌘ Shift M</kbd>	– Make Grid…</li>
<li><kbd>⌘ Shift P</kbd>	– Round to Nearest Pixel Edge</li>
<li><kbd>⌘ Alt [</kbd>	– Horizontally (Align Objects)</li>
<li><kbd>⌘ Alt ]</kbd>	– Vertically (Align Objects)</li>
<li><kbd>⌘ Alt \</kbd>	– Collapse Artboards and Groups</li>
<li><kbd>⌘ Shift ‘</kbd>	– Remove Unused Style</li>
	</ul>

</main>
</body>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console