Documentation

The Porto design

The Porto designUniSoftCo

The shapes, the chrome and the layouts the Porto design declares.

Everything below is declared by the Porto design itself, so it is true of this deployment rather than of a manual.

What it can draw

A design draws only the families it declares. One that does not name an addon simply has no components for it — a news template has no shop.

  • Articles
  • Assistant
  • Authentication
  • Basic
  • Businesses
  • Management
  • MobileApp

Its top and its bottom

4 headers to choose between:

  • Standard
  • With a contact bar
  • Deep band, menu on one row
  • No header

4 footers to choose between:

  • Detailed
  • One line
  • Coloured, with the address and the menu
  • No footer

The shapes it offers

Where a component can be drawn more than one way, these are the shapes this design offers and what each is for.

Articles.List

  • More from the open article's category (any) It cannot use: categoryId, pager — so the composer does not offer them here.

Assistant.Chat

  • In the page

Basic.Html

  • Card

Basic.Slider

  • Band — a headline and a button on a colour Holds 1 — a floor, so a placement with fewer is raised to meet it. It cannot use: interval, showText — so the composer does not offer them here.
  • Boxes — a mark, a heading and a line Holds 3 — a floor, so a placement with fewer is raised to meet it. It cannot use: interval, showText — so the composer does not offer them here.
  • Hero — one slide, full width, words on the picture Holds 1 — a floor, so a placement with fewer is raised to meet it. It cannot use: interval, showText — so the composer does not offer them here.
  • Steps — numbered, with a rule between them Holds 3 — a floor, so a placement with fewer is raised to meet it. It cannot use: interval, showText — so the composer does not offer them here.
  • The original slider

Management.Buy

  • A third of the row, with two boxes beside it
  • The panel on its own, full width It cannot use: appTitle, appLede, appUrl, aboutTitle, aboutLede, aboutUrl — so the composer does not offer them here.

How a page can be divided

A layout is how one page is divided. Every one of them has a band above the page and an area under it, whatever happens in the middle.

One column

  • Above the page — 12 of twelve wide
  • Content — 12 of twelve wide
  • Under the page — 12 of twelve wide

A narrow column

  • Above the page — 12 of twelve wide
  • Content — 8 of twelve wide
  • Under the page — 12 of twelve wide

Content, then sidebar

  • Above the page — 12 of twelve wide
  • Content — 8 of twelve wide
  • Sidebar — 4 of twelve wide
  • Under the page — 12 of twelve wide

Sidebar, then content

  • Above the page — 12 of twelve wide
  • Content — 8 of twelve wide
  • Sidebar — 4 of twelve wide
  • Under the page — 12 of twelve wide

Two equal columns

  • Above the page — 12 of twelve wide
  • Content — 6 of twelve wide
  • The second column — 6 of twelve wide
  • Under the page — 12 of twelve wide

Two equal columns, edge to edge

  • Above the page — 12 of twelve wide
  • Content — 6 of twelve wide
  • The second column — 6 of twelve wide
  • Under the page — 12 of twelve wide

Three columns

  • Above the page — 12 of twelve wide
  • Content — 6 of twelve wide
  • Left column — 3 of twelve wide
  • Right column — 3 of twelve wide
  • Under the page — 12 of twelve wide

Article page

  • Above the page — 12 of twelve wide
  • Content — 8 of twelve wide
  • Sidebar — 4 of twelve wide
  • Under the page — 12 of twelve wide

Comments

Nobody has written yet. Be the first.

This article is not taking comments.