Bricks Builder rebuild: minimal Framer portfolio site

[@farhan-app]

A massive thank you to everyone who watched this video and sent kind words! For the next video, as voted by everyone in the poll, I will be working on a modern theme toggle to get light/dark mode working on this site 😊

[@Xenio2007]

Nice one, you deserve a like for using Vanilla Bricks Builder. 👍

[@farhan-app]

@@Xenio2007 Aha thank you! Honestly vanilla Bricks is soooooo good!!

[@InspirationBroadcast]

Awesome Akhi! Please more vanilla builds like this. Almost all bricks videos are made with frameworks and not everyone can afford those tools. Thanks a lot once again ❤

[@farhan-app]

I know exactly how you feel! I’ll definitely focus more on vanilla Bricks - thanks! 😊

[@loveljungstrom]

And also - I'd love to see a woocommerce build on Bricks!

[@farhan-app]

Oooo good idea! On the list too - thanks! 🙏

[@abdulwaheedorg]

Keep making more videos like this

[@farhan-app]

Appreciate it pal, will do my best!!

[@manuelguidi]

Good job! Finally someone who uses Bricks as a real Pro in the old Continent too!

[@farhan-app]

Ahaa thanks pal!

[@Audulf-of-Frisia]

This was a cool video. I'd love to see more on more complex websites.

[@farhan-app]

Thanks pal - in the works as we speak! :)

[@Audulf-of-Frisia]

😁👍🏻

[@loveljungstrom]

This was really interesting to watch!! I'd love a coming video where you talk more about the CSS variables and initial set-up of styles and the benefits of doing it your (obviously much smarter 😅) way than using bricks "manual" way of doing it. Thanks a lot in advance!!

[@farhan-app]

Awesome suggestion, on the list! Thanks for watching pal :)

[@bob-p7x6j]

Subscribed! Thanks for doing this in native bricks, I realize many use ACSS and Frames or Core Framework and some template system, but before you go down that road, it is NECESSARY to know all of this, then those frameworks make much more sense. Looking forward to more of your videos, hope you're interested in making more!

[@farhan-app]

100000% agree with you. Thank you for the support pal, means a lot!!

[@bob-p7x6j]

@@farhan-app I am new to WP and Bricks and will learn a lot from this, I see you went through your Bricks setup a bit, if and when you make a new video, I hope you will go through any WP settings your normally set up as well, and also linking the menu together and hopefully discuss when and why to use the many different templates that WP uses....At the moment I am kind of guessing as to when and why I am using an Archive Template or a Single Post Template etc. The Header and Footer are obvious, but the rest are a bit trickier to understand....Thanks again, Have a good day!

[@Farhan-l4g6o]

⁠@@bob-p7x6j Welcome to Bricks! I’ll keep that in mind for the next video thanks!!

[@0xFF-p2u]

Nice. Tips: disable the bookmarks bar in browser and windows taskbar for videos 🙌🙌

[@farhan-app]

I'm a creature of habit aha... but thanks! 😅

[@mateusz-nieckarz]

This is awesome! Well done; the website turned out great! 🙌🏻🔥

[@farhan-app]

Aha thanks pal! There was a great designer ;)

[@musikundspiel1008]

Give us more videos like this

[@farhan-app]

Thanks pal! I will do my best!! 😊

[@SingaporeMathsAcademyUK]

You've got a good style of delivering this video, keep making more and I think you will do well. Thanks for the video.

[@farhan-app]

@@SingaporeMathsAcademyUK Thanks pal, appreciate it!!

[@tobisalami]

I've always been a fan! Excellent!

[@farhan-app]

You are too kind! Likewise!

[@tobisalami]

@@farhan-app thanks! Good use of the :has selector! Love it the trick there!

[@tobisalami]

What video editing software do you use and how do you screen record along with your mobile camera, please? ​@@farhan-app I could use some tips from you. I find it hard to believe that this is a first, Here's a tip from me though: Don't get too involved with the video stats. It'll handle itself.

[@sorinciprian7579]

Thank you so much! Keep doing these kind of tuts.

[@farhan-app]

@@sorinciprian7579 Thank you for watching pal!!

[@mugpielhoki]

New subscriber here 🙌. Looking forward to more videos like this. 🔥

[@farhan-app]

Thank you for the support pal! 🙏

[@nmg2023nmg]

Really really nice. Keep em comming!

[@farhan-app]

Thanks pal! 👊

[@notagilbert]

Absolute Legend!

[@farhan-app]

@@notagilbert Aha thanks pal! 😅

[@felixrivera2691]

Great tutorial!

[@farhan-app]

Thanks pal! Appreciate it :)

[@ocratest]

Brilliant - subscribed! Keep up the Vanilla approach where possible. Looking forward to page transitions & animations (comments below). Animations not so tough (I like CSS or GSAP), page transitions - I haven't found a simple solution yet.

[@farhan-app]

Thank you for the support! I agree, I prefer the vanilla approach also :)

[@developermonir]

Keep it up

[@farhan-app]

Thanks pal, appreciate it!

[@Hmdbln]

Thanks for the video! I'm just wondering how you managed to prevent the Gutenberg opening automatically on clicking New Project and instead having the classic editor, are you using any plugin for that? I like how all these custome fields are shown directly on the editor instead of having to open the Page / Project created

[@farhan-app]

Hey! When I created the custom post type using ACF, I unchecked the editor option which disables gutenberg for that post type (see 00:05:20) - most custom post type plugins allow you to do this :)

[@Hmdbln]

@@farhan-app oh nice! Thanks allot dear

[@zuber7358]

Great content for the first video, looking forward to more! Would love to see your approach to Woo sites with Bricks. Curious to learn your reason of not using a ready made CSS Framework like Core Framework or even your own as a base? Also, you forgot to do the animations and page transitions from the Framer template :p

[@farhan-app]

Thank you! Woo is on my list :) I usually have my own mini CSS framework that I use but I try to keep the videos as vanilla as I can for users that don’t have either 😊 Also animations - didn’t forget! I’m going to tackle that with the theme toggle version of the site 😅

[@zuber7358]

​@@farhan-app vanilla Bricks tuts would certainly be a breath of fresh air in this community. Good thinking there!

[@iamanty]

Great video! Why do you use the child theme stylesheet to manage media queries and not the builder?

[@farhan-app]

Great question! Here’s a few reasons: 1) I normally have all custom code in a child theme. For this video, for ease, I had custom CSS scoped locally but for a full production site I would’ve put it in a child theme. 2) If all of my custom code are in 1 place, it makes it easier to manage, review, and update. You could make the argument that I can do this in the Bricks code section, but the input area is very small and you have to constantly regenerate code signing. 3) Having a child theme means if anything breaks my site and I cannot log into Wordpress. I can FTP into my site and simply error-out my child theme, thus automatically uninstalling it - so it’s a great fallback. If something breaks from the Bricks code editor, it’s not easy using this trick without essentially breaking the whole site. 4) Lastly, for production sites, I have a custom child theme for branding. I recommend devs do the same! Hopefully that helps!

[@efinitmedia]

This is great! Learned a lot. I’m just getting into fluid typography, and have a question regarding your typography and clamp setup. I noticed you were calculating px to rem using multiples of 10, however, wouldn’t the default Bricks typography setting need to be at 100% vs. the default 62.5% for those values to check out or am I confused?

[@farhan-app]

@@efinitmedia My set up is the default 62.5% which means the most browsers will register the default root font size of 16px as 10px… just makes the math easier 😅

[@efinitmedia]

@@farhan-app my bad. I thought the multiple of 10 conversion required the 100%. So in your case 1.6rem = 16px. My math was off. 🤣

[@farhan-app]

@@efinitmedia Aha all good - yup that's correct! 😃

[@ZeroPersonal]

nice! can i replace ACF with jetengine?

[@KaifShaikhTaufiq]

Definitely

[@farhan-app]

@@ZeroPersonal yes you can!

[@0xFF-p2u]

Put a little post-processing work on audio with the s-sounds

[@farhan-app]

Oh I've tried... a lot! 🥲But will play around more - thank you for the feedback! 😄