EverWeb Stack Widgets
Flexible responsive layouts with Stack widgets
Responsive Rows
EverWeb's Responsive Row
Creating responsive page layouts with EverWeb has become possible - and easy - using the Responsive Row widget to create items and stack them vertically on the design canvas.
The widget is a "catch all" solution and has some limitations. It uses the older Flexbox layout to create columns but it can't rows. This becomes obvious when attempting a a row with htree items and trying to get it to behave properly when viewed on the narrower screens of mobile touch devices.
EverWeb Widgets use the new CSS Grid Layout Module instead …
Responsive Grid Layout
CSS Grid Layout Module
This new module is now being used by many leading web designers to create better layouts with less code than can be achieved with the complicated grid systems used by Wordpress and many other template derived systems.
These systems rely on complicated stylesheets and, in most cases, Javascript and are not efficient - especially for mobile pages.
CSS Grid is a new way of creating layouts on the web. For the first time ever we have a proper layout system available natively in the browser.
The benefits become especially clear if you compare CSS Grid to Bootstrap - the most popular framework of them all. Not only can you create layouts that previously weren’t possible without introducing JavaScript, but your code will be easier to maintain and understand.
Hacker Noon
Versatile
In response to requests from users who design client sites, EverWeb Widgets has created over 300 new widgets based on the grid module which overcome the reported problems and create better, more efficent items.
One of the main problems EverWeb users seem to be facing when attempting to create responsive page designs is being stuck in the "fixed width" mindset by trying create a new design using the existing items.
Space & Balance
Modern design uses white space to separate items and create balance. Gone are the days when it was deemed necessary to fill every available space on a page to to cram different types of items into a row.
3 Item Row
An odd number of items is more difficult to handle than an evern number when it comes to the point where the third item needs to change its location from one row to another when viewed on the narrower screen of a touch device like an iPad.
This item either needs to maintain its width and be centered or stretch to full width below the first two.
Follow the links below to check out some examples of three item rows with both mixed content and same content …
Rows & Stacks
Widgets
At the time of writing there are 120 widgets for creating responsive items which contain two or more items and/or overlay items. These were designed with input from some of the EverWeb users who design client sites to create responsive items that their clients asked for but couldn't be replicated using the default EverWeb features.
Follow the link below to check out the various Row and Stack widget packs.