How to Setup Automatic.css With Bricks Builder
HTML-код
- Опубликовано: 29 ноя 2024
- In this video we're going to walk through the very minimal setup process that's required to get Bricks and ACSS working seamlessly together.
All-in-all, the setup process takes less than 2 minutes. It's very fast and simple, but I wanted to provide as much context and direction as possible.
Make sure you check the complete documentation inside the ACSS community as things may change over time.
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel @Digital Ambition .
I meant to show you how the Bricks color palettes are all configured by default, but I forgot. Go check it out in Bricks --- it's super handy! It's basically what Oxygen users begged for months and months for, but wasn't possible in Oxygen.
I think you showed it in one of your previous videos showing ACSS 2.0....that is so super handy!
I was just going to remind you of that 😀
I've never used ACSS or bricks, but watching these tutorials make me want to use it for my next project. Thanks for making this look so easy!
Thanks to Kevin, I've mastered the art of web design! His course is not only comprehensive but also enjoyable. The real-world examples helped me apply concepts seamlessly.
your stuff is better than cinema
Sweet, This helped me so very much. As a new person or amateur I needed this. I need not to kump but fo in the order
Thank you. Time to learn Bricks builder.
ACSS + Bricks seems an awesome combo! I love the automatic skiplink setup!! 🤩
Would really really love to see a full video on the Digital Ambition channel dedicated to Accessibility best practices for developers. You seem to know a lot about the topic.
There's really no way to create a full video on accessibility. It would have to be a full course of videos. I teach accessibility here and there in my Digital Ambition trainings and Inner Circle.
Kevin - Any reason for the decision to use block as the starting point for your header instead of Section with the default single container? Thanks
Because semantically the header shouldn’t have a in it. Also, pad-header classes don’t work on sections.
Hey @Kevin, is this still current with 3.0+ or do you have an upcoming video with an updated workflow?
The docs on the site are up to date.
Hi Kevin, I recently got the Automatic.css plugin, and I noticed the interface has changed a lot with new features added. I'm finding it a bit challenging to navigate. Do you have any updated tutorials or videos on the latest interface and features? Thanks for all the amazing content!
ACSS 101 right here on the channel
GOLDDDD thank you!
Thanks for this very usefull video! Is there a way to quickly reset all ACSS settings to default instead of going to each settings one by one? Especially with all the new options added since the video was recorded.
Yes, under options you can put "yes" to delete settings on deactivation. Then deactivate the plugin and reactivate it and you'll have a fresh start.
Need this Video in newly Version
Great vid. Only thing I would add is to set the font for Body and All Headings under Typography in the Theme Style.
Yes, that’s unrelated to ACSS though. That’s just general Bricks setup.
@@AutomaticCSS Agreed. Once you set the fonts you can start building your site using Bricks and ACSS without touching anything else straight away. The fonts will also affect the look of the ACSS Style Guide once it's working in Bricks, so they are very relevant to the ACSS initial set-up.
@kevin why on the new ACSS website as of today does it suggest that users change the breakpoints in Bricks to Match ACSS? You don't mention this here. Is this a new feature, or am I missing something?
Breakpoints have always needed to match.
great but one question, im using a primary bricks button in header but the primary button styles from ACSS are not applied to it. any idea why?
Did you put a btn class on it?
Hi Kevin, ACCS right now has some different viewport options compared to the video. It caused a little confusion for me how to set up the viewports in ACSS and the bricks theme.
Also the breakpoints visible at the top of the Bricks builder are not the same compared to the ACSS breakpoints I've set. I did not touch the Bricks breakpoints like you said. I don't know if this is normal, but it is a confusing.
We'll be doing an updated video after 3.0 comes out. But for now the actual setup documentation on the website is accurate.
What multilingual plugin works best with Bricks + ACSS + Frames?
Not sure :/
Where do you set the typography font family/styling if not in Theme Styles?
In the builder
Just jump ship. 4 questions:
I just started with the bricks video. They didn't mention the child theme. I'm following you now so in doing so:
1. Will I need to copy and paste some stuff over to the child theme? I guess not since I just swapped it to child and my theme style was still there. Still not sure why this would be needed besides that bricks doesn't edit anything under the child theme where it does update stuff under the normal one?
2. When I did install bricks AFTER automatic CSS, should I remove acss and then just reinstall automatic css to get it to work?
3. Regarding the custom breakpoint within Bricks, can I still use that ? (I mean, as an extra breakpoint preferably.) or do you recommend specifically to not use a higher resolution like 1628px as ultra-wide and it is the default breakpoint where 1280 is the second one below that since ACSS doesnt have the extra option field to add it.
4. Adding SVG logo. I'm used to add the codeblock and use fill="var(--primary)". Still recommended or use an svg element? Probably doesn't matter right? I use codeblock because of the way illustrator saves it which seems bloated. Seems the logo element is handy to use too and use the svg there.
1. Nope
2. Just deactivate ACSS and reactivate.
3. I leave the defaults. We'll have support for more breakpoints soon in ACSS.
4. Depends on the colors of the logo. I just upload the SVG as an image.
Can I use the bricks colour palette still for some elements of should I better use only the acss classes?
Still at the beginning to learn btw.
The Bricks color palettes are all configured for you automatically so all your ACSS colors are available there.
@@AutomaticCSS Thanks alot!
Im new to Bricks, ACSS and now Frames which i am looking forward to be released :)
While i have you here: Is there a way to start with all this? I know, i can write in the inner circle and ask for every topic, but being kinda new to everything, wanting to learn best practices and a good style and dont fall for something that will be a bad practice... is there like a recommendation what do learn first, then second this group of topics etc? Its quite overwhelming.
Can you now export/import css classes in Bricks properly? Once it was not possible, you could either not export the classes or you could export but later not import the classes. Not sure if they added this feature now in their actual version.
Yes.
Just in time ^__^
Hi I have installed Wordpress and want to find the Bricks Child and Bricks Theme. But when i go to Appearance, Themes and search for Bricks i dont get Bricks or the child. What am I doing wrong? Please help
Dave
You have to buy it
How do get the Automatic.css plugin as i go to plugins and search Automatic.css but doesn't find it? Is this free and is Bricks free as well?
Dave
No it’s a paid plugin only
Sorry, I am new to acss. So in acss, we use a lot of classes built by acss instead of using the Bricks element settings?
Yes, or variables. I have a beginner video coming out soon!
@@AutomaticCSS oh can't wait!
18:25 Since the container is not centered, does that mean we have to add this class "center-self" to every single container we introduce into a section so the content aligns?
No containers are centered by default in sections. There’s actually an easier way to do headers than this now - things have changed a little since this video was recorded.
i noticed that as well@@AutomaticCSS, that things have changed
So if i use ACSS with Bricks, instead of styling every element with bricks, color font sizes alignment etc, the best practice is to use acss classes on elements to style them? Did i get this right?
Not necessarily. You should use ACSS utility classes for one-off elements that you aren't going to use over and over again across the site. If it's an element you use over and over again, you should create a custom class for it and style it with Bricks. However, you should use ACSS variables when you do this to keep everything consistent.
For a page width header... any reason why you could not just insert a "section"... which then gives you a center aligned "container" inside automatically? Feels like its a quicker solution... Just wondering why you used "block" element vs "section" element for the header?
Because semantically it’s not a section and shouldn’t have a section tag. And pad-header classes don’t work on sections.
@@AutomaticCSS Oh, good the know! **Quietly Goes back and changes all current sites header templates to block** ;)
Always appreciate the value you offer and willingness to teach others!
I am rebuilding a client site that has been on Oxygen for years, using ACSS. It has a load of single-license plugins on it, meaning I cannot rebuild it from a fresh install. I am converting it to Bricks, but ACSS is already installed, meaning Bricks isn’t finding the Theme Settings stuff. In the video you say you need to install Bricks before ACSS to get it to work… but that was a year ago, is there a workaround to this yet?!
Shouldn't be an issue. Just deactivate ACSS and then reactivate it.
Does import export works between bricks and oxygen ?
Are you referring to ACSS import/export? Yes. It's unrelated to the builder.
When following the header portion of this tutorial, when I add a container to the initial block, the container is full width, not constrained to page width. I have set the page width to 1366 in ACSS and the Bricks theme style. What am I doing wrong?
I’d have to see a link
Just got ACSS to start learning as a noob...." I meant to show you how the Bricks color palettes are all configured by default, but I forgot. Go check it out in Bricks" sorry for the noob qustios but were in brinks would I see this?
Edit any element and go to a color area like background or typography and click a swatch.
Where can we modify the "Skip to main content" text (for other languages)? Is it within Bricks or ACSS?
That’s a bricks feature. We only handle the styling.
@@AutomaticCSS Thanks
New bricks user here, I might be missing something. If Bricks already has global theme styles built in and you can set them up from the dashboard. Why is it quicker to use ACSS?
Global theme styles are different from how classes work. And there are many limitations to the global theme style options in Bricks.
Bricks' official documentation says containers are centered by default. Why was it not, in your explanation?
They’re only centered by default in sections.
How do you link the skip link to the mian id?
You don’t have to, it’s already done for you.
I love acss but why do you use classes for everything( background color) doesmt this make it hard to replicate similar elements and go against bem?
Can you be more specific?
@@AutomaticCSS If you use a class for background and a class for padding rather than variables in the settings. And then you want to create cards or something that's replicated then you have to add those classes to each card rather than using 1 class for the card elements and styling with variable... I am just wondering why you tend to use classes over the settings I guess. Is it strictly because it is faster for non repeated elements?
@@AutomaticCSS Nevermind. I watched the official intro video and you explained exactly what I was talking about.
Do you use oxygen or bricks in website development?
Both, but migrating to Bricks.
I don't know how to put this lightly any other way, but after finding this video and then made the purchase.
I have NO IDEA where the "new" dashboard or this supposed settings area of version 3.0 supposed to be.
Yes, I've read the "documentations". Followed the instructions to set it up for Bricks with the json uploads...but then NO WHERE ELSE in the document does it tells me how to pull the new dashboard up.
I apologize if I sound frustrated but seriously after coming back to trying to build a website with WordPress it has been a hair pulling experience. When I found Bricks I was slightly relieved, and then I went through the 101 videos and thought 'hey you got to pay to win to get WP some what user friendly like Wix'. So then I went a head with ACSS and Frames. And then OMG, 3.0 you guys yank that dashboard somewhere I have no clue where to find. Please please, do not go the route of making it non-intuitive to find settings where settings need to be.
I use Windows, I don't use a Mac, I can't Shift + CMD + O to pull it up and last time I check majority of people still use Windows so if you guys are thinking about "innovating". Make sure it is newbie friendly, and friendly to everybody. I can't stress this enough, I'm terrified of how Gluttenberg do things, and the nonsensical way of hiding settings. I am this close to abandoning everything and just use WiX and SquareSpace, the amount of money I've spent is about the equal amount it is to sign up with Wix.
I can read the document, but the documents need to have a section with steps by steps, baby steps, hand holding...I don't care if pro-devs, or long time users think otherwise. I'm coming from a programming background myself so I'm not a boomer that doesn't know how to use a computer. But I simply cannot understand why software makers have to constantly come up with ways to HIDE THE SETTINGS. I swear I much preferred everything to be with in sights and reachable with commonsense. Not some hidden commands, keystrokes.
Update: found it now...thanks for the 1 sentence clue drop in the main WP plugin setting "You can open the dashboard by clicking...the floating icon indicator bottom right". Again, no where in the FULL DOCUMENTATION page on your site is this mentioned anywhere. It is a itty bitty circle with a 2 {} brackets on it. It doesn't even say ACSS. This is also my first time using Bricks so there was no way for me to even notice if that has always been there or did it just appeared on my Builder. And did it ever occurred to your design team that if someone who is not a full time dev is going to know what those 2 brackets mean?
I thought the whole mission was to make it web developing easier...then why would you make the UX so unfriendly to beginners?
Everything you hated about GluttenBerg you're going the same exact route here.
I don't understand how companies nowadays would have a "UX designer" as a core function of software development, and then everything in the modern day software experience is reduced to symbolism and icons and settings that is hidden behind layers after layers after layers.
I want to hammer this point home, because I want someone to try and reason this with me. Imagine every software tools is like a "car mechanic workshop". Where do you find tools at a workshop? In the cabinet right? Metal, wood cabinets, doesn't matter right? All in one location, or designated area correct?
Now imagine if you apply the modern day UX design to that workshop. All the shelves in that cabinet is now taped up everywhere on every corners on every wall...in a different room...in shelves within a shelves. Tell me if that is not the case, every damn software tools nowadays, the settings are all over the screen. Top right, Bottom right, Top Left, Middle....why? And the reduction of descriptive word to describe a setting function into icons and symbols....why? When I'm working on something, I'm already dealing with symbols and icons on my page or my designs or my projects....why do my tools have to compete in that space and turns it self into symbols??? Can someone explain to me what is the rational behind this other than 'monkey see Microsoft and Apple and monkey do' ?
We are in the middle of transitioning to a brand new version. This brand new version is light years better than the old version, but it definitely requires updating all documentation and videos, which we are currently doing as fast as possible. Thanks for your patience.
@@AutomaticCSS yeah sorry, I had a frustrating day. The business launch deadline is coming up and I kept on hitting road blocks after road blocks so I went off the rail.
Joining the circle definitely help as there are some baseline posts that helped me along the way.
I really do think you guys have a good product...but man lol everything with WordPress is just so steep for people like me coming from Wix. If you guys can caters more walkthrough for the E-Commerce side of building the site then it would be really helpful for us down the line.
Can you set a site width maximum with ACSS so those site wide sections with images do not get to out of wack if the viewport is very wide?
I usually add something like this to my websites to control things:
/* Site Wrapper to set overall site max width */
body, #wpadminbar {
max-width: 2560px; /* 2560px = QHD or 1920px = HD */
margin-left: auto;
margin-right: auto;
left: auto; /* needed for wpadminbar */
box-shadow: 0px 0px 5.5px -37px rgb(0 0 0 / 14%), 0px 0px 13.1px -37px rgb(0 0 0 / 20%), 0px 0px 24.7px -37px rgb(0 0 0 / 25%), 0px 0px 44px -37px rgb(0 0 0 / 30%), 0px 0px 82.3px -37px rgb(0 0 0 / 36%), 0px 0px 197px -37px rgb(0 0 0 / 50%);
}
Not sure what you’re referring to?
@@AutomaticCSS Just a site wrapper to control the max site width of the websites so on larger screens like 4k or ultra wide, the website sections only expand so far
The variety of elements (sections, containers, blocks, divs) of Bricks is already unintuitive. I have the feeling that with ACSS it gets even more complicated.
Watch this > ruclips.net/video/CNC6kMY6bto/видео.html
Bricks' options with sections/containers/blocks/divs is way better than Oxygen and any other builder. I'm doing a full site build in my Inner Circle with Bricks and ACSS ... it's super fast and easy.
I agree, when Bricks already have most of the settings and options then why have another plugin...
Literally, any serious developer will just create their own set of fundamental classes and even custom tag styles and over the years of religiously using it on their side projects and production code it will get better and better larger and smaller as it’s optimized and expanded to perfectly fit the individuals workflow. Learning frameworks and all this unnecessary abstraction that will fall out of fashion when the next big thing comes along is just a waste of time instead of putting the time into beholding your own solution that can be improved to once again suit your own exact needs and workflow
@@dabbopabblo so you mean with that, that automatic.css is quite unnecessary? I'm just about to begin with bricks and thinking about getting automatic.css and frames in the future.
Ist it best practice to keep your own, personal library of CSS styles?
I just found out, that if you define the template as single, and later you change it from single to header, it deletes everything that was there before, and restoring from revisions does nothing, once it's gone, it's gone! :(
Hmm, I haven’t seen that happen. Seems like something you should report to bricks team so they can investigate.
17:55 this is the video: ruclips.net/video/CNC6kMY6bto/видео.html, thanks Kev for this magnificent tutorials 👏👏👏
Wow what an incredible amount of unnecessary abstraction for something as simple as css, for something you get like next to no fine tuning control over in the end
You get the most fine tuning control of any framework ever created. I build $25k+ sites with it. Perhaps you can give an example of what you consider “unnecessary abstraction?”
@@AutomaticCSS literally anything done with a framework is unnecessary abstraction. For any framework you want to use you practically have to learn an entire other programming language. When in the end all they are by literal definition being library’s of.. JavaScript, is.. JavaScript. If you spend your time learning JavaScript instead of wasting it filling your mind with only knowledge of how to manipulate configs that do everything for you, and instead learn just the fundamentals of JavaScript (and any language for that matter but notoriously js) then you have actual full control over the code that’s running and how it should be structured. Like there’s no wishing you could do something some way with the framework your using, there’s just deciding to implement it that way and having the knowledge to do so
@@dabbopabblo so … you can’t give any examples? Got it.
@@AutomaticCSS You want some examples? 5:05 you talk about having to set up all these theme Color’s which is surely just an abstraction on setting some properties on the root of the page, and if it’s not anyone who calls themselves a dev should be able to setup the equivalent in less than 5 minutes without a gui config and extra styling framework 11:30 you talk about how there’s essentially primary themes and sub themes which is once again unnecessary abstraction and disallows the kind of customization where you might want to have a theme toggle on your site. 12:35 you talk about how easy it is to create problems where they didn’t previously exist, because I don’t know maybe all you did was tweak some config parameters that your guy’s code interprets to spit out fill in the blank basically sample code that’s just a fancy abstraction to simplify web development to the point every website just looks like a basic ass blog. 17:50 you detail how “containers” are just divs with special styling. I hope I don’t have to explain how that’s an unnecessary abstraction when you can just write html with a div with a class. And I’m sure I’m only scraping the surface with what I pointed out however I’m not familiar with this specifically and re-skimming through this video has given me an atrocious migraine so I’m not gonna try and dig in any deeper.
Thank you for clearly demonstrating that you have basically zero understanding of how ACSS works or why its valuable. I do appreciate the comment thread, though, as it helps the engagement algorithm. Anyone who wants to help gives ACSS more exposure gets a thumbs up from me :)