Build With ACSS: Zendesk.com Home Page (Part 2)
HTML-код
- Опубликовано: 13 июл 2024
- Our Zendesk.com home page journey continues with Part 2 in the series. After buttoning up a few small things from Part 1, we tackle the Resources section and the unique Social Proof section layout with logo slider.
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
CHAPTERS
0:00 Buttoning Up Some Small Stuff
7:20 Resources Section
1:02:35 Social Proof Section
For sure this will sound nerdy, but I could watch these building videos all day 🙈🤩😊 Thank you so much Kevin!
Me too 😂
Glad you like them!
Always a pleasure watching you live building websites. So much to learn 😅
impressed with the testimonial section, thank you Kevin
Really enjoying these videos - great content and always learn something!. One thing, with the description custom fields, it would probably be more efficient to just have a single 'description' custom field and then apply it to all the CPTs where it is needed - Reports, Guides, Articles etc - as the description field does the same job on each. To avoid repetition, particularly on more complex builds, custom field groups are best considered (and named) in terms of the job/function they do, rather than a particular CPT they apply to. Custom fields for Hero content are a good example - you might have a Hero design that is common across multiple CPTs, so just create a single field group for Hero content and apply it to all the CPTs where it is needed, rather than separate ones for each CPT - it's more scalable and maintainable :)
The problem is that it’s not super safe. If for some reason, the description field needs to change in functionality for a specific use case, you risk losing all your associated data. When the fields are mapped to specific areas, it’s compartmentalized and much safer. It’s also easier to keep track of where fields were created and setup since they’re attached to their specific use case.
But your method definitely wins for efficiency.
All this and only one plugin (ACF Pro)...inspiring! That's an eye opener.
For sure!
Kevin, the way you handle the grid area here with dynamic data is absolutely next level. One can hear your enthusiasm when you got it working 😁😁 Love it! I will definitely save the video for later
That is nonstop craziness. :) Pure professionalism. I am just enjoying watching that.
💪🏻💪🏻
great series! Definitely give us that video on atomic design
I love this series... thanks. Little MacOs trick at 42:32, if you press Option key you can copy the text without the need to go to the developer tools.
Fantastic series Kevin 👍🏻
Nice continuation of this series, thank you Kevin 😃
Yes! 🚀 Brain needs some cool down after watching that 😂 great stuff 👍
"Borrowing" an icon from, say, Zendesk's landing page is simple:
1. Right click it and select "Inspect"
2. Select the line of HTML starting with Copy Element
4. Paste into a text editor, save as icon.svg.
That’s how I got them before the project started.
Thank you for all the training
amazing content like always. Really liked that you presented the new auto BEM feature, looks amazing. And I didn't know about the convert to rem shortcut (ctr) that's cool !
Glad you liked it!
1:18:52 nugget .nth-of-type with a custom element to handle tricky grid areas
Awesome!
I'm surprised no-one has commented on the bit where you was scared to get cancelled. 1:05:30 I had to rewind that part about 5 times, I couldn't stop laughing, and yes, he did look like a Ben. Not sure about Judy though lmao
Things got shaky there for a minute!
1:24:42 nugget: create modifier utility classes to … 🥁… modify 🎉
47:54 nugget: grid-template-rows: var(-grid-1) for Safari. always wondered about the use case 🎉
8:56 Yes, it will. Lol. I thought that there was something wrong with my new 4K UHD TV.
34:42 nugget: Auto BEM while excluding atoms
❤🔥❤🔥❤🔥❤🔥❤🔥
Hands in photos psychological conveys trust.
Criminals at parole board meetings lean heavily towards release when the criminal shows hands on top of desk instead of below. My guess is they used the photo for psych reasons
the snipaaaa LOL
Pew pew!
3:45 nugget: bricks footer as a div (not a section), cause bricks wraps it in a footer tag anyhow
Another great way of showcasing what you can achieve with a CSS grid! So good! 💪💪 This series inspired me to copy other websites to get more experience in building the correct way, always thinking in terms of scalability and accessibility. Would it be a good idea to post this copy to the Inner Circle? I would very much appreciate it if you could check the copy, and maybe you can tell me what I could have done better. BTW, I made a copy of the HubSpot homepage, like 50% of it. All of it was made from scratch using ACSS variables.
Yeah you can post. I might not be able to personally review it but others will
Kevin, these two vids are absolute GOLD! Thanks so much for taking the time to make these! One thing i keep struggling with: When or why do you decide to add a styling class like for example "bg-light" to a section instead of giving the section it's own class and then styling the background color of that class? Is there like a rule for this i can easily remember? Thank you.
Section background colors tend to be one-off and sometimes different from page to page. So a utility class is perfectly fine to use. Definitely use custom classes for things that always need to look the same everywhere.
At the end of this video you're tackling the brand slider...and I think you mentioned it would be finished in the next episode but it was kinda left hanging. Did you tackle it in any of the other episodes after #3, I spent a bit of time looking but couldn't see it...
I'm pretty sure I did, but don't remember which one.
Hi Kevin, I want to ask you a couple of things. First: How do i aplicatte the var() automaticly in the css editor after write a variable? It doesn't work for me in this place (it does ok in other bricks fields). And the second thing: How you automatic convert numeric values to rem in bricks? Thanks a lot, great tutorial!!
ACSS settings you turn on in the dashboard. The community can help you further if you’re having trouble.
1:06 😂😂😂
Perfect content as always… But I did get quite a few ads while watching. Definitely not used to see those in your videos.
I’m not signed up to be able to run ads which means I’m not able to turn them off either. I’ll apply for advertising and then turn them off.
Instead of post type Brands, can you use a folder(Brands) within Happyfiles?
Query: Post
Post type: Media
Terms: Branding(Folder)
In test environment this also works.
For sure, but if you end up needing to expand brands functionality in the future with more custom fields and content, and perhaps relationships, you will be in a situation where you have to rework everything you’ve already done across the site. I would only use happy files query for pure image galleries.
Is there more in-depth Grid Area tutorial?
ruclips.net/video/Ntei5V4OP8I/видео.htmlsi=pSS_iGSVjZLm_Ju-
[around 19:08] 🤣
Does a video exist that explains how to use line-height? This entire time, I’ve been using line-height incorrectly.
It’s just the space between lines of text. I haven’t done a specific video on it but maybe I can…
Clickable parent / focus parent: Do you have a tut on that? (I looked, but did not see). Super slick setup and a serious pain point I have 😬
I’ve covered the details in other videos but I haven’t done a dedicated video on it unfortunately. I’ll record one for this coming week on @gearyco
@@AutomaticCSS No worries - don't go out of your way 😅. Seems like a cool solution in ACSS that's kind of a pain in the ass otherwise 😂
You're not the only one who has requested it. You're about the 10th person, so it's probably time lol@@kylevandeusen
ACSS has a bunch of little features like this that solve common PITA issues.@@kylevandeusen
@@AutomaticCSS I know I know 😅 and when I can use classes easier in GB, I'll be converted 😅
how do you convert px to rem at 01:35:45?
ACSS expansion feature
@@AutomaticCSS aaaaah gr8. Thanks for the reply 😍
Are you no longer using Metabox? If not how come?
Nope. I wrote an article I’ll publish soon.
title: Kevin Geary, subtitle: the-black-belt__css-magician, do you like it?
you create big mistake creating 3 cpt, why you just not create all inside blogs and create conditional fields :D
Because they aren't blogs.