ACSS 2.4: Two New Customizable Breakpoints (XXL and XS)
HTML-код
- Опубликовано: 13 июл 2024
- Aside from the standard breakpoints, ACSS offers two additional optional breakpoints. These breakpoints are off by default but can easily be turned on in the Viewport tab:
The XXL breakpoint is helpful if you design a site above the average width. Most websites are between 1140 and 1280px. If you design a site at 1366px, 1440px, or higher, you'll likely find value in enabling the XXL breakpoint and shifting the other breakpoint values to minimize the gap between your largest breakpoint and the next breakpoint down.
If you find too much of a gap between one breakpoint and another, activating the XS breakpoint as an additional option can help.
In this video, we'll look at how to activate the new breakpoints, set their values, and set up your page builder to match so you can have a seamless breakpoint workflow.
Official documentation: automaticcss.com/docs/viewport/
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @digitalambition
The one thing that you do exceptionally well is just deliver the goods with no fluff! No stupid attempts to be humorous, no crafty attempts to plug sponsors and no attempt to try and drag out minutes of useless video to make your videos longer.
The knowledge you drop in every video is not only valuable, and I do mean valuable enough that people actually do pay good money for this kind of insight! As a developer, I can easily tell you have spent MANY hours, months and years infront of your machine and code. I can tell you have had to split time between family time and trying to figure out "something not working" right in code / css / seo. I know this because there is no way possible you could have this much command over the aforementioned without having sacrificed ALOT of time.
Much respected Kevin!
Appreciate it! Thank you 🙏
Amazing, as always!
😮 love this
I would recommend that if you have a page setting for a project that you will want to use again, use the backup and restore options for both Bricks and ACSS rather than go though all the set up again each time :)
Very cool staff and tnx Kevin for your support, i have a question about Bricks setting template, have to be set on 1600, right?
Yes you would need to make sure your container width in Bricks is set to your new site width.
Thx Kevin.
In what cases do I need the Breakpoints (XXL and XS)? I'm still sticking with 1366.
On wider sites like 1440+
Hi Kevin, is it also compatible with Oxygen? If so, what would be the process? Thanks!! As always adding great features 🙌
Oxygen doesn’t support extra breakpoints unfortunately.
What happends if I make the changes on an already built website? will it brake it? Or I just have to do adjustments where needed?
We've tested the changes on an existing site and everything was fine.
Thanks. Why is the one pixel difference between ACSS and the bricks settings?
Because of Oxygen. We may revisit this soon.
@AutomaticCSS how about combining / making an all inclusive ACSS + Frames bundle subscription? They both already include 3 sites / 1 year.
How about combining the two for $99 / 3 sites / 1 year?
Right now to get Frames (which requires ACSS).. one has to go over there, pay for ACSS license, then come back over here and get a Frames license.. 2 different subscriptions, 2 different places?
Also.. what if one gets ACSS on a Monday.. then learns of Frames on Wed.. now the subscriptions are off-set. ACSS subscription will expire just 3 days before Frames subscription?
This is chumpy.
Give us a bundle for the two.. and another bundle with the two + Inner Circle!
Two separate products and licensing systems. EDD doesn’t offer a way to bundle them because of how EDD works. EDD is a trash can but there isn’t anything better yet.
Hi, Awesome feature. But I tried to configure I did step by step and doesn't work till I change the "element container width". That is what I should change?
Yes, you still have to make bricks container width match your website width. That’s always been the default setup instruction regardless of breakpoints.
I intend to adopt the ACSS workflow on this next project; but, to me, trying to set breakpoints in a GUI is very cumbersome and arbitrary. Each component tends to have its own breakpoints; and I, therefore, prefer to keep breakpoints in CSS. I'm definitely going to be switching on "Pro Mode" in ACSS; but for those instances where I am using utility classes (such as grid classes), I guess that would require setting breakpoints in the GUI, as you've demonstrated here? Or, for those instances where the grid breakpoints might be different depending upon context, is there an alternative variable workflow I can hook into in my CSS? I appreciate you!
Not sure exactly what you mean. Every builder has breakpoint management like this. Even if you write your own media queries, there's no real difference.
@@AutomaticCSS Thanks for the replies on all my questions! Regarding this one, I'm sure I'll figure it out. If not, I'll holla at the support group. I appreciate you!
If I in ACSS put my website width to 1366px, do I have the same in Bricks breakpoints settings aswell or 1 px lower to 1365? What should my XL breakpoint in ACSS be, also 1366 or 1365? Its now by default set to 1280. Thanks!
Match them
It's nice to know that I can, but I don't think that I will, yikes.
It’s pretty simple once youve tried it