- Видео 74
- Просмотров 370 623
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.20: Box Shadows
Learn how to use default or custom box shadows in ACSS.
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: www.youtube.com/@Gearyco
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: www.youtube.com/@Gearyco
Просмотров: 1 199
Видео
ACSS 101.19: Global Border System
Просмотров 1,7 тыс.Месяц назад
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 sys...
Important Message: ACSS Licensing/Pricing Plans Are Changing!
Просмотров 4,3 тыс.Месяц назад
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,4 тыс.2 месяца назад
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
Просмотров 3 тыс.3 месяца назад
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,8 тыс.3 месяца назад
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,8 тыс.4 месяца назад
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,7 тыс.6 месяцев назад
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,3 тыс.6 месяцев назад
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
Просмотров 5 тыс.6 месяцев назад
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 тыс.7 месяцев назад
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,8 тыс.7 месяцев назад
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)
Просмотров 6 тыс.7 месяцев назад
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
Просмотров 6 тыс.7 месяцев назад
ACSS 101.09: Headers, Sticky Headers, & Offsets
ACSS 101.08: Color Scheme & "Dark Mode"
Просмотров 4,6 тыс.7 месяцев назад
ACSS 101.08: Color Scheme & "Dark Mode"
ACSS 101.07.P2: Background & Text Color (Contextual Approach + Auto Color Relationships)
Просмотров 4,3 тыс.8 месяцев назад
ACSS 101.07.P2: Background & Text Color (Contextual Approach Auto Color Relationships)
ACSS 101.07.P1: Background & Text Color (Traditional Approach)
Просмотров 4 тыс.8 месяцев назад
ACSS 101.07.P1: Background & Text Color (Traditional Approach)
ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing
Просмотров 6 тыс.9 месяцев назад
ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing
ACSS 101.03: Fluid Responsive, Scale-Based Typography
Просмотров 7 тыс.9 месяцев назад
ACSS 101.03: Fluid Responsive, Scale-Based Typography
ACSS 101.02: Establishing & Manipulating Your Site's Content Width
Просмотров 10 тыс.9 месяцев назад
ACSS 101.02: Establishing & Manipulating Your Site's Content Width
ACSS 101.01: Awesomeness Out of The Box
Просмотров 21 тыс.9 месяцев назад
ACSS 101.01: Awesomeness Out of The Box
Build with ACSS: Zendesk.com Home Page (Part 6)
Просмотров 2,2 тыс.Год назад
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,9 тыс.Год назад
Build With ACSS: Zendesk.com Home Page Part 4 (Header Menus)
Build With ACSS: Zendesk.com Home Page (Part 3 - Synced Slider Section)
Просмотров 3,6 тыс.Год назад
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,6 тыс.Год назад
Frame Overview: Feature Romeo (Advanced Vertical Accordion)