ACSS 101.09: Headers, Sticky Headers, & Offsets
HTML-код
- Опубликовано: 20 июн 2024
- 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 attribute on a header
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: / @gearyco 
Развлечения
I am so glad that I am part of the ACSS community and using this framework. I can't imagine how much additional work and frustration I'd have to go through on my own if I didn't have ACSS. Thanks Kevin and the entire ACSS team.
🙏🎉
At this point, developing websites without a framework is unimaginable to me. I hope ACSS is gonna be around for a long long time into the future 😅
ACSS might be the reason I don't eventually move to Webflow.
You and me are on the same page! Exactly what I’m working on, Super thanks 🎉
I want a video like this everyday. 🎉 happy solstice party to eveeyone!
Just what I was looking for ACSS just keeps getting better and better 100%
This is awesome
No headaches when working with headers if you have ACSS installed! Mind, headers... blown! superb, thanks.
awesome.the only two things I would suggest were automatic offset (maybe via class-/id-selector, but glad to hear you're working on it)
and second, but I don't know if this has to be a bricks-thing: sticky headers with extra bars:
it's very handy to create info-bars, may it be for contact-informations or like "x€ until free shipping" for woocommerce or whatever.
But I only want these for the header on top, not for the sticky one. I imagine when scrolling, the whole header scrolls up, until the "main-header" (the one to be sticky) touches the top and becomes sticky after. end even keep in mind, those bars may be conditional and could become hidden/not rendered at all.
quite a task I guess, but this would be even more next level in terms of header building
An amazing tutorial. Thank you, Kevin.
I'm glad you tackled this topic and showed how to get the header height. I used to force the height by setting it on the header wrapper, but measuring it is simpler.
Thanks Kevin- very nice functionality.
Timestamps:
00:02 Automate CSS for basic header vs sticky/overlay headers
02:03 Using gutter values for proper padding and alignment
06:12 Making headers stick to the top of the page while scrolling.
08:15 Sticky headers prevent collisions and adhere to best practices.
12:33 Hover over header to auto select and get details
14:41 Adjusting header heights across different screen sizes
18:42 Explanation of body class and content offset
20:30 Disabling offsets for specific headers
24:18 Adjust scroll offset for headers and sticky headers
26:19 Managing different headers with ACSS features
💪🏻
Oh yes! Exclude header !!!! Thank you
This is perfect. I'm working on a demo site and Bev said, 'I want one of those sticky header things.'
Bev loves sticky stuff, for sure.
@@AutomaticCSS😂😂
@@AutomaticCSS 🤣
Good video!
I really hope you’ll implement a toggle for a js script that measures the height automatically. For now I feel like it’s easier to write such a script myself thaneasuring and inputing a different value for each breakpoint. Great video though! Thanks for all the amazing work!
Than measuring* typo
By all means, write the script and send it over 😉
This is great. 2 questions on practicalities of implementing settings. 1. At what point would you draw the line for going back to bring up a past website to current 'best practice'? I guess a balance of necessity with updates vs doing for the sake of doing it. 2. How do you keep track of the time saving settings you have implemented in a site? With Bricks, ACSS etc. they evolve hugely over the space of a year, I can envisage a scenario where I've forgotten some stuff eg. when it's set in a blueprint site.
Not sure what you mean. This particular feature is only needed when you have an overlay or sticky header so you turn it on when needed and keep it off when you don’t
is there anything against defining the min-height of the header with var(--header-height) and then using acss dashbord to set the height under header?
What about using JS to get the header height and put it in a CSS variable and using that for the breakpoints?
Of course we have thought of such things. Now try to do it … it’s not as easy as it sounds. The method you just proposed causes FOUC.
hey Kevin, remarkable feature for headers in ACSS. it definitely makes things easier! i only missed the scenario where the header slides off screen to the top when scrolling down, and slides back in when scrolling up. does everything that was covered makes it work out of the box? or are there any other details we should know about for this scenario to work properly?
For that scenario, you would likely want to turn off the switch for header scroll offset
@@AutomaticCSS ok, good to know. thanks!
So with this new data attribute feature... the workload from your previous video on the subject is slightly different, we create two different headers now? One for dark overlay and another for standard headers?
Not necessarily. There are different approaches for different requirements. It depends on what you’re trying to accomplish.
Is the header height for different breakpoints (offset content automatically) able to be automated in the future? Or is this impossible?
I really like the feature!
It’s just a lot more difficult than it seems. We are wrapping up other stuff and will revisit it.
@@AutomaticCSS if it was easy I bet it was already in there ;-)