CSS3 Approach
CSS-only approach, found here.
- - Limited browser support, but may be enough. Should have good 1-column failback for unsupporting browsers.
- + Very easy to implement.
- + Works with Webflow's Rich Text Element.
- + Supports margin gap and margin rule styling.
<style>
#columns {
-moz-column-count: 3;
-moz-column-gap: 2em;
-moz-column-rule: 1px dashed #aaa;
-webkit-column-count: 3;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px dashed #aaa;
}
</style>
DEMO
Conubia tristique auctor laoreet purus odio mattis pellentesque aenean adipiscing.
- So this is a test
- Let's see how this works
Consequat ornare euismod consequat imperdiet et pellentesque nam suspendisse, semper ac aliquam at eu, rhoncus posuere!
Nostra libero.
Semper quis diam praesent lectus suspendisse, curabitur suspendisse ut fames interdum?
Porta consectetur diam nec ac eros felis et consectetur aenean auctor, taciti phasellus pretium euismod, justo suspendisse molestie nullam faucibus blandit imperdiet? Senectus etiam dictumst venenatis curabitur curae tristique? Varius leo ut fermentum tortor quis dapibus iaculis sodales, congue ipsum? Feugiat sem accumsan purus cubilia volutpat ad laoreet. Fames volutpat lectus. Enim faucibus nunc per.
Class tincidunt suspendisse non, taciti nostra fringilla euismod orci a? Nostra libero. Convallis nisl proin vel dapibus? Libero in ad. Vulputate lectus pellentesque potenti vehicula vitae! Blandit magna accumsan cras pretium proin per metus, quisque eros, per orci lectus hac magna ipsum phasellus, suscipit auctor ac vel varius. Pulvinar sem tristique donec velit integer himenaeos?
Nullam mollis purus suscipit. Platea nisi sit inceptos, senectus rhoncus. Ligula libero vehicula elit dapibus, odio adipiscing consectetur amet. Donec cras tempor aenean morbi fames, scelerisque integer justo fringilla est augue malesuada a primis himenaeos aliquam, donec lectus praesent? Turpis volutpat! Sapien leo consectetur. Faucibus mi fermentum ac dolor aenean massa quisque aenean ligula praesent! Velit rhoncus congue ad. Dictum habitasse erat eros cubilia mauris sit scelerisque hac fringilla elementum tempus accumsan, pellentesque gravida orci quam, neque ante hac? Suscipit elit dui sem, donec ligula commodo, in dictumst amet, cubilia eros lorem nisl ut. Semper leo ante odio conubia a, sociosqu aliquam viverra maecenas? Praesent purus varius nulla iaculis vehicula aliquam etiam vitae tortor? Ac consequat curae litora.
Other approaches ( no DEMO yet )
jQuery approach
https://adamwulf.me/columnizer-jquery-plugin/
https://stackoverflow.com/questions/3009670/flow-2-columns-of-text-automatically-with-css
DEMO
All of these lists are created and edited in the Webflow's Designer / Editor. They are converted to nested lists when the page loads.
- Top-level item files that are stored in your site assets
- > Level 2 item
- >> Level 3 item
- Vegetables
- > Broccoli
- > Carrots
How to implement
Use the Video link in the top menu for a complete walkthrough.
01 The basic process
Add your CSS to your Site
- Add WFU to your Site, with the CSS and JS links.
- Identify any Rich Text Elements or standalone List Elements where you want nesting support. Tag those elements with a custom attr of wfu-lists=all.
- Create your lists. Prefix any list item with a > to indent it, or with a + or - to identify it as a PRO or CON. These can be combined.
02 Tips and best practices
- Though there is no restriction, it's generally best not to skip levels at the start of lists, e.g. > to >>>.
- PROS and CONS can be styled to meet your needs. Likely, WFU themes and cloneables are coming at some point to help simplify this.
03 Styling PROs & CONs
The easiest way to do this in the Webflow designer is to create a separate LIST Element, outside of a Rich Text Element. In this form, you can apply classes directly to individual list items.
A default list will contain 3 items,
- Select the first item, and create a CSS selector in webflow of wfu-pro.
- Style that item as you like, especially color.
- Select the second item, and create a CSS selector in webflow of wfu-con.
- Style that item as you like, especially color.
- In your published site, you'll be able to see how this looks in your generated list.
- Unfortunately Bullet changes must be created in CSS or STYLE elements, as the Webflow designer doesn't support custom bullets in the designer.
- This is the style for a PRO list item, created using the markup +
- This is the style for a CON item, created using the markup -
- This is the style for list items that are neither PRO nor CON