The Porto design
UniSoftCoThe 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.