Build with ACSS: Zendesk.com Home Page (Part 1)
HTML-код
- Опубликовано: 18 окт 2023
- Purpose of this series: Learn how to approach real-world projects with an ACSS-based workflow for maximum efficiency, scalability, maintainability, and accessibility.
This series covers the recreation of the Zendesk.com home page. Questions and comments are welcome!
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
Please more of this "Built with ACSS"-Examples.
It's perfect to learn ACSS.
Awesome series! Hope this will continue to be a thing for multiple well known websites 🥳
Two thumbs up for Kevin's web design teachings! His course provided a solid foundation in design principles, and I now confidently implement CSS styles with finesse.
So good! I love this series. I follow along with breakdance!
Nice! No Netflix today! It's time for some ACSS!
I love this tutorial ❤❤❤❤🎉🎉😊
I would love to see a full Frames for Figma tutorial start to finish that covers the use of ACSS and Frames. :D
Thanks for making time to do this series. Your enthusiasm is infectious and I'm sure you'll be making a customer of me.
🙌
Great build, thank you Kevin for this new series !
Was fun to watch! But man you are fast, wow! 😅 It's so helpful seeing your thought process! Thank you!
🙌
The pacing was great and thank you for creating walkthroughs like this. So much to learn each time.
Loving this Great Work as alsways,. I find these really helpful.
Since using ACSS i have gut down 30% on development time. Which in turn has increased my profits as I still charge the same price for my porjects. Thank you for this series and thank you for ACSS. Frames is a bit out of my reach but ACSS helps tremendously, Thank you.
Auto BEM looks great, what a time-saver
Thank you, Kevin, very helpful.
Thanks a lot for all your video Kevin !
Perfect timing! I need this for my new project and recently had difficulty trying to set button styles and the color palette without creating more work for myself "down the road".
Excellent video! Based on the first 12 minutes, I can already tell that I need to make some changes to my website blueprint.
What changes did you see that you need to make?
@@AutomaticCSS Making the website width sync with content width variable for example. I always manually enter the width there. Also disabling the deprecated options in ACSS 👍
@@andredkvideo I paused the video right then and updated my blueprint! :)
Did the exact same thing!! To be fair Kevin manually input the value in his "How to Create a Bricks "Blueprint" video (see 51:44 from that video) from 7 months ago. A reminder of how important it is that he keeps making fresh content so we can keep up to date with little things like this! Thanks Kevin :)
1:02:52 nugget: absolutely positioning images in the center and translate it back
Kevin, one suggestion I have is to use content-gap or container-gap variables in the grid gap property instead of grid-gap variable in 2 column grids (e.g. content sections). Then you can keep the grid-gap variable for use in a grid of cards. Love this series and learning a lot about color management and space management when setting up a website.
Usually in two col grids and especially on this site, that gap between the two columns is much bigger. But it’s personal preference I suppose. I can still use grid gap for cards. Could be a use case for a large content gap.
Thank you for this video, I learned a lot. Also put some nugget timestamps in the comments, would love if we all do it to find those nuggets when rewatching the video again after 3 month (abusing your 3 month rule here😅)
Yes! We need more people to do this. Tremendous value.
I really would like to know how you built the sliders with examples of what ACSS can do, on the ACSS homepage. You showed it in one of your videos, but love to know how to build such a thing.
can you explain more about why you tend to do a media wrapper on images and videos like in the CTA card vertical? you referenced scalability/maintainablity, can you elaborate?
Good question! It gives you many more styling possibilities and four extra pseudo elements. Since we can’t predict the future, it’s a super easy way to make sure the cards we build don’t have unnecessary limitations in what we can do with them at a later date.
Another great tutorial Kevin and really looking forward to the next installment. Just a very quick question (and apologies if it's simple but can't seem to find the info :D) but I noticed when you where in the builder and the color palette was open, you were able to get a "dropdown" of the transparencies for each color. How do you do that dude?
hold CMD when you hover.
@@AutomaticCSS OMG, so simple. Cheers Kevin
Sounds like it's gonna be a cruise.
Not sure what that means :)
Q: Why do you prefer vw for border radius? 😊
It works for pill and for circle equally, where 50% can cause issues.
18:08 nugget: converting px to rem by using ctr
Great video, but i have to ask why the in footer you use blocks for each li ? o better. what will be the difference btwn do the footer like this video OR create menus in WP for each "column" and add them in bricks as Wp menus?
Thanks soooo much
Multiple menus = multivate navigations. But semantically there's only one footer navigation. So multiple menu elements would be semantically wrong.
How did you do the px to rem conversion? And how are you typing the variables and having them automatically wrapped with the proper syntax?
AutomaticCSS
As @rosalindshare mentioned, they're ACSS features. You can turn them on in the dashboard and read about them in the docs: automaticcss.com/docs/
I noticed you convert the pixels to REM when adding the logo. 84px turned into 5.25rem. Does that mean you're no longer using the 62.5% root font size?
Thank you for adding the comment because I was using 62.5%!
what was the trick there to convert it to rem?
@@edanbenatar just type the value in pixels followed by the letters ctr and press enter
1:00:51 nugget: Localy scoped variables for svg icons to assign size and color to a class (bricks bug)
I'm doing something wrong here. Locally scoped var for svg icon to assigning the size and color to a class doesnt work with me
Hello Kevin (#Whoisgary !) _ A general question about ACSS and breakpoints. I noticed your defaults are desktop first. What is your view on having mobile first breakpoints set? Thanks!
We haven't found that it makes any relevant difference in a page builder. What it does do, is force people to think completely differently which tremendously slows down the workflow they already know. And since converting workflows has no benefits in this case, it's not worth it.
There is one big benefit starts from mobile first . In my experience, I conducted comparative performance tests on a webpage initially designed with a desktop-first strategy and then redesigned it following a mobile-first approach. The outcomes significantly favored the mobile-first design not only in terms of mobile performance but, notably, desktop performance improved Despite these findings, I personally lean towards a desktop-first approach because I find it more engaging and creative.😊 However, I'm curious about how ACSS handles mobile-first design?
hi kevin, one question. do you have some recommendations of memory limit for ACSS with Bricks? the builder get´s a little laggy when I start adding elements... actually, it got very laggy when I duplicated those 5 footer columns
Lag in Bricks is related to Bricks' handling of DOM elements on the page and perhaps the number of classes in the database. We're hoping they investigate this further.
Q: When you do the footer you make the titles above each column a H3. Can you help me understand why, semantically, that would be correct? Wouldn't that be read as a sub-heading of whatever H2 is above it? And since it's in the footer, that's just going to depend on what page they're on.
This came up in TAB a while back and I'm not sure anyone had a definite answer...
I usually have an h2 in the footer and then these are h3s so that’s what I default to. In this case, this footer is somewhat just “fleshed out” at this point and not finalized. But, I’ve seen it done many different ways and I’m not sure there’s a definitive answer either. If someone has a strong argument for any particular method here, I’ll gladly adopt it.
@@AutomaticCSS thanks and same! 😅. If there's not a headline above sometimes I'll do H2 and sometimes just a P 🤣
33:07 is it still best practice to use a video like this in the Hero section?
I would tell the client there’s no benefit to it and only performance downsides. But in this case there’s just a site I have to replicate.
I was unaware that I could just type the class such as .btn-action and .btn-primary. I've been wasting time, and struggling, by using the Bricks Builder theme styles (button style Primary, Secondary, Light, Dark... but no Action 🤔) like a chump. Sometimes the chump way did not even work. 😔
That’s why you never see me use bricks styles
Why use var(--black) instead of #000000? 🤔
Because #000 isn’t compatible with color scheme compatibility
When adding --border-width to my Bricks Child theme, it doesnt work. I need to write 1 in the border window istead of var(--border-width) to make the border show on the preview page. It shows up in the builder tho? :/
I'd need a link. Post in the ACSS community and we're happy to help you there.
34:55 Why not inspect the original? 🤔
?
@@AutomaticCSS Would the original Zendesk website tell you the grid information if you inspected it?
No sound
? Try again.
all good but still not see point why you use automatic CSS when you can use own CSS but okay if it's automatic CSS free plugin but it's premium :/ no sense at all
It's not that it doesn't make sense, it's that you don't understand what it's doing.
Awesome tutorial as always. Just a note - it would be great to see only ACSS in action, without Frames. I'm watching this, all is perfect, and then .. you start using Frames and some questions appear: How to build a Header like that from scratch, not to take it from a template? All the best.
Next series I can