How to use the components

To populate a page, simply copy and paste the components in the starter website or in your own project. All the components have been turned into symbols to make it easier to move them around.

You can also place the components using the symbols panel:

‍

How the components are structured

The content of every page is contained inside a page wrapper. ‍

The page wrapper contains sections, which have top and bottom padding and no margins.

Inside each section there is a wrapper, which defines the max-width of the content.

Finally, wrappers contain rows and columns.

How to use the grid

The custom flexbox grid is based on Bootstrap, and uses a similar nomenclature:

- lg: desktop viewport - 12 columns

- md: tablet viewport - 4 columns

- sm: mobile landscape - 2 columns

- xs: mobile portrait - 2 columns

Always start with the class "col", and write the combo classes from the largest viewport to the smallest. For example:

How to use the style guide

The live style guide is a useful tool to keep track of all the styles and colors in use.

To style the basic html tags, make sure that you don't create any new class, unless necessary.

For example, to style all H1 headings, click on "All H1 Headings". This way the changes will apply to the entire website.

‍

To change the font in the entire website, edit directly the body tag:

‍

How to use the starter website

1. Copy/paste or place the symbols you need in the starter website.

2. Right click on the symbol, click on "unlink from Symbol" or use the shortcut Command/Control + Shift + A. Now you can change content without changing the original symbol.

3. Style the symbols to turn the wireframe prototype into the final website!

‍
To see an example of how Legowerk has been used in a real website, click here.