How to Setup Automatic.css With Bricks Builder
HTML-код
- Опубликовано: 2 авг 2022
- 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 .
![PIECE BY PIECE - Official Trailer [HD] - Only In Theaters October 11](http://i.ytimg.com/vi/7Bc6trBc1kc/mqdefault.jpg)
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 😀
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.
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!
ACSS + Bricks seems an awesome combo! I love the automatic skiplink setup!! 🤩
your stuff is better than cinema
Thank you. Time to learn Bricks builder.
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
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.
GOLDDDD thank you!
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.
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.
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.
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.
@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.
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 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.
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.
Where do you set the typography font family/styling if not in Theme Styles?
In the builder
What multilingual plugin works best with Bricks + ACSS + Frames?
Not sure :/
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?
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.
Just in time ^__^
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.
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
Do you use oxygen or bricks in website development?
Both, but migrating to Bricks.
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!
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!
Does import export works between bricks and oxygen ?
Are you referring to ACSS import/export? Yes. It's unrelated to the builder.
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.
How do you link the skip link to the mian id?
You don’t have to, it’s already done for you.
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
Bricks' official documentation says containers are centered by default. Why was it not, in your explanation?
They’re only centered by default in sections.
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
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.
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
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.
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.
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.
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?
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 :)