Stop Overcomplicating CSS Frameworks - Build Your Own with Ease!
HTML-код
- Опубликовано: 8 янв 2025
- Are you looking to streamline your web design process with CSS frameworks but need help figuring out where to start? In this video, we'll walk you through 3 simple steps to create and use your own CSS framework inside Bricks Builder.
Here's what you'll learn:
1. What is a CSS Framework?
Understand the basics of CSS frameworks, how they work, and why they can save time by providing predefined styles, components, and layout options.
2. How to Create a CSS Framework in Bricks Builder:
Learn how to set up your custom framework using online tools for typography scales, spacing, and colour palettes. We'll show you how to import and organize CSS variables directly in Bricks for a clean and efficient workflow.
3. How to Use Your Framework in Designs:
See how to apply your custom variables to typography, spacing, and colours. We'll also explore integrating these variables into global classes and theme styles for consistent and scalable designs.
Tools and Resources Covered:
Fluid Type Scale Calculator: Easily generate responsive typography scales.
Spacing Generator: Create fluid spacing variables for seamless layouts.
Color Palette Generator: Build custom color schemes with ease.
Why Create Your Own Framework?
Commercial CSS frameworks can be overwhelming. By building your own, you gain complete control over naming conventions, keep things simple, and expand as you grow more confident. Plus, online tools make the process quick and hassle-free!
Additional Features:
How to organize variables into categories for better management.
How do you use variables in Bricks Builder's theme styles and global classes?
Tips for creating a scalable and fluid design system.
Links Mentioned in the Video:
Fluid Type Scale Calculator: www.fluid-type...
Spacing Generator: utopia.fyi/spa...
Color Palette Generator: colorffy.com/c...
More Bricks Tutorials: Check out this playlist for more tips and tricks: [Playlist Link]
Take your WordPress website and skills to the next level!
► The Essential Web Designer's Documents Pack
Looking to take your web design business to the next level? The Essential Web Designers Documents collection has got you covered! With handcrafted, professionally designed documents that have generated tens of thousands in revenue, you'll have everything you need to impress clients, streamline your workflow, and boost your bottom line.
► Buy the Essential Web Designer's Documents Pack Now: links.wptuts.c...
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► EXCLUSIVE WPTUTS DISCOUNTS ◄
✅ WPVivid Backup Pro: jo.my/vividpro (use WPTUTS20 for 20% off)
✅ Project Huddle: jo.my/etafyp (WPTUTS for 20% off - Exclusive)
✅ Flowmattic: jo.my/flowmattic (WPTUTS for 20% off annual plans)
✅ Clickwhale: jo.my/clickwhale (WPTUTS20 for a 20% discount on all plans)
► MY PREFERRED HOSTING PROVIDERS ◄
✅ Hostinger: jo.my/92dmbb
✅ CloudWays: jo.my/1feeng8
✅ SiteGround: jo.my/sgwptuts
► WORDPRESS VISUAL PAGE BUILDERS ◄
✅ ELEMENTOR PRO: jo.my/1s0t2s2
✅ Bricks Builder: jo.my/bricks
✅ Brizy Pro: bit.ly/2Ji97r8
✅ GenerateBlocks: jo.my/xotgcy
✅ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
✅ GeneratePress Premium: bit.ly/2Ydn1SE
✅ Blocksy: jo.my/y67ten
✅ DIVI Theme: bit.ly/2G8JMiA
✅ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
✅ InstaWP: jo.my/0jdh2j
✅ Crocoblock: jo.my/croc
✅ CSSHERO: bit.ly/2qbrRl6
► WORDPRESS PLUGINS ◄
✅ SEOPress Pro: jo.my/seopress
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
👉 Twitter: / wptutz
👉 Facebook Group: wptuts.co.uk/f...
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Day by day, you are becoming one of my routines. Because you know what exactly we need. Thank you, Paul.
A custom lightweight framework is a winner, definitely! Make it as easy or as complicated as you want. This way, there is no bloat, no more complicated things to remember. Still working on my approach of a CSS custom framework, and it will be ready very soon. 🙂
The two best framework right now in the market are actually lightweight and bloatfree . Both of them are time savers.
Nice and Neat!
I've recently been using Bricks a lot more, and I love the variables. It's cool to learn there's an actual name for what I've been doing. Makes it so much easier to learn more about it. Thank you!
I’ve been using a popular framework but lately feels like I’m becoming too dependent on its ease of use when really all I need is type scaling, spacing and color variables in a build. It’s all so much clearer now, thanks Paul!
It would be amazing If Bricks does some magic and only shows the variables list that we need.
For example when we define a color we should only see color related variables.
Loving this series, this gets me to think about exactly what I want in the framework instead of the defaults that the paid versions come with, probably use both but I least I understand it better now, the how and the why......
Hi great tutorial, can I also set this up in Generatepress and Generateblocks?
Awesome thanks, can you do a video about that with Divi?
The web version of Core Framework is enough. There you can visually create and modify the existing framework, or even start from blank.
And its free.
Yeah, the free Core Framework builder is a great option. You can easily strip out anything you don’t need and build something unique with minimal effort.
Since today I figured out that advanced themer fs up the classes completely so I had to deinstall it, your video comes at the right time!
You’re funny
Ehm, it does not fk up your classes. Maybe you are doing something wrong?
Great Video
Hello again!
I forgot to ask, but I must, since I'm in the process of establishing a framework for my company:
I'm curious as to what factors might lead someone to choose ACSS or any other premade, instead of developing their own framework.
Of course time is a huge factor, but, other than that, I don't see many more reasons to do so.
Yet, it seems that the community as a whole, specially Bricks', seem to consider it kind of necessary and recommend paying for something like ACSS.
Could you share your thoughts with me?
Thanks in advance!
How do you handle wide screen like 2560px in the font clamp calculation? Is it enough to go with max viewport width of 1366 for the clamp calculation?
Hello there, Paul!
Does Bricks offer a native solution for creating filters, in order to ditch WP Grid Builder?
@@phkoon it does have a good set of filters, but not sure it would currently be a 1:1 replacement as WPGB has a couple features not currently available in Bricks.
@@WPTuts thank you very much!
But why would Kevin Geary make a post against this on FB bcus he sells a similar product?
You’ll need to ask him. 😉
What FB group?
Kevin Geary will always promote or recommend tools that benefit him. Earlier, he promoted OxyNinja, but once he launched ACSS, he started to bash OxyNinja. I don't follow any other channel except WPTuts, as his opinions are always neutral. Thanks for being honest with your followers @WPTuts
Creating and managing your own design system independently also means being able to react to changes. There's nothing better than being able to use your design system on different platforms at any time. only dealers say otherwise.
I find it funny that people still pay just for a bunch of classes 😂😂
Paid CSS framework owners are probably sweating right now. 😅
I doubt that. This wasn’t about replacing a fully featured CSS framework like Core Framework, but a demo of how anyone could create their own simple one if they so desired.