From 682d76ef4f54b78ea502dec930f6e18094d41c67 Mon Sep 17 00:00:00 2001 From: andy Date: Tue, 27 Feb 2024 09:56:16 +0100 Subject: [PATCH] :books: Grid textual content --- img/layouts-add.png | Bin 0 -> 224891 bytes user-guide/flexible-layouts/index.njk | 158 +++++++++++++++++++------- 2 files changed, 117 insertions(+), 41 deletions(-) create mode 100644 img/layouts-add.png diff --git a/img/layouts-add.png b/img/layouts-add.png new file mode 100644 index 0000000000000000000000000000000000000000..94df2fdeea87b4c15b21f4cbfb4a7901f2f3a1af GIT binary patch literal 224891 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 VKFpn)l1{=1pYqx({|lZQ_y2Ks2JQd= literal 0 HcmV?d00001 diff --git a/user-guide/flexible-layouts/index.njk b/user-guide/flexible-layouts/index.njk index 337f203..fe04cc3 100644 --- a/user-guide/flexible-layouts/index.njk +++ b/user-guide/flexible-layouts/index.njk @@ -15,8 +15,10 @@ title: 08· Flexible Layouts

Flex Layout is based on Flexbox CSS standard

Penpot's Flex Layout is built over Flexbox, a CSS module that provides a more efficient way to lay out, align and distribute space among items in a container. As there are already many comprehensive explations about Flexbox we are not going to write another one. If you are interested we can recommend you to read the one at CSS Tricks.

+

Flex Layout

-Image from CSS Tricks +
Image from CSS Tricks
+

Add Flex Layout

@@ -26,7 +28,7 @@ title: 08· Flexible Layouts
  • From the option at the selection menu (right click button).
  • Pressing Ctrl/⌘ + A.
    • -

    Flex Layout

    +

    Adding Layouts

    Arrange and reorder objects to a Flex Layout

    @@ -92,7 +94,7 @@ title: 08· Flexible Layouts

    Grid Layout

    -

    Grid Layout allows you to efficiently organize, align, and distribute items in 2-dimensional layouts. You can create rows and columns of elements, giving you fine-grained control over their expansion, alignment, and responsiveness to various screen sizes.

    +

    Grid Layout allows you to efficiently organize, align, and distribute items in 2-dimensional layouts. You can create rows and columns of elements, giving you fine-grained control over their expansion, alignment, and responsiveness to various screen sizes. It's a powerful tool for creating responsive designs.

    Grid Layout is based on CSS Grid standard

    -

    Penpot's Grid Layout is built over CSS Grid, a fairly new CSS module that provides a more efficient way to lay out, align and distribute space among items in a container using two dimensions. If you are interested to know more about this CSS module we can recommend you to read this awesome Guide to CSS Grid at CSS Tricks.

    +

    Penpot's Grid Layout is built over CSS Grid, a fairly new CSS module. If you are interested to know more about this CSS module we recommend checking out the comprehensive explanation Guide to CSS Grid at CSS Tricks.

    Add Grid Layout

    @@ -111,43 +113,117 @@ title: 08· Flexible Layouts
  • From the option at the selection menu (right click button).
  • Pressing Ctrl/⌘ + Shift + A.
    • -

    Flex Layout

    +

    Adding Layouts

    + +

    Grid Layout properties

    +

    There are properties both for Grid containers and Grid items (cells, rows, cols). Those are the same properties that you can use with CSS Grid. You can read here detailed explanations about CSS Grid properties.

    + +

    Grid layout basic terminology

    +
      +
    • Container: The container is the parent element of all the grid items.
      • +
    • Cell: A single unit of the grid. Cells are the children elements of a grid container.
      • +
    • Area: A composition of any number of grid cells.
      • +
    • Gap: The space between grid items (cells and areas), both horizontally and vertically.
      • +
    • Row: The horizontal and lines that define the rows of the grid.
      • +
    • Column: The vertical lines that define the columns of the grid.
      • +
    + + +

    Grid containter properties

    +
      +
    • Direction: Row, column.
      • +
    • Align items (vertically and horizontally): Start, center, end.
      • +
    • Justify items (vertically and horizontally): start, center, end, space-around, space-between, stretch.
      • +
    • Gap: Row, column.
      • +
    • Padding: Top, right, bottom, left, vertical, horizontal.
      • +
    + +

    Grid cell properties

    +Auto, manual and Area +

    These are different ways to manage the element's position that therefore have different code representation.

    +
      +
    • Auto: The elements are positioned in order inside the cells so taht If a new element enters the flow the rest get repositioned. This is the default behaviour.
      • +
    • Manual: The elements are positioned in specific cells or areas. Elements inside area cells will have the css properties grid-column and grid-row.
      • +
    • Area: A cell or area with an Area name. Areas behave as Manual cells.
      • +
    + +

    Align self (vertically and horizontally): Start, center, end, stretch.

    + + +

    Placing grid elements

    +

    To place elements inside a grid layout, just drag them or paste them in a cell or area.

    +

    Tip: Drag an element over a grid and then press Ctrl to place it as auto. That way the layer will be postioned automatically in the first available cell or area.

    + +

    Grid element properties

    +
      +
    • Position: static, absolute.
      • +
    • Width: fix, 100%.
      • +
    • Margin: top, right, bottom, left.
      • +
    + + +

    Edit rows and columns

    +

    To edit grid layouts (rows, columns, units, cells, areas, etc) you can either select the board and press the "Edit grid" button or double click over the board.

    +

    You have several ways to edit rows and columns:

    + +

    Design sidebar

    +

    From the design sidebar you will be able to:

    +
      +
    • Get info about columns and rows: Press the 3 dots besides the Columns or the Rows section to get details.
      • +
    • Add columns and rows: Press the + button to add a column or a row.
      • +
    • Delete columns and rows: Press the - button to delete an specific column or row.
      • +
    • Drag columns and rows: You can reorder columns and rows by clicking and dragging over the drag icon.
      • +
    • Change sizes and units: Change specific sizes and units of each row and column.
      • +
    +

    Tip: You cand drag columns and rows while leaving the elements in the same position if you perform the action while pressing Ctrl.

    + +

    Design viewport

    +

    From the design viewport you will be able to:

    +
      +
    • Add columns and rows: Press the + button at the end of the headers to add a column or a row.
      • +
    • Drag columns and rows: To drag columns and rows hover a column or row header until the hand cursor is shown and then click and drag it.
      • +
    • Change sizes and units: Drag the columns and rows numbers and change specific sizes and units on their headers.
      • +
    +

    Tip: You cand drag columns and rows while leaving the elements in the same position if you perform the action while pressing Ctrl.

    + +

    Contextual menu

    +

    To launch the contextual menu of rows and columns you can right click over a column or row header or left click on the menu button.

    +

    From the contextual menu of rows and columns you will be able to:

    +
      +
    • Duplicate row/column
      • +
    • Add 1 row/column to the left
      • +
    • Add 1 row/column to the right
      • +
    • Delete row/column
      • +
    • Delete row/column and shapes
      • +
    + +

    Grid units

    +

    You can use different units at your grid columns and cells:

    +
      +
    • FR: FR stands for "fractional unit", meaning "portiong of the remaining space". If a grid has 2 columns being one 1fr and othter 3fr, the first one will take 25% of the space while the other 75%.
      • +
    • Auto: The row/col size will be automatically set, relative to the items and the available space.
      • +
    • Pixels: Well, we all know pixels, don't we?
      • +
    + +

    Areas

    +

    Areas are composition of any number of grid cells.

    + +

    Create areas

    +

    You have two ways to create areas:

    +

    1. Select more than one cell pressing left click while Ctrl), then press right click to open the menu and then press the option "Merge cells".

    + +

    2. Select one cell pressing left click, then hover near the limit to the cell you want to merge the selected cell with until the cursor changes. Then drag the cursor to merge the selected area to other areas in the same direction.

    + + +

    Name areas

    +

    To name an area, select the "Area" option at the grid cell properties (right sidebar) and fill the name of the area.

    + +

    Undo areas

    +

    To turn areas back to regular cells, just select the "Auto" option at the grid cell properties (right sidebar).

    + + +

    Grid code and specifications

    +

    Grid layout at Penpot behaves just like CSS Grid because is actually using the CSS Grid standard. This means that you can just switch to Inspect mode, get the code and use it in real websites.

    - -management -- sidebar -- board - -properties -- positioning -- alignment -- direction - -Edition -- Col & rows -- Units (fr, auto, px) -- Cells & Areas - naming - -code -- html & css - -use cases -- magazine -- table -- bento grid - - -Differences grid flex -- direction -- space control -- complexity -- use cases - -keyboard -- crear Shift -- ctrl drag -- drag shapes en grid con ctrl para que la shape la ponga en auto - -