Thinking on ways to solve FABs

In today's GUI Challenge, @AdamArgyleInk builds a couple of floating action buttons (FABs) and talks about the UX and CSS considerations for fixed position buttons on the web.

Chapters:
0:00 - Introduction
0:43 - Logical Properties
1:50 - Accessibility Tree
3:18 - FAB Group
4:41 - Focus Order vs Document Order
6:21 - .fabs CSS
7:16 - .fab CSS
12:54 - Animation
14:02 - Outro

Resources:

#GUIchallenges #CSS #ChromeDeveloper

[GavHern]

I love that accessibility tree view! Did not know about that feature and will make my life a lot easier than turning on a screen reader to check if my accessibility is working.

[ROLND-CSS]

What a great ideas again! Love watching these series! 🤘🏼

[serveshchaturvedi]

Man you are amazing. Epic transition music 😂👏

[bushigi]

love this series of videos! please make more~

[giovanicamara]

The placement of the button in the DOM is crucial for a keyboard user

[icoz]

Just the way all thinks should be done

[Betterthanyou]

I have my own recipes for styling but damn I learned a lot of cool stuff about accessibility and browser features.
Awesome video! Thanks

[chinmayk]

Make all of this into a CSS framework called argyleCSS pls

[nmay]

While I think that supporting rtl languages is important, I do not think this is one of those elements that should change depending on the language. My thought was that FABs are on the right side to make it easier to tap with your right hand, which in most countries is still the dominant preferred handedness. Besides, even in ltr languages, you still have to scroll the content far up enough so that the content isn't hidden by the FAB, and that works for both ltr and rtl.

Perhaps we need a prefers left-handedness media query :) .

[merotuts]

Can somebody explain how he used the ampersand(&) operator in plain css. I thought it existed only in SASS.

[rogierderuijter]

Animation box-shadow is something you shouldn’t do right?

[nikhilhukkerikar]

What is that debugging corner there a separate app or just browsers along side some iOS/Android emulators?! Love it great way to test them all at once!

[the-old-channel]

Cool implementation!

I wanted to ask, what do you think of frameworks like tailwind? Everyone says it’s better and more convenient than writing pure CSS. I just don’t see how polluting your HTML with tons of classes is a better approach. What’s your opinion on that?

[HugRunner]

I wish you would do a take on a "status bar" or alert messages, like success/error messages etc. Where to place them without taking over the UI and making it "jump", but still being visible on desktop and mobile.

[oskrm]

Hey Adam, nice stuff, can you do add a context menu + click and drag select to your GUIs?

[glenospace]

Love the video. Amazing everything, but could you please not use that strange font for css when recording. I find it absolutely brutal to read that font.

[furkanacar]

12:40 Why don't you change the actual order in the DOM and get rid of "column-reverse" and "z-index: -1" adjustments?

[appeltaartnl]

Very nice way to keep the tab index as it should by using flex direction! Great video 👍

One thing that I've been wondering though. I believe you were doing this in your previous video (about buttons) also. As described in the written article from the last video, you're using Lea Verou's convention for custom properties with defaults. I feel like you are using the pseudo private custom properties incorrectly. You're not setting any defaults. Are you trying to imply that these properties shouldn't be changed from the outside the of the FAB code (and that they are private)? Because that would heavily reduce the customizability if this were a component.
Not trying to be negative, just curious what the idea behind that was :)

[gexcube]

Good evening, can I know a senior expert to speed up my website from DESKTOP AND MOBILE on chrome and edge?
a person who knows how to fix errors and bugs without ruining the website;

[patrick_h_lauke]

one aspect of FABs that still doesn't have a definitive answer: what order should they have in the tab cycle/how to easily reach them with the keyboard. one of the selling points of FABs is that they're always handy for touch/mouse/pointer users. but for keyboard users, they generally either come right at the start or the end of the tab cycle. i've been toying with the idea of treating them essentially as non-modal dialogs, with an appropriate shortcut key ... perhaps F6 or similar ... to jump between the regular page and the FAB itself (keeping track of where the focus was at when switching, and setting it back when jumping back to it). may need to investigate / make some demo...