dramatic sunset photo of Portland's famed Fremont Bridge

Bridgetown

Cards

Share what you know.
Build what you learn.

Bridgetown Cards is a community site, for Bridgetowners, by Bridgetowners. Browse through our selection of tips & tricks, with accompanying code snippets, to help you get a leg up on your site build. Then when you come up with a cool new technique or pull in a sweet Ruby gem or neat-o NPM package, and want to share that know-how with others, this is the place to do it. Have fun! đŸ˜ƒ

ICYMI: Bridgetown is a next-generation, progressive site generator & fullstack framework, powered by Ruby. Check it out!

Submit Your Own Card…

Use Turbo Frames to Load Modal Content

This very technique is used on this website! How can a static site serve the same content for inside a modal as well as a standalone page simultaneously?! Find out how in this card.

Turbo Shoelace Read…

Use Turbo Frames to Load Modal Content

Return to Cards

Display Money Values as Formatted Currency

Any time you deal with e-commerce data, you need to display money. Thankfully, there’s a straightforward way to do it in Ruby.

Liquid ERB Read…

Display Money Values as Formatted Currency

Return to Cards

Add a Table of Contents to Your Markdown Page

If you have a long Markdown page and would like a simple way to navigate to various points of interest, here’s a helper which can’t be beat.

Liquid ERB Markdown Read…

Add a Table of Contents to Your Markdown Page

Return to Cards

Generate Repeating Events

Thanks to a nifty little gem called IceCube, we can determine recurring schedules for events and generate repeating content.

resources dates Read…

Generate Repeating Events

Return to Cards

Render Resource Components Conditionally

Want to render multiple categories or across multiple collections? Use a component hierarchy!

resources ERB Serbea Read…

Render Resource Components Conditionally

Return to Cards

Adding Custom Web Fonts

It’s very easy to add custom web fonts to your website. Here’s how to do it.

frontend CSS Read…

Adding Custom Web Fonts

Return to Cards