Getting Started With AutomaticCSS (ACSS) - Official Intro
Vložit
- čas přidán 7. 06. 2024
- Are you new to ACSS? Are you a beginner when it comes to CSS utility frameworks in general?
No worries! While ACSS may feel intimidating at first, this video will help you understand the basic concepts and features and give you enough confidence to start building your first site with ACSS.
After all, building a real page or a real site with ACSS is the best way to learn. You just have to make sure you give yourself time and patience and allow yourself space to play around with different aspects of the framework.
We also have a dedicated support community and support staff waiting to jump in and help you with anything you get stuck on, so don't hesitate to reach out. We want to help you learn to build sites according to best practices while leveraging the best CSS framework available!
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
0:00 Intro
01:20 Utility Classes
13:53 Variables
21:27 Utility Class vs Variables
27:20 Granularity & Zero Limitations
37:40 Typography
48:13 Spacing
57:36 Color Management
01:01:10 Buttons & Links
01:06:55 Form Styling
01:09:12 Fix Paragraph & Heading Spacing
01:11:04 Accessibility Features
01:14:45 Wrap-Up
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel @Gearyco
A goldmine of a video. Simply awesome!.
Great job, outstanding job, great advice, BIG help!
We absolutely need these videos. It's very important to understand the principles and to get the value behind this framework! Thank you!
I am new ACSS and this is helpful, thank you.
Excellent video. I’ve been using ACSS B
for a while now. The best advice is to jump in and start getting familiar with the way it works. As Kevin said, you only use about 20% of the classes but it’s good be familiar with what is available as it really makes building scalable, maintainable sites really enjoyable .
Great video, as always 🔥
Must watch both for beginners and for those who already started using ACSS to clarify things in one go 🔝
this was joy to watch! i wish other plugins do this!
Phew. Thanks, Kevin and the team at ACSS. A long and tiring journey through numerous website builders that never quite made sense. AutomaticCSS has my utmost respect. A builder that finally makes sense!!!!
Thanks for this! 🎉
Great getting started video on Acss.
Coming from dirty old Elementor thinking to Bricks and ACSS, this is going to change my life. Great introduction of functionality. Right jumping into the other tutorials to get more familiar with nomenclature a terms at all. Thanks for the fantastic videos. Really animated by your positivity. Cheers from Brazil.
Great to hear!
The most incredible tool to develop scalable websites when you are willing to understand how CSS classes can be a timesaver and add flexibility to your builds.
I just got Bricks followed by ACSS and Frames and I needed this overview to help me understand what it's capable of doing for my builds. Awesome video and I am going to build a nice brochure site to get used to everything!
💪🏻💪🏻💪🏻
The great thing about ACSS is that you can start using it slowly. One of my favorite things is the color shades and automatic responsive text. It makes web design so much easier, scalable.
Kudos to Kevin! His website design course is a goldmine of knowledge. I now confidently create responsive layouts, thanks to his detailed lessons and practical tips!
Which course? Is the zendesk series?
@@replymediaPage Building 101.
Started using ACSS and Frames on a new project and it's really great! Can't imagine building a site without it in future 👍
I'm planning on converting a previous site I built to ACSS 😬
Would it be possible to do a short video on your recommended approach/best practices when integrating ACSS (and possibly Frames) to an already existing project?
I’ve never personally done it. I suppose just go element by element and convert only what’s really needed at first.
Thanks for a great product, Kevin! Now when I've started using ACSS classes, I'd like to delete all my old styles. Is there an easy way to accomplish this? :)
This is just insane, I will never use something different anymore
Thank you, it was so good and helpful.
Is it possible to make a tutorial about images! Its bden always hard to keep the best aspect of the image in different devices and how to config it in bricks
Brilliant! don't like writing vanilla CSS after using Tailwind, this looks like another game changer gem… superb work!
Thank you 🙏
I was just thinking this reminds me of Tailwinds (which I've been using HEAVILY for the last 2 years now). I don't want to write any classes if possible - been there, done that for 15 years. I was hoping to find a simple way to use Tailwinds with WP, but this may work.
I'm thrilled to share my experience with Automatic CSS, Frames, and Frame For Figma. These invaluable tools have not only enhanced my web design projects but also rewarded me with newfound time and income potential.
When I first ventured into web design, inspired by Kevin's tutorials, I had the belief that "I can tackle this myself." While I did gain valuable knowledge, it came at the cost of consuming a significant amount of my time. However, the introduction of Automatic CSS, Frames, and Frame For Figma has been a transformative experience. These tools have considerably slashed the hours I used to dedicate to design tasks. This newfound efficiency not only enables me to channel more energy into my primary passion, videography, but also opens doors to additional income opportunities. These tools have indeed been a game-changer, making my creative journey more efficient and financially rewarding.
Moreover, using Automatic CSS has had a remarkable effect on my mindset. It has turned my initial fear of web design into a genuine sense of excitement. This newfound confidence and efficiency make pursuing my creative passions an even more fulfilling and enjoyable journey.
Love this!
you convinced me to use Acss I think that by mastering it enough we save time and that in the end we deliver better quality work. I just bought it this week-end, need to practice now.
Welcome aboard!
Update on this?
@@SuperIce6374I haven't really used it to be honest....
@@adamu6941 Thanks for the followup!
Thanks for all your amazing videos. I have a... rather question: how did you design the numbering in every section with the greek background?
Pseudo elements.
Thank you for the video. It's a great product. Can I ask a question? Is there a way to add negative margin? I don't find any utility classes to add negative margin.
Yes, you can multiple any ACSS variable by -1 in a calc() to make it negative.
@automaticCSS there is one major issue with this video.. it should be pinned / featured to the top of your videos list!
As a developer I am familiar with much of what you covered here. BUT, for those that are learning, THIS is pure gold! Not just for the power of AutomaticCSS, but the knowledge you dropped (I dont even think you are aware) in this video that has nothing to do with ACSS, is MAJOR!
I watched numerous videos of yours here BEFORE seeing this particular one.. BUT, a new leaner should see this one first before any other because it then makes the other much more understandable. Just my thoughts.
As a developer I normaly npm a package for something "similar" to this, but bem is not included and obviously it's only usable in vs code.. but I'd much rather have this CSS control right in WP.
Provided this plays well with Bricksforge, AutomaticCSS is going into every project going forward.
Thanks! We do have it pinned inside the community and documentation so they see it there.
ACSS seems promising. I also see a lot of comments about how they love ACSS. I'm trying to understand how it would fit in a day to day workflow for building a website and how much time it would really save. I haven't see any video that shows ACSS in action. Kevin, it would be very helpful if you could make a video that shows the process of building a simple brochure website using ACSS and Bricks/Oxygen. Maybe you can take any existing simple website and build something like that from scratch using these tools.
I use it in all my tutorials on my digital ambition channel and in my inner circle. I can do an updated landing page tutorial soon though.
@@AutomaticCSS oh ok. Thanks Kevin. I will check out that channel. I was thinking of a 3-4 page brochure website tutorial. I think the power of ACSS can be seen through how the inner page development can be significantly sped up with consistency across the site (at least that's what I understand as a benefit). Appreciate your response and willingness. Thanks.
Hey!
Great video. I learned a lot.
I have a couple of questions:
1. The form styles are available for all form plugins? I'm asking because in general I use Gravity forms and sometimes I have to use Formidable Forms. Will both be styled with ACSS?
2. I already have a few sites using Bricks without ACSS. I would like to start using it on those sites. Could you describe the steps I must follow to make it possible?
Thanks for your support!
Right now it’s Bricks native form and WSForm. Next is Fluent.
The process for an existing site depends on how far along you are with each site. Ask the support group for help and post some links.
@@AutomaticCSS Yes fluent forms, second best forms plugin!
This vid is amazing! I'm still a little confused about adding custom classes and then using var settings in the Primary and Advanced tabs, versus using a standard ACSS class for elements; and when to combine with custom classes for elements. I'm just thinking of your vid on how to use var to prevent having to "recreate the element wheel" every time.
You'll get the hang of it in no time!
@@AutomaticCSS 😁😃😃🙂
very nice indeed great primer! on the use of colors i am now using Oxygen is there anyway to have these colors available to me under global colors like you can in Bricks? I would find that very useful... thanks
Unfortunately not. Oxygen's color management leaves a LOT to be desired.
Hey I finished up the content in PB 101 and I'm now moving over to learn about ACSS (as I bought it recently and haven't really dug in yet) and I'm a bit confused by the organization of the videos on this channel/not really sure exactly where to start as the Official Intro (this video) is the last in the playlist? I'm sure by the time you see this comment I'll have figured things out but just wanted to raise a little flag for you.
Yes, this getting started video is the one you should start with.
5:51 trying to understand this. If I remember correctly I think you’ve mentioned that when creating a class for an element we want to keep all the design and styling under this specific class, but as I can see you are adding many different classes (to create the different breakpoints).. is this fine or do I miss something here? 😅
*** sorry I now see what you said about variables 💪🏽💪🏽
Depends on what you’re trying to do. Post in the group and we can help you.
For form styling, if we are not using Bricks form or WS form, can we still use ACSS? For example, Fluentforms.
You can still use it, but you won’t be able to use the ACSS dashboard to style the forms.
Is it possible to get a copy of the page you use to give this tutorial? I think it would really help me as a reminder of the different sections you cover.
I don't have it anymore.
just bought it whooohooo. Does a section ( with no class on it) have a default padding in bricks? is there a way to turn that of or is that something that comes from ACSS? i am new to Bricks and ACSS.
It’s from ACSS and it’s desirable. You don’t want to have to add a class to every section or make a padding decision on every section. It uses your default base section spacing value and it’s automatically responsive. You can adjust it via the dashboard.
@@AutomaticCSS cool! That is really nice to have!
How do you get the left side gutter for the sections? The green side bar.
Pseudo elements
Does acss only works with bricks or with other page builders also?
Oxygen, bricks, cwicly, generatepress, generate blocks, Gutenberg.
I don't know if it's normal but in various browsers grid-- utility classes not autorefreshing in builder. To be more specific: I assign a grid--3, grid--l-2 and grid--m-1 class to a container. When I remove grid--l-2, L breakpoint grid shows still as a two column grid. If a refresh the whole page it renders properly. What can I do in that situation? It's rather annoying...
Sounds like caching.
Do we have this demo-page installed when we buy ACSS or is this just for this video?
I'm just loading in various Frames from the Frames library.
Variables remind me of SCSS, does ACSS is using SCSS? How does it compile?
Variables in SCSS are very different from variables in CSS. These are pure CSS variables (called "custom properties" in CSS). But yes, ACSS is built with SCSS. Every time you save a setting in the dashboard the stylesheet is recompiled.
sfs acss all of in one
Hi there, when will the cheat sheet be working? the google sheet is very hard to understand
When it’s ready. Can’t put a time on it.
Anything else mentioned in the video still not working after 10 months? (I know it's a bit of a sarcasm, but I am interested in buying and have concerns) . Great work btw! Aren't you afraid that all of your work will be included in bricks finally one day ? Because I did notice some of functionalities from bricks forge were included in BricksBuilder like php query. @@AutomaticCSS
Does it make sense to use ACSS with GenerateBlocks (+GeneratePress), I do not use any Pagebuilder? thanks
Not yet. It’s not fully compatible and generate lacks support for variables.
@@AutomaticCSS thanks for taking your time
I'm probably being daft but what is the advantage compared to just making your own classes and css? Faster because stuff is predefined?
There is a lot more going on than that.
@@AutomaticCSS Yeah I think I just need to absorb this some more to wrap my brain around it. I just come from the end of writing my own classes and CSS for WP.
Does the styling of forms override other form builders like Gravity, Fluent, Contact Form 7, etc?
Styling forms is hard, like you said, but part of that is because of all the defaults with high level specificity. It's really annoying trying to override those defaults.
Yes for the supported forms. Currently just bricks and WSForm. Fluent is next.
Why add blocks in container instead of div?
Because I want them to be flex items by default. Either will work, but using a div requires the extra step of setting it to display flex.
We need single website licenses
ACSS must has auto sugestion if your writing variables in Brics. It simply MUST HAVE function, no one will remember all variables and no one wants to write them manually all the time. 😉
Most people have the variables memorized because there aren’t really that many. We are working on auto suggest and some other features though.
Here is the link to the tutorial with clickable parents (its a oxygen video, not bricks based unfortunately)
czcams.com/video/CdvvThcfVN0/video.html
@Gearyco: please put it in shownotes
There’s a bricks one too
@@AutomaticCSS
Can you please put the link to the "bricks one"?
your answer opens only a new loop…
Link to the video would be perfect to close the loop and get the video
@@AutomaticCSS
and where to find?
putting a link might be perfect, just claiming does not help anyone… 🤷♂️
⚠NOOB ALERT!! ⚠
"pad--I" does nothing for the padding in the card, in my freshly purchased and installed ACSS.
DISREGARD! FYI: "Pro Mode" 🎉😊 It's a thing!