ACSS 101.09: Headers, Sticky Headers, & Offsets

Рет қаралды 1,967

9 күн бұрын

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

Пікірлер: 36

@davidwalls2304 5 күн бұрын

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.

@AutomaticCSS 5 күн бұрын

🙏🎉

@nostressirish2767 5 күн бұрын

Thanks Kevin- very nice functionality.

@ceescoenen 6 күн бұрын

Oh yes! Exclude header !!!! Thank you

@vickydeclasca 6 күн бұрын

I want a video like this everyday. 🎉 happy solstice party to eveeyone!

@digitalgorithms 7 күн бұрын

You and me are on the same page! Exactly what I’m working on, Super thanks 🎉

@antonichristian5845 7 күн бұрын

No headaches when working with headers if you have ACSS installed! Mind, headers... blown! superb, thanks.

@sheldonharding 6 күн бұрын

Just what I was looking for ACSS just keeps getting better and better 100%

@schatten105 5 күн бұрын

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

@Louis-C-online 7 күн бұрын

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.

@LupusDesign 6 күн бұрын

An amazing tutorial. Thank you, Kevin.

@kamelberlime3532 5 күн бұрын

This is awesome

@irfanahmed5278 6 күн бұрын

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

@AutomaticCSS 6 күн бұрын

💪🏻

@stripedgoat8470 7 күн бұрын

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 😅

@jzajzz 7 күн бұрын

ACSS might be the reason I don't eventually move to Webflow.

@toby-green 6 күн бұрын

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.

@AutomaticCSS 6 күн бұрын

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

@tudorcelstan 6 күн бұрын

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!

@tudorcelstan 6 күн бұрын

Than measuring* typo

@AutomaticCSS 6 күн бұрын

By all means, write the script and send it over 😉

@derekshort 7 күн бұрын

Good video!

@kevinrittershaus9380 7 күн бұрын

This is perfect. I'm working on a demo site and Bev said, 'I want one of those sticky header things.'

@AutomaticCSS 7 күн бұрын

Bev loves sticky stuff, for sure.

@jzajzz 7 күн бұрын

@@AutomaticCSS😂😂

@kevinrittershaus9380 7 күн бұрын

@@AutomaticCSS 🤣

@brunoguerchon 7 күн бұрын

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?

@AutomaticCSS 7 күн бұрын

For that scenario, you would likely want to turn off the switch for header scroll offset

@brunoguerchon 7 күн бұрын

@@AutomaticCSS ok, good to know. thanks!

@alxbengosu 7 күн бұрын

What about using JS to get the header height and put it in a CSS variable and using that for the breakpoints?

@AutomaticCSS 6 күн бұрын

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.

@SamanticsNL 4 күн бұрын

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!

@AutomaticCSS 4 күн бұрын

It’s just a lot more difficult than it seems. We are wrapping up other stuff and will revisit it.

@SamanticsNL 4 күн бұрын

@@AutomaticCSS if it was easy I bet it was already in there ;-)

@jzajzz 7 күн бұрын

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?

@AutomaticCSS 7 күн бұрын

Not necessarily. There are different approaches for different requirements. It depends on what you’re trying to accomplish.