EverWeb Widgets

Sidebar Navigation

A vertical sidebar navigation is a lot better in many respects than an inline horizontal one. It is a lot easier to read and useand visitors are more likely to click through to other pages.
The link text can be made longer and more descriptive - either by increasing the width of the sidebar or allowing it to return to two or more lines.
Since this is a CSS Grid layout, the navigation can be easily vertically aligned if it is shorter than the main content section. The options are start, center, end and auto.

Responsive Grid Sidebar Navigation

The container is centered in the browser with a maximum width setting. It has its own controls for background color and opacity and for the grid gap and vertical spacing.
The main section is responsive and the sidebar has a fixed width when viewed on wider screens. Below the break point the navigation becomes full width, responsive and positions itself above the main section.
Main
The main section has an optional image with alt text and an optional border, a heading and a text block. It can use a web safe or a non web safe or Google hosted font with a web safe fallback. In addition to having controls for styling the heading and text there are controls for span size and color..
Sidebar
The sidebar has an optional heading and controls for sidebar width, heading size and coloe, link size, color and hover color, padding, spacing vertical align, border radius and for the background and its opacity.
Links
The links are inserted using a modified verion of the EverWeb Widget API Assets List and can be configured to open internal or external pages or files.

List Columns

The auto columns are set up as display block and then switch to display grid on mobile phones as a quick and dirty way of removing the column styles.
Two or more columns are used here because …

Lists <ul> with short list items <li> don't look too good at wide browser widths
The list is set in a container with display:block
The properties used here are column-count, column-gap and column rule
Column-count is the number of columns
Column-gap is the space between the columns
The column rule is the vertical dividing line. It has controls for width and color.
The list can use any of the standard list-style types
These are:
disc, circle, square, none, decimal, decimal-leading-zero, lower-alpha and upper-alpha
Items are evenly distributed in the columns
The break point is set to change the layout on tablets in portrait mode
Set the display property to grid removes all the column styles
Yet another example of how the the CSS Grid Layout Module simplifies creating responsive designs

List Columns & Text

Lists are inserted in text simply by stacking widgets. In this example, the List Columns widget is inserted between two Responsive Text Module widgets.