EverWeb Widgets

Grid Columns

Columns in a CSS grid layout can have their relative widths expressed in fractional units (fr). Setting the relative widths of two columns in a grid is just a matter of giving each a value to represent the required ratio.
In the FAQ module below, both columns are equal so each has a width of 1fr.
The Q & A module has the left text column set at 40% (2fr) and the right column at 60% (3fr)

FAQ - Q & A

Frequently Asked Questions

Click any question to find the answer or follow the link below to make contact for more info.
The previous answer will close when a new question is selected

Info

[1] How is this list created?: The HTML5 <dl> tag is used since it defines a description list
[2] How are the list items split into Q & A?: The <dl> contains pairs of <dt> (questions) and <dd> (answers)
[3] How do they open and close?: The <dt> elements are triggers which slide open the corresponding <dd> on click using javascript
[4] Animation: A jQuery plugin is used to add an "on" class to the <dd> causing it to slide down
[5] Why is this better for SEO?: The search engines recognise this as a list of pairs of items that are related to each other so it is better than using an unordered <ul> or ordered <ol> list
[6] How many questions & answers can it hold?: Up to 48

FAQ

The text block has a heading, a paragraph and an optional CTA style link when can be configured to open internal or external pages and in a new window if required.
The questions and answers are in the right column and slide below the text when viewed on devices with a screen with less than the value set for the break point.

Questions & Answers

Click any question to find the answer or follow the link below to make contact for more info.
The items require click to open and click to close.

Contact

+Can I use the Responsive Grid Layout Module?

The module has been supported by all major browsers since March 2017

+Why should I use it?

The grid layout creates better responsive layouts

+How are these widgets different from using the EverWeb Responsive Row?

The Responsive Row widget uses Flexbox rather then Grid

+Which is Better?

Flexbox is one dimensional and only supports columns or rows. CSS Grid is two dimensional and supports columns and rows

+Why is the CSS Grid Layout Module better?

The module creates better layouts than nay other grid system with far less code and no Javascript

+Can I use Responsive on the same page as the Responsive Row widget?

Yes you can but, using widgets will create a better layout with more efficient code

Q & A

This is similar to the FAQ module except the answers remain open until closed and their is +/- indicator. The questions, answers and indicator all have controls for setting the font color.
The border is optional and the separator has controls for width, color and style - solid, dashed or dotted.

Click Drop Navigation

The navigation at the top of this page is a separate item which can be fixed to the top of the page. Links are added using a modified version of the EverWeb widget API Assets List and can be internal, external or to a file.
The navigation can be open when adding the links to make editing easier. There is a checkbox to close the dropdown prior to publishing.
Hamburger Icon
The icon can be positioned left or right in relation to the dropdown and left or right in relation to the edge of the browser or devices window. There are controls for setting its background, border radius, color and hover color. The size of the icon can be adjusted in relation to the tab size using a slider.
Links
The dropdown has controls for adjusting its width and adding a border and radius. The links can use a web safe font or none websafe or Google hosted font with a web safe fallback. There are controls for setting the font size , color, hover color and the separator width.
Current Page
There is a checkbox for turning on the function to indicate the current page link with a contrasting color.