🎉 More user guide

css/index.css

@@ -37,7 +37,7 @@ h1, h2, h3,
   position: relative;
 }
 img {
-  width: 100%;
+  max-width: 100%;
 }
 p,
 li {
@@ -104,6 +104,11 @@ h3 {
   margin-top: 4rem;
   margin-bottom: 1rem;
 }
+h4 {
+  font-size: 1.2rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
 p, li {
   font-size: 1.1rem;
   word-wrap: break-word;

user-guide/grids-and-layouts/index.njk

@@ -0,0 +1,67 @@
+---
+title: 6· Grids & layouts
+---
+
+<h1 id="grids-layouts">Grids and layouts</h1>
+<p class="main-paragraph">All you need to know about how to set up grids in Penpot.</p>
+
+<p>Grids are design aids that can help you to align content easily to a geometric structure. At Penpot there are three types of grids: <strong>square</strong>, <strong>columns</strong> and <strong>rows</strong>.</p>
+
+<p><strong>Note:</strong> grids can only be visible at the viewport and will never be shown on exports.</p>
+
+<h3 id="creating-grids">Creating layout grids</h3>
+<p>Grids can only be created at artboards level. To create a grid you need to select an artboard first. At the Design panel there is a section for "Grids & Layouts", click at the "+" button to add a grid to the arboard. You can add as many grids as you want.</p>
+<p><img src="/img/grids-create.gif" alt="grids" /></p>
+
+<h3 id="hide-remove-grids">Hide and remove grids</h3>
+<p>You can hide an specific grid by clicking at the eye button of a grid configuration. If you want to remove a grid, use the "-" button at the right side of the grid pill.</p>
+<p><img src="/img/grids-hide-remove.gif" alt="grids" /></p>
+
+
+<h3 id="square-grids">Square grids</h3>
+<p><img src="/img/grids-square.gif" alt="grids" /></p>
+<p>Options for square or rectangular grids are:</p>
+<ul>
+  <li><strong>Size</strong> (pixels). </li>
+  <li><strong>Color</strong>.</li>
+  <li><strong>Opacity</strong>. </li>
+</ul>
+
+
+<h3 id="row-layouts">Row layouts</h3>
+<p><img src="/img/grids-rows.gif" alt="grids" /></p>
+<p>Options for row layouts are:</p>
+<ul>
+  <li><strong>Rows</strong>.</li>
+  <li><strong>Type:</strong> stretch, top, center bottom</li>
+  <li><strong>Height:</strong> "auto" by default.</li>
+  <li><strong>Gutter:</strong> the space between each row.</li>
+  <li><strong>Margin</strong>. </li>
+  <li><strong>Color</strong>. </li>
+  <li><strong>Opacity</strong>. </li>
+</ul>
+
+
+<h3 id="row-layouts">Column layouts</h3>
+<p><img src="/img/grids-columns.gif" alt="grids" /></p>
+<p>Options for column layouts are:</p>
+<ul>
+  <li><strong>Columns</strong>. </li>
+  <li><strong>Type:</strong> stretch, top, center bottom.</li>
+  <li><strong>Width:</strong> "auto" by default.</li>
+  <li><strong>Gutter:</strong> the space between each row.</li>
+  <li><strong>Margin</strong>. </li>
+  <li><strong>Color</strong>. </li>
+  <li><strong>Opacity</strong>. </li>
+</ul>
+
+
+<h3 id="grid-defaults">Grid defaults</h3>
+<p>There are default settings at file level. You can easly change the settings of a grid to the default ones and you can also set a grid to be the default one just by using the buttons at the bottom of the advanced options menu.</p>
+<p><img src="/img/grids-defaults.gif" alt="grids" /></p>
+
+
+<h3 id="grid-snap-visibility">Snap to grid and visibility</h3>
+<p>If you want to hide/show all the grids at a file you can press <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
+<p>If you want to enable/disable the snapping to grids you can press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>´</kbd> or use the option at the main menu at the top left of the navbar.</p>
+<p><img src="/img/grids-snap-visibility.gif" alt="grids" /></p>

user-guide/layer-basics/index.njk

@@ -0,0 +1,107 @@
+---
+title: 4· Layer basics
+---
+
+<h1 id="layer-basics">Layer basics</h1>
+<p class="main-paragraph">Every object you create at Penpot’s workspace is a layer. Rectangles, ellipses, artboards or texts are some types of layers that you can use to build your designs.</p>
+
+
+<h3 id="pages">Pages</h3>
+<p>Pages allows you to organize your layers in separate tabs inside a file. Subdividing a file gives you options to make better sense of your work. For instance, you can use them to separate different stages of the design process in the same document. Screen sizes, features or atomic design categories are other common ways to use pages. </p>
+<p>You can add, remove or rename pages to suit your needs.</p>
+<p><img src="/img/pages.gif" alt="pages" /></p>
+
+
+<h3 id="layers-panel">Layers panel</h3>
+<p>At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.</p>
+<p><img src="/img/layers-panel.gif" alt="layers" /></p>
+
+
+<h3 id="hide-lock">Hide and lock layers</h3>
+<p>Click on the eye icon to change the visibility of a layer. Click on the lock icon to lock or unlock a layer. A locked layer can not be modified.</p>
+<p><img src="/img/layers-hide-lock.gif" alt="layers" /></p>
+
+
+<h3 id="creating-layers">Creating layers</h3>
+<p>To create a layer you have to select the type of layer by clicking the selected tool (artboard, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport. </p>
+<p>Hold <kbd>Ctrl/⌘</kbd> while creating an ellipse or a rectangle to maintain equal width and height.</p>
+<p><img src="/img/layer-create.gif" alt="creating layers" /></p>
+
+
+<h3 id="duplicating-layers">Duplicating layers</h3>
+<p>There are several ways to duplicate a layer:</p>
+<ol>
+  <li>You can press <kbd>Ctrl/⌘</kbd> + <kbd>D</kbd> to duplicate a layer right over a selected layer. </li>
+  <li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu. </li>
+  <li>You can also select a layer and drag while pressing <kbd>Alt/⌥</kbd> so you can simultaneously duplicate and drag the new layer.</li>
+</ol>
+<p><img src="/img/layer-duplicate.gif" alt="duplicating layers" /></p>
+
+
+<h3 id="delete-layers">Deleting layers</h3>
+<p>There are a couple ways to delete a layer. </p>
+<ol>
+  <li>You can press <kbd>Supr/⌫</kbd> to delete a selected layer. </li>
+  <li>If you press right click over a selected layer at the viewport or at the layers panel you can use the option at the layer menu.</li>
+</ol>
+<p><img src="/img/layer-delete.gif" alt="delete layers" /></p>
+
+
+<h3 id="select-layers">Selecting layers</h3>
+<p>The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar. </p>
+<p>To select multiple layers you can click and drag around the layers you want to select. You can also click more than one layer while pressing <kbd>Shift/⇧</kbd>. If you hold <kbd>Shift/⇧</kbd> and click you can deselect layers individually.</p>
+<p><img src="/img/layers-selecting-1.gif" alt="layers select" /></p>
+<h4>Selecting layers at the layers panel</h4>
+<ol>
+  <li>Click a layer to do a single selection.</li>
+  <li>Press <kbd>Ctrl/⌘</kbd> while clicking two or more layers to do a multiple selection.</li>
+  <li>If you press <kbd>Shift/⇧</kbd> while selecting two or more layers all the layers within the selection area will be selected.</li>
+</ol>
+<p><img src="/img/layers-selecting-2.gif" alt="layers select" /></p>
+<h4>Selecting layers ignoring groups</h4>
+<p>If you want to select an element that is difficult to reach because is under a group of elements, hold <kbd>Ctrl/⌘</kbd> to make the selection ignore group areas and treat all the objects as being at the same level.</p>
+<p><img src="/img/layers-selecting-3.gif" alt="layers select" /></p>
+
+
+<h3 id="grouping-layers">Grouping layers</h3>
+<p>Grouped layers can be moved, transformed or styled at the same time. To group two or more layers you have to select them and then press <kbd>Ctrl/⌘</kbd> + <kbd>G</kbd>. You can also use the option at the layers menu that you can open with right click.</p>
+<p>To <strong>ungroup</strong> press <kbd>Shift/⇧</kbd> + <kbd>G</kbd> or use the option at the layers menu that you can open with right click over the group. </p>
+<p>To <strong>select a layer inside a group</strong> you do double click. First click selects the group, second click selects a layer.</p>
+<p><img src="/img/layers-grouping.gif" alt="layers grouping" /></p>
+
+
+<h3 id="masking-layers">Masking layers</h3>
+<p>A mask is a layer that does a clipping and only shows parts of a layer or multiple layers that fall within its shape. </p>
+<p>To mask layers you first have to select more than one layer or a group of them. Then you can apply the masking using the option at the layers menu or by pressing <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd>. The shape that is at the lowest level at the layer list will be used as a mask. </p>
+<p>To <strong>unmask</strong> press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd> or use the option at the layers menu.</p>
+<p><img src="/img/layers-masking.gif" alt="layers masking" /></p>
+
+
+<h3 id="moving-layers">Moving layers</h3>
+<p>To move one or more layers on the viewport you have to select them first and then click and drag the selection where you want to place them. You can also use the design panel to set a precise position relative to the viewport or the artboard.</p>
+<p><img src="/img/layers-moving.gif" alt="Moving layers" /></p>
+
+
+
+<h3 id="resizing-layers">Resizing layers</h3>
+<p>To resize a selected layer you can use the handles at the edges of the selection box. Make sure the cursor is in resizing mode. If you hold <kbd>Ctrl/⌘</kbd> while resizing the object will preserve its current proportions. You can also use the design panel where you can link width and height.</p>
+<p><img src="/img/layers-resizing.gif" alt="layers" /></p>
+
+
+
+<h3 id="rotating-layers">Rotating layers</h3>
+<p>To rotate selected layers you can use the handlers at the edges of the selection box. Make sure the cursor is in rotation mode. If you hold <kbd>Ctrl/⌘</kbd> while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.</p>
+<p><img src="/img/layers-rotating.gif" alt="layers" /></p>
+
+
+<h3 id="flipping-layers">Flipping layers</h3>
+<p>To flip a layer <strong>horizontally</strong> press <kbd>Shift/⇧</kbd> + <kbd>H</kbd>. To flip a layer <strong>vertically</strong> press <kbd>Shift/⇧</kbd> + <kbd>V</kbd>. You can also find these actions at the layers menu.</p>
+<p><img src="/img/layers-flipping.gif" alt="layers flipping" /></p>
+
+
+<h3 id="">Aligning and distributing layers</h3>
+<p>Aligning and distributing layers can be found at the top of the Design panel. </p>
+<p><strong>Aligning</strong> will move all the selected layers layers to a position relative to one of them. For instance aligning top will align the elements with the edge of the top-most element.</p>
+<p><img src="/img/layers-align.gif" alt="layers" /></p>
+<p><strong>Distributing</strong> objects allows you to position them vertically and horizontally with equal distances between them.</p>
+<p><img src="/img/layers-distribute.gif" alt="layers" /></p>

user-guide/objects/index.njk

@@ -0,0 +1,86 @@
+---
+title: 5· Objects
+---
+
+<h1 id="objects">Objects</h1>
+<p class="main-paragraph">Objects are the items that you can place at the viewport. Artboards, shapes, texts, path and graphics are objects. Learn the specifics of the different objects that you can use at Penpot to get the most of them.</p>
+
+<h3 id="artboards">Artboards</h3>
+<p>An artboard is a frame with fixed edges. Using artboards is really useful if you want to design for a specific screen or print size. Objects inside artboards only show parts that fall within its shape.</p>
+<h4>Create artboards</h4>
+<p>You can create artboards with custom sizes or choose one of the provided presets with the most common resolution for devices and print. </p>
+<p><img src="/img/artboards-creation.gif" alt="artboards" /></p>
+<h4>Select and move artboards</h4>
+<p>Click on the artboard name or double click over an area without layers.</p>
+<p>To move an artboard you have to select it first and then drag it from its name or from an area without layers. </p>
+<p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while dragging you can do it from any part of the artboard, regardless where the layers are.</p>
+<p><img src="/img/artboards-move.gif" alt="artboards" /></p>
+<h4>Grids and prototyping</h4>
+<p>Artboards have two main particularities over the rest of the objects: you can set grids on them and you can connect them to create interactions.</p>
+<p><img src="/img/artboards-grid-int.png" alt="artboards" /></p>
+
+
+<h3 id="rectangles-ellipses">Rectangles and ellipses</h3>
+<p>Rectangle and ellipses are two basic, “primitive” geometric shapes that are really useful to kickstart your designs.</p>
+<p>Shortcuts are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
+<p>To know details about how to edit and modify them go to <a href="/user-guide/04-layer-basics/">Layer basics</a>.</p>
+<p><img src="/img/rect-ellipses.gif" alt="shapes" /></p>
+
+
+<h3 id="texts">Texts</h3>
+<p>To insert a text you have to activate the text tool first clicking on the icon at the toolbar or pressing <kbd>T</kbd>. Then you have to ways to create a text layer:</p>
+<ol>
+  <li><strong>Click</strong> to create a textbox without any specific dimensions.</li>
+  <li><strong>Drag</strong> to create a textbox with a fixed size.</li>
+</ol>
+<p><img src="/img/text-creation.gif" alt="text" /></p>
+<h4>Edit and style text content</h4>
+<p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as a rich text.</p>
+<p><img src="/img/text-edit.gif" alt="text" /></p>
+<h4>Text options</h4>
+<p><img src="/img/text-options.png" alt="text" /></p>
+<ol>
+  <li><strong>Font family.</strong> You can choose any font from <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a>.</li>
+  <li><strong>Font size.</strong></li>
+  <li><strong>Font type.</strong></li>
+  <li><strong>Line height</strong> (in pixels).</li>
+  <li><strong>Letter spacing</strong> (in pixels).</li>
+  <li><strong>Text case:</strong> none, uppercase, lowercase, titlecase.</li>
+  <li><strong>Horizontal alignment:</strong> left, center, right, justify.</li>
+  <li><strong>Vertical alignment:</strong> top, center, bottom.</li>
+  <li><strong>Sizing:</strong> auto height, auto width, fixed size.</li>
+  <li><strong>Text decoration:</strong> none, underline, strikethrough.</li>
+</ol>
+
+
+<h3 id="paths">Paths (bezier)</h3>
+<p>A path is composed by two or more nodes that will form a vector shape. To draw a new path you have to activate the text path by clicking on the icon at the toolbar or pressing <kbd>P</kbd>. Then you have two ways to create a text shape:</p>
+<ol>
+  <li><strong>Click</strong> to create a new corner node.</li>
+  <li><strong>Click and drag</strong> to create a curved node.</li>
+  <li><strong>Click and drag</strong> to create a curved node.</li>
+</ol>
+<p>To finish the path:</p>
+<ol>
+  <li><strong>Close it</strong> clicking over the starting node.</li>
+  <li><strong>Leave it open</strong> pressing <kbd>Esc</kbd> or <kbd>Enter</kbd> to stop editing. Then press <kbd>Esc</kbd> to exit the edit mode.</li>
+</ol>
+<p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while adding nodes the angle between the current and the next will change in 45 degree increments.</p>
+<p><img src="/img/paths-create.gif" alt="paths" /></p>
+<h4>Edit nodes</h4>
+<p>Double click a path or select and press <kbd>Enter</kbd> to start editing a node. Then you can choose individual nodes or create new ones. Press <kbd>Esc</kbd> to exit node edition. </p>
+<p><img src="/img/paths-edit.gif" alt="paths" /></p>
+<h4>Node types</h4>
+<p>There are two types of nodes: curve or corner (straight). The type of a selected node can be changed at the bezier menu. Curved nodes have bezier handles that allow to modify the curvature of a path contours.</p>
+<p><img src="/img/paths-nodes.gif" alt="paths" /></p>
+
+
+<h3 id="images">Images</h3>
+<p>You have several options to insert an image in a Penpot file:</p>
+<ol>
+  <li>Use the <strong>image tool</strong> at the toolbar or press <kbd>K</kbd> to inspect images in your file system.</li>
+  <li><strong>Drag</strong> an image from your computer to the viewport.</li>
+  <li>Copy an image & paste it or drag it right from a <strong>browser</strong>.</li>
+  <li>Drag an image from a Penpot <strong>library</strong>.</li>
+</ol>
+<p><img src="/img/" alt="" /></p>

user-guide/workspace-basics/index.njk

@@ -0,0 +1,36 @@
+---
+title: 3· Workspace basics
+---
+
+<h1 id="workspace-basics">Workspace basics</h1>
+<p class="main-paragraph">The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside artboards that will help you to create pages and exportation units.</p>
+
+<h3 id="viewport">The viewport</h3>
+<p>Surrounded by panels, header and toolbars, in the middle of the workspace, you can find the viewport. The viewport is the design area of a file page. It is practically infinite. If what you need is a frame with specific, limited dimensions, you can create an artboard.</p>
+<p><img src="/img/viewport.png" alt="the viewport" /></p>
+<h4>Navigate the viewport</h4>
+<p>Press <kbd>space</kbd> while moving your mouse to navigate the viewport. If you are using a trackpad you can do two finger scrolling.</p>
+<p><img src="/img/viewport-navigate.gif" alt="navigate the viewport" /></p>
+
+
+<h3 id="zoom">Zoom</h3>
+<p>To zoom in and out hold <kbd>Ctrl</kbd> (or <kbd>⌘</kbd> if using macOS) and use the scroll wheel on your mouse. You also have a bunch of useful shortcuts for the most common zoom levels that you can find at the zoom menu in the navigation bar.</p>
+<p><a href="/user-guide/01-introduction/1-2-shortcuts/#zoom" target="_blank">All zoom shortcuts →</a></p>
+<p><img src="/img/zoom-menu.png" alt="zoom menu" /></p>
+
+
+<h3 id="dynamic-alignment">Dynamic alignment</h3>
+<p>While moving objects at the viewport Penpot will show alignment guides for the edges and the center of the layers at sight. Dynamic alignment also snaps the object that is being moved to those guides to help you align to the center of the edges of other objects.</p>
+<p><img src="/img/dynamic-alignment.gif" alt="Dynamic alignment" /></p>
+<p>If there are more than two objects nearby and you drag one of them Penpot will show their distance to help you distribute them equally. </p>
+<p><img src="/img/dynamic-alignment-measurement.gif" alt="Dynamic alignment" /></p>
+
+
+<h3 id="rulers">Rulers</h3>
+<p>Penpot has rulers that measure in pixels. Soon there will be guides that can be dragged from the rulers.</p>
+<p><img src="/img/rulers.gif" alt="rulers" /></p>
+
+
+<h3 id="snap-to-grid">Snap to grid</h3>
+<p>Objects automatically snap to the nearest point of a visible grid. This option can be disabled anytime from the main menu.</p>
+<p><img src="/img/snap-grid.gif" alt="snap to grid" /></p>