AutomaticCSS & Frames
AutomaticCSS & Frames
  • Видео 63
  • Просмотров 259 620
ACSS 101.12: The Official ACSS Workflow (BEM + AUTOBEM)
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/video/tha_ynmZRaA/видео.htmlsi=eQsmbpQIKVRBiAlL
Utility Classes vs Custom Classes in ACSS - ruclips.net/video/bNzWVAPlMgU/видео.htmlsi=ouTp_DROBm6a_Y0g
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Intereste...
Просмотров: 2 277

Видео

ACSS 101.11: Link Styling & Focus Styling (Global & Classes)
Просмотров 1,1 тыс.День назад
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)
Просмотров 2 тыс.День назад
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
Просмотров 2,2 тыс.14 дней назад
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"
Просмотров 1,9 тыс.14 дней назад
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)
Просмотров 1,9 тыс.Месяц назад
In this lesson you'll learn the newer, more modern approach to managing background and text color on websites. While this approach might take you some additional thinking to wrap your brain around, it's ultimately a better approach for three main reasons: 1. It's faster and removes the need to reference/remember specific colors and shades being used on any given project. 2. It's more flexible a...
ACSS 101.07.P1: Background & Text Color (Traditional Approach)
Просмотров 1,7 тыс.Месяц назад
There are two approaches to setting and managing background and text color in Automatic.css. In Part 01, I'll show you the traditional approach. In Part 02, I'll show you the new "contextual" approach. You can use either approach, but the new contextual approach offers a lot of benefits over the traditional approach. The only caveat is that it might take you a couple explanations and some exper...
ACSS 101.06: Color Palette Setup
Просмотров 3,3 тыс.Месяц назад
The ACSS color system is one of the most powerful color systems available in any builder or framework. In this video, Kevin will walkthrough how the color system works, how each color should be used, and how to setup colors and shades based on a real-world example. Note: We'll be doing many more real-world examples of color analysis and setup in the future. This is just a general introduction t...
ACSS 101.05: Smart Spacing
Просмотров 3 тыс.2 месяца назад
Smart Spacing is one of the most important and powerful spacing features in Automatic.css. It's what allows for achieving perfectly even spacing in your page building workflow (when desired) and perfect rhythmic spacing in your rich content. It also provides you unprecedented control over rich content spacing that isn't provided by page builders or any other framework, saving you the time and h...
ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing
Просмотров 3,2 тыс.2 месяца назад
As is true of typography, the spacing system in Automatic.css is automatically responsive and scale-based, but it also happens to be one of the only contextual spacing systems in existence. That's because ACSS has been at the forefront of defining and establishing the concept of contextual spacing in web design. In this lesson, you'll learn how the ACSS spacing system works and how to apply spa...
ACSS 101.03: Fluid Responsive, Scale-Based Typography
Просмотров 3,5 тыс.2 месяца назад
Automatic.css offers a fluid-responsive, scale-based typography system that works out of the box and is easy to customize for any and all design requirements. In this video, you'll learn: - Overview of heading vs text system - How to set root font size - How to set base heading and text size - How to set type scale - How the base size and type scale work together - How to use heading and text v...
ACSS 101.02: Establishing & Manipulating Your Site's Content Width
Просмотров 5 тыс.2 месяца назад
Content Width is the maximum width that you want content to be able to go when placed inside a default section container. It's important to establish a content width so that the vast majority of your content isn't too wide, too narrow, or random [ick]. Now, just because you've set a default content widht doesn't mean all content has to be that maximum width. We'll cover breakout content in a fu...
ACSS 101.01: Awesomeness Out of The Box
Просмотров 10 тыс.2 месяца назад
One of the biggest headaches for every web design project is getting started. This is because every project has a bunch of different setup requirements and demands a ton of decision making. For most developers, this means that you're experiencing headaches and decision fatigue right from the jump, before you start building anything. Either that, or you skip all the decision making and setup and...
Build with ACSS: Zendesk.com Home Page (Part 6)
Просмотров 1,9 тыс.6 месяцев назад
Build with ACSS: Zendesk.com Home Page (Part 6)
Build With ACSS: Zendesk.com Home Page Part 5
Просмотров 2 тыс.7 месяцев назад
Build With ACSS: Zendesk.com Home Page Part 5
Build With ACSS: Zendesk.com Home Page Part 4 (Header Menus)
Просмотров 3,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,1 тыс.8 месяцев назад
Build With ACSS: Zendesk.com Home Page (Part 3 - Synced Slider Section)
Build With ACSS: Zendesk.com Home Page (Part 2)
Просмотров 4,8 тыс.8 месяцев назад
Build With ACSS: Zendesk.com Home Page (Part 2)
Build with ACSS: Zendesk.com Home Page (Part 1)
Просмотров 14 тыс.8 месяцев назад
Build with ACSS: Zendesk.com Home Page (Part 1)
Frame Overview: Feature Romeo (Advanced Vertical Accordion)
Просмотров 3,3 тыс.9 месяцев назад
Frame Overview: Feature Romeo (Advanced Vertical Accordion)
Component Overview: Accessible Accordion & Toggle
Просмотров 2,7 тыс.11 месяцев назад
Component Overview: Accessible Accordion & Toggle
Component Overview: Frames Accessible Modal & Trigger
Просмотров 3,2 тыс.11 месяцев назад
Component Overview: Frames Accessible Modal & Trigger
Full Landing Page Build With Frames & ACSS
Просмотров 12 тыс.Год назад
Full Landing Page Build With Frames & ACSS
What's New in Automatic.css (ACSS) v2.5
Просмотров 7 тыс.Год назад
What's New in Automatic.css (ACSS) v2.5
ACSS 2.4: Two New Customizable Breakpoints (XXL and XS)
Просмотров 2,2 тыс.Год назад
ACSS 2.4: Two New Customizable Breakpoints (XXL and XS)
ACSS 2.4: Contextual Colors
Просмотров 1,7 тыс.Год назад
ACSS 2.4: Contextual Colors
ACSS 2.4: Easy Custom Corner Ribbons
Просмотров 2,7 тыс.Год назад
ACSS 2.4: Easy Custom Corner Ribbons
Frame Overview: Feature Section Sierra
Просмотров 2,5 тыс.Год назад
Frame Overview: Feature Section Sierra
How to Create New Custom Shades & Transparencies on the Fly in ACSS
Просмотров 1,2 тыс.Год назад
How to Create New Custom Shades & Transparencies on the Fly in ACSS
ACSS 2.3 - Boxed Layout Option & Boxed Layout Styling
Просмотров 1,6 тыс.Год назад
ACSS 2.3 - Boxed Layout Option & Boxed Layout Styling

Комментарии

  • @UmerFarooq-ug1qt
    @UmerFarooq-ug1qt День назад

    Great Approach, Thankyou !!!

  • @Testfortest142
    @Testfortest142 2 дня назад

    Happy Birthday Kevin, your content means the world to me, Ferdi

  • @djkasperg
    @djkasperg 2 дня назад

    It's all great until you wish to add another element to the card.

    • @AutomaticCSS
      @AutomaticCSS 2 дня назад

      That’s why we need components and why I’ve been fighting to get them added as a feature for years. That’s not something a CSS framework can help with.

    • @djkasperg
      @djkasperg 2 дня назад

      @@AutomaticCSS Agreed. 9 months and still counting since that preview. Better be good 😃

  • @RyanRimmer-c6l
    @RyanRimmer-c6l 2 дня назад

    Fantastic video 🙌👏

  • @Louis-C-online
    @Louis-C-online 2 дня назад

    I tried using a mixin for changing link colors but it seems @include link(primary) isn't recognized, is it ?

    • @AutomaticCSS
      @AutomaticCSS 2 дня назад

      Where did you see a link mixin? Not sure this has ever been a thing. What’s the use case?

    • @Louis-C-online
      @Louis-C-online День назад

      @@AutomaticCSS I was just trying to change the color of the active wpgridbuilder pagination item because it's blue out of the box. I ended up using a line of custom css for targeting the active page + a link utility class for the non active page.

  • @bjon3048
    @bjon3048 2 дня назад

    awesome!!! Just one question: the recipes do not work on my end. Do I have to activate it somewhere?

    • @AutomaticCSS
      @AutomaticCSS 2 дня назад

      We need more details. We can help you in the support community.

  • @kevinroberts3789
    @kevinroberts3789 2 дня назад

    Where can I find the syntax reference for the @ipsum shortcut (or is @ipsum-short the only option)?

    • @AutomaticCSS
      @AutomaticCSS 2 дня назад

      All the available shortcuts are in the cheat sheet. Ipsum-short is the only ipsum for right now. More to come.

  • @LindaShum
    @LindaShum 2 дня назад

    You explained BEM and I now understand the power of Automatic.css! Your videos are extremely valuable. Every one I watch helps me another step closer to being able to create any layout required efficiently and beautifully. Thank you!

  • @stphnmwlkr
    @stphnmwlkr 2 дня назад

    Great video for easily explaining why class-first design is best.

  • @thorsten-roever
    @thorsten-roever 3 дня назад

    Thanks

  • @eucalyptech
    @eucalyptech 3 дня назад

    Another great episode with powerful features, well done Kevin !

  • @bjon3048
    @bjon3048 3 дня назад

    man, this was always a big issue on my websites ... you are really making the life of web designers much easier. I just bought the LTD :) This is this is Bricks on steroids :D 🔥🔥🔥

  • @bjon3048
    @bjon3048 3 дня назад

    I really like that you do not only create an awesome product, but also teach how to use it!

  • @bjon3048
    @bjon3048 3 дня назад

    awesome!!!!

  • @PhilDodici
    @PhilDodici 3 дня назад

    The best solution would be the possibility to import the utility class into the Custom classes, in the BEM approach. What do you think?

    • @AutomaticCSS
      @AutomaticCSS 3 дня назад

      That's not really how CSS works.

  • @RyanRimmer-c6l
    @RyanRimmer-c6l 4 дня назад

    Great video, does the next video 'Color Scheme & Dark Mode' not make contextual/auto color relationships redundant if using light/dark color schemes?

    • @RyanRimmer-c6l
      @RyanRimmer-c6l 4 дня назад

      No need to answer, should have tested firstly. Amazing feature, bravo!

  • @mangakagirl97
    @mangakagirl97 4 дня назад

    Which is the right way to customize the background of the hover for each button? Right now is black and I can't find in the ACSS where to put. Should I change in Bricks in the .btn-primary ecc?

    • @AutomaticCSS
      @AutomaticCSS 4 дня назад

      Click the arrow next to the background color in the automatic CSS dashboard. That’s how you set hover styles

  • @bjon3048
    @bjon3048 4 дня назад

    kevin is obviously having fun in this vid :)

  • @ScottDavey
    @ScottDavey 4 дня назад

    Love how much effort you put into these videos. I just bought the full package and frames, and sadly had a sarcastic rude interaction with your support though, as frames would not activate under current instructions, I managed in the end to activate it, but not from how it is shown in the instructions, support just kept pointing me to instructions with an exclamation mark at the end of every sentence or silly face emojis making out I'm stupid. When I picked him up on it he just came back with another rude message. Don't let this guy ruin the excellent work you are doing.

  • @RobSaville
    @RobSaville 4 дня назад

    Excellent video as always Kevin 👍🏻 Anyone who’s hand-coded HTML & CSS websites should understand the power and benefit of a class-based workflow. Also, how important solid class naming conventions like BEM are, in boosting future maintenance and scalability of a website. At least I’m not the only old-school web developer who cringes when a page builder focuses on styling completely at the ID level 😞 To anyone newer to building websites, take Kevin’s advice here, because you’ll be glad you did later on 😉

  • @tjveach
    @tjveach 5 дней назад

    Thanks Kevin, I had to watch it twice, think it thru, and now trying it

  • @danieljohansen8232
    @danieljohansen8232 5 дней назад

    Thank you for being a great contributor to the landscape of web :)

  • @davidwalls2304
    @davidwalls2304 5 дней назад

    Great video. I learned the BEM approach when starting with ACSS 2.x and through your prior videos. I'm loving BEM now and wouldn't shy away from using it.

  • @AndreSalata
    @AndreSalata 5 дней назад

    another fundamental and essential video! Thank you, Kevin.

  • @thorsten-roever
    @thorsten-roever 5 дней назад

    Thanks

  • @jcdeaton42
    @jcdeaton42 5 дней назад

    The button system is much more powerful in v3 than I expected. Great job to the team once again!

  • @whatznext28
    @whatznext28 5 дней назад

    Thank you for making this video! I was getting too granular with naming based on section then block and element so if I wanted to use the block in another section the class name no longer made sense because the section wasn't aligned.

  • @LupusDesign
    @LupusDesign 5 дней назад

    Another excellent video. I also think you should make a video on BEM. It took me a while to grasp and I'm still learning. ACSS is "magic"! Thanks Kevin for all your videos, each one a gem!

    • @jzajzz
      @jzajzz 5 дней назад

      Page Building 101 lesson 08 ..there is also a 2 year old video called BEM 101

    • @AutomaticCSS
      @AutomaticCSS 5 дней назад

      I already made one. It is linked in the description.

  •  5 дней назад

    How did you get the bricks elements to show as a list😲

    • @dovber
      @dovber 5 дней назад

      Acss new feature

    •  4 дня назад

      @@dovber Is it realy?

    • @dovber
      @dovber 4 дня назад

      yes version 3.0

    • @stphnmwlkr
      @stphnmwlkr 2 дня назад

      ACSS 3 > Options > Bricks Enhancements > Stack the 'Add Elements' Panel.

  • @lucianpascu8445
    @lucianpascu8445 5 дней назад

    Thank you Kevin!

  • @Giulo91
    @Giulo91 5 дней назад

    Hi Kevin, can I create the narrow class and decrease the content-width value as a percentage so that if I change the content-width the narrow class adapts automatically?

    • @AutomaticCSS
      @AutomaticCSS 5 дней назад

      should work!

    • @Giulo91
      @Giulo91 5 дней назад

      @@AutomaticCSS I tried this --content-width: calc(var(--content-width) * 0.8) but it doesn't seem to work. What is the right way to do it?

  • @tobisalami
    @tobisalami 5 дней назад

    Bookmarked! I'll return here after work. Because when Kevin is in a video, it must be watched.

    • @tobisalami
      @tobisalami 5 дней назад

      Okay. I watched it! And as always, marvelous!

  • @johnpixle
    @johnpixle 6 дней назад

    Preach brother!!!

  • @exoticammu
    @exoticammu 7 дней назад

    seems a dumb question but why not use buttons on the header instead of doing a nth-last-child

    • @AutomaticCSS
      @AutomaticCSS 7 дней назад

      Because semantically you want those options to be part of the navigation. They will also show up in the mobile menu automatically this way.

  • @ryrimsky
    @ryrimsky 7 дней назад

    Kevin, you're the man. 🥴

  • @andrewflight4879
    @andrewflight4879 7 дней назад

    Another great ACSS 101 tutorial! Quick question re the link rules, can you add a class to exclude the link styles or only ID’s like in the video?

  • @stphnmwlkr
    @stphnmwlkr 8 дней назад

    From teaching the difference between the intents of a link and a button to the flexibility and power of the framework, this is just another example of Kevin's willingness to educate and the power of ACSS. Thank you!

  • @eucalyptech
    @eucalyptech 9 дней назад

    Such a powerful feature, thank you Kevin 😃

  • @liamdawson89
    @liamdawson89 9 дней назад

    Thanks Kevin, such a helpful video. I followed along but my accent--after pseudo element creates a horizontal scroll bar as it goes outside the width of the site. Would really appreciate it if you could describe how to fix this? Thanks

    • @AutomaticCSS
      @AutomaticCSS 9 дней назад

      Add overflow hidden to the section

    • @liamdawson89
      @liamdawson89 9 дней назад

      @@AutomaticCSS Thanks for your reply. I've tried this but it cuts off the mobile phone image. I also tried overflow-x: hidden but that creates a vertical scroll bar within the section

  • @noe.galarza
    @noe.galarza 9 дней назад

    Brutally insane! 😍🤯

  • @Louis-C-online
    @Louis-C-online 9 дней назад

    Focus style utlity classes are amazing, I didn't know we had that in ACSS

  • @Louis-C-online
    @Louis-C-online 9 дней назад

    I didn't expect much from this video about buttons to be honest as it seemes pretty straightforward to me, but there's a lot to see ! @26:03 : that's where the magic happens

  • @joejauregui1372
    @joejauregui1372 10 дней назад

    Pretty cool to learn that fun fact about buttons and links. Thought you might want to know Im building a totally automated and custom WP website for a business idea I have and seriously no joke I didn’t even know what Wordpress was or the difference to a WIX site 6 months ago, n and between PB 101, ACSS 101, WDD Live, and The Inner Circle I have literally learned enough to build my site. SERIOUSLY CAN’T THANK YOU ENOUGH!!!

  • @davidwalls2304
    @davidwalls2304 10 дней назад

    Short, sweet, and to the point!

  • @robmaric
    @robmaric 10 дней назад

    Love it! Absorbing each of these vids as I build my first ACSS site.

  • @derekshort
    @derekshort 10 дней назад

    Is there a calc formula for a responsive maximum width of text? For example, I typically use 65ch on paragraphs that have a font size of 16px. That won’t work on bigger font sizes such as headings. It's tricky because the units are different - ch versus px (characters versus pixels). Would you please formulate one, Kevin? 😊🙏🏻 You’re great at this stuff.

  • @derekshort
    @derekshort 10 дней назад

    Red and white?? 😬My eyes!! Lol

  • @stripedgoat8470
    @stripedgoat8470 10 дней назад

    🤙🏼🤙🏼

  • @dahunsi
    @dahunsi 10 дней назад

    A no frills tutorial

  • @michaelvandinther
    @michaelvandinther 10 дней назад

    🔥