Bundled Configurations

Bridgetown bundles a number of automation scripts to set up common project configurations. You can run these scripts using bundle exec bridgetown configure [CONFIGURATION]

The configurations we include are:

• TailwindCSS (tailwindcss)
• PurgeCSS Post-Build Hook (purgecss)
• Stimulus (stimulus)
• Turbo (turbo)
• Bridgetown recommended PostCSS plugins (bt-postcss)
• Netlify TOML Configuration (netlify)
• Swup.js Page Transitions (swup)
• Automated Test Suite using Minitest (minitesting)

The full list of configurations can also be seen by running bridgetown configure without arguments.

Bundled configurations can also be run while creating a new Bridgetown project using the --configure= or -c flag and passing in a comma-separated list of configurations.

bridgetown new my_project -c swup,purgecss

A bit about the configurations

TailwindCSS

🍃 Adds TailwindCSS with an empty configuration along with PurgeCSS.

Please be aware that you need to have PostCSS setup to run this configuration. You can create a new Bridgetown project with PostCSS using bridgetown new my_project --use-postcss.

This configuration will overwrite your postcss.config.js file.

🛠 Configure using:

bundle exec bridgetown configure tailwindcss

PurgeCSS Post-Build Hook

🧼 Adds a builder plugin which runs PurgeCSS against the output HTML + frontend JavaScript and produces a much smaller CSS output bundle for sites which use large CSS frameworks.

🛠 Configure using:

bundle exec bridgetown configure purgecss

Stimulus

⚙️ Sets up Stimulus and adds an example controller.

🛠 Configure using:

bundle exec bridgetown configure stimulus

Turbo

⚙️ Adds and configures Turbo.

🛠 Configure using:

bundle exec bridgetown configure turbo

Bridgetown recommended PostCSS plugins

⛓️ Installs and configures a set of PostCSS plugins recommended by the Bridgetown community:

• postcss-easy-import
• postcss-mixins
• postcss-color-function
• cssnano

It will also configure postcss-preset-env to polyfill all features at stage 2 and above. If you don’t need certain polyfills for your use case, you can bump up stage to 3 or 4 (for example, custom properties won’t get polyfilled if stage is set to 4). nesting-rules and custom-media-queries are explicitly enabled.

This configuration will overwrite your postcss.config.js file.

🛠 Configure using:

bundle exec bridgetown configure bt-postcss

If you’d like to customize your setup further you can find more plugins here.

Netlify TOML Configuration

⚙️ Adds a basic configuration to your site for use in Netlify deployments.

🛠 Configure using:

bundle exec bridgetown configure netlify

Swup.js Page Transitions

⚡️ Adds Swup for fast animated page transitions that make your site feel modern and cool. (If you’ve used Turbo or Turbolinks, you’ll love Swup!)

🛠 Configure using:

bundle exec bridgetown configure swup

Automated Test Suite using Minitest

⚙️ Adds a basic test suite using Minitest and Rails DOM assertions for extremely fast verification of your output HTML. Check out our automated testing guide for more info!

🛠 Configure using:

bundle exec bridgetown configure minitesting