Let’s make a Woocommerce shop with Breakdance

Here’s a free course on how to make a Woocommerce shop with Breakdance.

If you need to get Breakdance, please use this (affiliate) link to help fund this venture.

Why Breakdance?

• Super clean code output
• Surprisingly developer friendly
• Element builder is awesome
• Easy to use your own design library
• Easy woocommerce implementation

So yeah, I’ve been playing with it for a while, and it’s really good.

The Playlist

The video below is a playlist, you can see the little list icon:

So please bookmark this page and revisit so you can keep up, or subscribe on YouTube.

Or check it out directly on YT

Extras

Download the Assets

I might add more stuff as I progress, but I think I got most of the stuff you need.

Links

https://www.mamp.info/en/mac/

http://www.cupcakeipsum.com/

https://www.theleagueofmoveabletype.com/league-gothic

The snippet from Lesson 04

Lesson 04 is scheduled to go live on Sept 23rd, 2022

html {
    font-size: var(--bde-body-font-size);
}

This snippet will be useful depending on your approach to responsive typography.

The snippet from Lesson 10

.breakdance .bde-rich-text-8216-107 div.ee-post {
  padding: 0;
}

The snippet from Lesson 11, 12

.breakdance .bde-rich-text-8216-107 * {
	height: 100%;
}
.breakdance .bde-rich-text-8216-107 img {
	object-fit: cover;
	object-position: center;
}
.breakdance .bde-rich-text-8216-107 .section-container {
	height: 100vw;
	max-height: calc(100vh - 120px);
}

The snippet from Lesson 14

.breakdance .bde-rich-text-8216-107 {
	overflow-x: hidden;
}
.breakdance .bde-rich-text-8216-107:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 50%;
	background-color: #000;
	transform: translate(-50%,0);
}

Please remember that the first snippet goes in the section, and the second goes in the loop module.

The snippet from Lesson 18

This goes in the custom plugin that we added in the beginning of this course.

function new_excerpt_length($length) {
	return 20;
}
add_filter('excerpt_length', 'new_excerpt_length');

Source: https://www.a2hosting.com/kb/installable-applications/optimization-and-configuration/wordpress2/changing-the-excerpt-length-in-wordpress

and the CSS for .image-ratio-11

.breakdance .bde-rich-text-8216-107 .bde-image, 
.breakdance .bde-rich-text-8216-107 .breakdance-image, 
.breakdance .bde-rich-text-8216-107 .breakdance-image-container, 
.breakdance .bde-rich-text-8216-107 .breakdance-image-clip {
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
}
.breakdance .bde-rich-text-8216-107 .breakdance-image-object {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

There probably will be more snippets.

More content will be added here as more videos go live.

I have a lot of other (paid and free) courses covering lots of topics at different price points so come have a look.