- Видео 73
- Просмотров 354 962
AutomaticCSS & Frames
США
Добавлен 5 апр 2022
Automatic.css (ACSS) is an intelligent and forward-thinking CSS utility framework. It features a seamless integration between utility classes and custom properties (CSS Variables) with advanced features like responsive typography and spacing, scale-based typography, and more.
Automatic.css was initially developed for Oxygen websites on the Wordpress platform but is being adapted to work in other Wordpress page builders such as Bricks, Zion, and more. We're also adapting the framework to work with Woocommerce, Gutenberg, and even non-Wordpress websites.
Frames is a real time wireframing tool, design-ready development system, and accessible component library that empowers you to build beautiful custom websites in half the time with zero limits on your creativity. It's seamlessly integrated with ACSS, built with BEM class organization, fully HTML5 compliant, and accessible.
Automatic.css was initially developed for Oxygen websites on the Wordpress platform but is being adapted to work in other Wordpress page builders such as Bricks, Zion, and more. We're also adapting the framework to work with Woocommerce, Gutenberg, and even non-Wordpress websites.
Frames is a real time wireframing tool, design-ready development system, and accessible component library that empowers you to build beautiful custom websites in half the time with zero limits on your creativity. It's seamlessly integrated with ACSS, built with BEM class organization, fully HTML5 compliant, and accessible.
ACSS 101.19: Global Border System
Borders in web design are elements of design that tend to be consistent throughout an entire website. For this reason, ACSS features a global border system to establish:
- Global Border Radius
- Global Border Width
- Global Border Style
- Global Border Color (Light Version)
- Global Border Color (Dark Version)
- Global Default Border Styling
This video demonstrates how to setup and use this system, along with utilities for creating a concentric radius wherever its needed.
Full docs: automaticcss.com/docs/global-border-system/
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 ...
- Global Border Radius
- Global Border Width
- Global Border Style
- Global Border Color (Light Version)
- Global Border Color (Dark Version)
- Global Default Border Styling
This video demonstrates how to setup and use this system, along with utilities for creating a concentric radius wherever its needed.
Full docs: automaticcss.com/docs/global-border-system/
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 ...
Просмотров: 1 146
Видео
Important Message: ACSS Licensing/Pricing Plans Are Changing!
Просмотров 3,9 тыс.День назад
We have a very important message regarding ACSS licenses and pricing plans that we hope you'll be excited about. IMPORTANT NOTE: If you're an existing ACSS customer, you'll see this change reflected in your account at some point in January. There are some technical hurdles we have to get through to make this happen. For new customers it's effective immediately. Interested in using Automatic.css...
ACSS 101.18 - Columns & Masonry Layouts
Просмотров 2,1 тыс.Месяц назад
Columns and Masonry layouts can't really get any easier than with ACSS' utility classes and recipes. This quick tutorial will show you how to get the most out of these utilities. Docs: automaticcss.com/docs/css-columns/ automaticcss.com/docs/masonry-layouts/ automaticcss.com/docs/column-recipes/ Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy ...
ACSS 101.17 - Advanced Content Grid
Просмотров 2,7 тыс.2 месяца назад
This is a follow up to Lesson 16, demonstrating nested content grids and the use of content grids in dynamic situations like blog post templates where the layout can be controlled using utility classes from the block editor. 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 Fram...
Textures & Overlays (Experimental): Demo & Walkthrough
Просмотров 2,7 тыс.2 месяца назад
ACSS 3.1.2 introduces a brand new, very powerful feature called Textures & Overlays. This feature allows you to define custom texture styles that can be used as backgrounds or overlays (or both) to bring more life and layering to your web designs. In this video, Kevin will demo the new feature and walk you through what each setting does so you can start to experiment with Textures & Overlays yo...
ACSS 101.16 - Content Grid (Basics)
Просмотров 3,5 тыс.3 месяца назад
This video covers the basics of ACSS' content grid feature. Please make sure you read the official content grid documentation for additional details: automaticcss.com/docs/content-grid/ 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 priv...
ACSS 101:15 - Variable Grid Layouts
Просмотров 2,5 тыс.5 месяцев назад
Variable Grids are automatically responsive grids that auto-fill themselves with elements based on the minimum allowed width of items. Learn more about variable grids: automaticcss.com/docs/variable-grid/ 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...
ACSS 101:14: Auto Grid Layouts
Просмотров 4 тыс.5 месяцев назад
Auto Grid allows users to create automatically responsive grid, control the aggressiveness of the stacking behavior, and even determine when grids stack down to a specific pixel value. In this video you'll learn how Auto Grids work, pros and cons, and common issues to look out for. Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get...
ACSS 101.13: Traditional Grid Layouts
Просмотров 4,7 тыс.5 месяцев назад
Learn more about CSS Grid: ruclips.net/video/uZBUdMBCaDQ/видео.htmlsi=laHo_rL6ibtKD-tB Learn about Flexbox: ruclips.net/video/k46Cft746IM/видео.htmlsi=ivk_4EVbm9pBF9Qs 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...
ACSS 101.12: The Official ACSS Workflow (BEM + AUTOBEM)
Просмотров 6 тыс.6 месяцев назад
There are essentially three workflows that people use with page builders: 1. ID Styling (01:00) 2. Utility-First (11:28) 3. Custom Classes (Official Approach - 19:27) This video will show you the pros and cons of all three, and teach you the officially proposed workflow (Method #3 using BEM and AUTOBEM). Here are some additional videos to help you go deeper on this topic: BEM 101 - ruclips.net/...
ACSS 101.11: Link Styling & Focus Styling (Global & Classes)
Просмотров 2,6 тыс.6 месяцев назад
This lesson covers default link styling, changing links or groups of links with link classes, default focus styling, and changing the focus style of focusable elements or groups of focusable elements with focus classes. 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...
ACSS 101.10: All Things Buttons (Styles, Variants, Mixins, Recipes, & Custom Buttons)
Просмотров 5 тыс.6 месяцев назад
ACSS has the most robust and powerful button system of any framework or page builder in existence. This lesson will show you how to: - Apply button styles to links or button elements - Apply button style variants (dark and light) - Apply the outline variant - Make outline buttons the default - Set global styles (shared styles) for all buttons - Apply neutral, black, and white styles - Customize...
ACSS 101.09: Headers, Sticky Headers, & Offsets
Просмотров 5 тыс.6 месяцев назад
This video covers: - Header Padding with variables or utility classes - Basic header structure - Sticky & Overlay headers in Bricks - Challenges with Sticky & Overlay Headers - Header Height - Auto Content Offset - Auto Scroll Offset - How to turn off content offset with a utility class - How to turn off content offset with programmatic selectors - How to turn off content offset with a data att...
ACSS 101.08: Color Scheme & "Dark Mode"
Просмотров 4,2 тыс.6 месяцев назад
This lesson covers: - How to choose alternate versions of each color in the ACSS color system. - How to automatically swap color scheme based on OS preference. - How to manually swap a group of elements to the alternate scheme. - How to manually lock a group of elements to the main scheme. - How to programmatically lock elements to the main scheme. - How to deploy a color scheme toggle switch. ...
ACSS 101.07.P2: Background & Text Color (Contextual Approach + Auto Color Relationships)
Просмотров 3,9 тыс.6 месяцев назад
ACSS 101.07.P2: Background & Text Color (Contextual Approach Auto Color Relationships)
ACSS 101.07.P1: Background & Text Color (Traditional Approach)
Просмотров 3,7 тыс.6 месяцев назад
ACSS 101.07.P1: Background & Text Color (Traditional Approach)
ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing
Просмотров 6 тыс.8 месяцев назад
ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing
ACSS 101.03: Fluid Responsive, Scale-Based Typography
Просмотров 6 тыс.8 месяцев назад
ACSS 101.03: Fluid Responsive, Scale-Based Typography
ACSS 101.02: Establishing & Manipulating Your Site's Content Width
Просмотров 9 тыс.8 месяцев назад
ACSS 101.02: Establishing & Manipulating Your Site's Content Width
ACSS 101.01: Awesomeness Out of The Box
Просмотров 19 тыс.8 месяцев назад
ACSS 101.01: Awesomeness Out of The Box
Build with ACSS: Zendesk.com Home Page (Part 6)
Просмотров 2,1 тыс.Год назад
Build with ACSS: Zendesk.com Home Page (Part 6)
Build With ACSS: Zendesk.com Home Page Part 5
Просмотров 2,3 тыс.Год назад
Build With ACSS: Zendesk.com Home Page Part 5
Build With ACSS: Zendesk.com Home Page Part 4 (Header Menus)
Просмотров 3,8 тыс.Год назад
Build With ACSS: Zendesk.com Home Page Part 4 (Header Menus)
Build With ACSS: Zendesk.com Home Page (Part 3 - Synced Slider Section)
Просмотров 3,5 тыс.Год назад
Build With ACSS: Zendesk.com Home Page (Part 3 - Synced Slider Section)
Build With ACSS: Zendesk.com Home Page (Part 2)
Просмотров 5 тыс.Год назад
Build With ACSS: Zendesk.com Home Page (Part 2)
Build with ACSS: Zendesk.com Home Page (Part 1)
Просмотров 16 тыс.Год назад
Build with ACSS: Zendesk.com Home Page (Part 1)
Frame Overview: Feature Romeo (Advanced Vertical Accordion)
Просмотров 3,5 тыс.Год назад
Frame Overview: Feature Romeo (Advanced Vertical Accordion)
Component Overview: Accessible Accordion & Toggle
Просмотров 3,3 тыс.Год назад
Component Overview: Accessible Accordion & Toggle
That's amazing! Thank you, ACSS team. It's rare to see the word 'unlimited' nowadays.
I really hate your bang bang expression 🤣🤣
Thanks
I’m curious. Why did you choose to place your screen recording on a gradient background with padding, thus shrinking the viewing space and making it a little difficult to read? 🤔
Because I knew it would get your attention
I love the concentric radius feature! Thanks! 🙏🏻
In which frame rate did you record yourself? 🤔 The motion looks odd sometimes, and it’s not the lighting.
It’s a glitch in the software I was testing
Kevin you really know a lot - at least I learn, but the pricing is too steep for me. Luckily there is lifetime license now (because SaaS model is per my opinion not OK), but really too steep. All the best in 2025 and on. :-)
Wow..I was thinking about the concentric radius for some time. Really glad you guys have implemented it in ACSS. Kevin, Thank you so much for your time and effort in bringing this informative tutorial and for all the implementations. 👍👍
I have to disagree about having the radius on by default. If I built dozens of sites with ACSS (which I have) before you added the feature, then when the plugin is updated, every one of them suddenly has an arbitrary radius applied to all my images. Now I have to go into all those sites and set the radius to zero. That seems like the antithesis of not being a chump.
It’s not turned on by default on upgrades so this isn’t a problem.
@@AutomaticCSS That hasn't been my experience. I've literally had to go back to every website I built and turn it off
no, there was a bug when it was first released that turned it on but that was quickly fixed.
Damn! The new cinematic lighting with the Rembrandt triangle and all. Really popping!
🙏👍
Havent watched it yet but i already kno, gonna be FIRE 😎 happy new year to you and yours as well
how would i override the radius on an image with a figure tag while keeping auto radius on?
Depends on what purpose you're overwriting it for. What's the intention?
@@AutomaticCSS Just design choice. Let's say i have an image in the top of a card for example, and i want only the top left and right corners to have a radius, how would i overwrite the bottom ones?
@ border-radius: var(-radius) var(-radius) 0 0;
@@AutomaticCSS Thanks! that's what i've been doing but couldn't get it to work, i didn't realize the overflow. Just me being an idiot 😂
Great lesson! Thank you. Is that possible to use a gradient border within the recipe? I remember you did something like that in the button lesson video.
No, because CSS doesn't accept gradients in the border field. We can look at adding compatibility for gradient borders, though.
@ would be a nice feature
Great! My question is why would we keep the border framework enabled with a zero value instead of just disabling it and then enabling it in case we do happen to need the global borders later on?
If you have border classes turned off, all it outputs is a few variables, one of which is the global radius variable which shouldn't be turned off.
@@AutomaticCSShm, i don’t really understand it but all in all it shouldn’t be turned off, okay
Thanks Kevin! if i understand this good, why can't we add variables to the border settings?
Not sure what you mean. Can you elaborate?
@@AutomaticCSS Why can't Acss have a variable class for the bricks border panel settings?
@@dovber There's no reason to.
i have purchased acss but even after 24 hours i have not received the acss plugin. no link in their portal. this team is slow and must be responsible if they take customer money.
Please visit digitalgravy.co/support - please be cognizant of the fact that it is New Year’s Day.
Well this is awesome :D
Awesome Thanks! okay now do Frames too :-)
Sir please complete this course ASAP 🙏🙏🙏
Thank you :-)
This is awesome! In a world where everybody seems to be more greedy than ever, this is a breath of fresh air. Thank you.
Why are font sizes set in px rather than rem? Is there a way to switch to rem? I'd rather not have to think in and set things in px anymore.
Nothing is set in pixels. Pixels is just a reference unit. Everything is converted to rem for you.
@AutomaticCSS Why px as reference unit? Why can't we have rem as reference unit? I find it confusing to have to enter px when I want rem. Like this, we only see what we get when looking at the final converted code. Why can't we see it right there? In Core Framework, e.g., conversion is optional. I have set font sizes in rem for a long time, having to set them in px again feels like a step backwards.
There is this video of our great teacher of CSS: ruclips.net/video/cwfxZRLqyus/видео.html ... preaching "DON'T USE PX!", and I 100% agree with everything he says there. Then I look at ACSS and see px everywhere. I hope you understand my confusion.
Adding your .content-width--narrow utility class to Global SCSS, hitting save, saving the website and then trying to add that class to a section doesn't work. No class is made, bricks does not register the class being created at all. ACSS 3.2.9 with Bricks 1.11.1.1 w/ child theme. Fresh install, only other plugin is bricks navigator, fluentsmtp and litespeed cache. I should note that originally, absolutely everything didn't work at all with litespeed cache originally. Fresh out of the box the entire plugin was DOA. After a cache purge, it started working 15 minutes later. Now that I'm sitting here thinking about it, I'm going to purge it again and see if that class shows up. edit: Browser cache reset, wordpress cache reset and server cache reset. nothing changed, custom classes don't work.
You’re likely doing something wrong. We can help you if you post in the community. Also, doable all caching during development as a standard practice - no need for it.
@ Thanks for the heads up. I think this is cache related. The crew over on Circle said the same thing. It fixed my problem the first with a purge and I think it just needs completely disabled like you said. I’ll be doing that shortly. Cheers!
Maybe this applies with Bricks….but it doesn’t with Flatsome. Good sales pitch but I’m not buying…
Flatsome isn’t a supported builder. It doesn’t meet our standards for integration.
What does the data say for Frames?
Still collecting and analyzing
Thank you, so much 😊
Awesome, will the limit restriction coming to frames as well?
We are looking at that data too
The limited number of websites I could activate for the price simply wasn't worth it for me during Black Friday. I went on a shopping spree, and ACSS has been on my radar for quite some time, but I ultimately decided against it due to those restrictions. Now, I'm reconsidering my decision! I had in mind buying CF but I might go with ACSS
Always go with the best! Especially now, since the best comes with no restrictions!
What would life as a web designer be without ACSS? I was dreading the day when I would reach my limit. Thank you very much and Merry Christmas to the entire team!
Bit of a cop out for those who already purchased the unlimited LTD.
As one of those, Not really you still got it at the best price offered?
How so? You paid less.
@@AutomaticCSS No I didn't. $399
Unheard of in the business world!
Amazing News - Thx for the gift ❤
Kevin Geary & the entire Digital Gravy team, this was a great Christmas surprise and I appreciate it greatly. The generosity is appreciated, however, I believe the continual hard work during development and the superior level of support that you invest into ACSS, Frames, and the community is the real gift that keeps on giving. Thank you once again and best wishes to the entire team.
🙏
Merry Christmas to you and the team!
Thank you Kevin Geary and Team!!!!! This is greatly appreciated and the logic of your decision is…logical 😊😊😊 Merry Christmas to all !!!
Mr. Geary, with respect, ACSS has been the very best product for me ever. I had planned to try to do everything you do in ACSS and found the huge amount of work it was. Thank you for this really great product and hope you will accept my acknowledgement for your being one of the best professionals I've ever encountered. Best wishes for you during this holiday season and may you have a tremendous and prosperous 2025.
🙏
“I’m not crying, YOU’RE crying!” Merry Christmas 🎁🎄 ❤
🎁🎁🎁
Thank you Kevin
Full of surprises! Love it!
Thank you Kevin, merry Christmas to you too
Sorry but it seems you forgot 'Freelancer' plan. At least you have to let the freelancer plan go up to 5 or 10, or just take it away from your whole offer.
No there still needs to be a smaller limited plan for many use cases.
Merry Christmas, Kevin.
I read the email title and thought it was goingto be a rug pull on the LTD limits, or something similar. Instead its the exact opposite. Its Christmas, forgive my scepticism. 😂 Merry Christmas to Geary & Co, plus Bev as well, Merry Christmas Bev! 🎄
I need a bundle 🙂 - Thank you - Merry Christmas
go kevin go, go kevin go, go kevin goooo, kevin be good.
Who never ever learned Gutenberg so well But he could style with CSS just like a-ringin' a bell...
When guttenberg fell flat on its back he starting etching his very own stack the chumps were all sleeping and letting things go kevin was a screaming I told ya so maybe some day his stack will be in lights showing the internet Kevin was right.
Great news! I haven't bought ACSS yet, but surely will buy when I have money.
Merry Christmas/Fijn kerstfeest! 😄🎄 What a lovely present, thank you very much!
Merry Christmas
Amazing! Thank you Kevin and staff :)