Lesson 1, Topic 1
In Progress

Element Studio

Element Studio is an all-in-one integrated development environment (IDE) designed specifically for crafting elements for Breakdance. It’s a powerful and user-friendly tool that allows you to visually create elements using a combination of HTML, CSS, and the Twig templating engine.

One of the coolest things about Element Studio is that most of the elements you see within Breakdance have actually been created using this very tool!

You’ll be able to open up nearly every element included with Breakdance right in Element Studio, giving you a close look at how they were created. You can even make copies of these elements and add your own custom touches, which is perfect for learning the ropes or creating something truly unique.

While we’re not creating a video specifically for the Element Studio since it’s quite complicated for a starter course, just know you can open and edit any Breakdance element using the studio. We wanted to include some mention of it in the course since it’s very powerful & can extend Breakdance quite impressively.

As you work in Element Studio, keep in mind that it generates PHP code. If you make a mistake or something goes wrong, it could prevent Breakdance from opening until you revert the problematic change. We recommend using Git to commit your work regularly (don’t edit elements unless you know what you’re doing)

Before you dive in, you’ll need to set up the Custom Elements Boilerplate Plugin, which is required to save your elements. Grab the plugin: https://github.com/soflyy/breakdance-custom-elements/

Still feeling a bit unsure? You can check the official tutorial videos from Breakdance, as well as check out our written tutorial