Speaker: Cong Pham - Product Designer @ Anduin Transactions
Bio: Product designer at Anduin Transactions. Previously Misfit Wearables. Pushing pixels, crafting interfaces and brewing coffee daily.
Description: The story of how we f**ked bad CSS up pretty hard. The story of courage on how we destroyed old conventions to create something new, useful and functional that unified interfaces across teams and products. How you should do the same thing for your team. And what are we expecting to come in the future.
53. • Pros
• Doesn’t get pixelate
• @font-face is widely supported
• You can use CSS color property to change color
• Cons
• Browser needs to load the entire font
• Hard to update when you want to add new icons
• They don’t work like you want them to
• Dealing with all the font’s properties isn’t pleasant
• Browser fallback on missing glyphs looks ugly
• Emojis are cooler nowadays
Icon font
53
54. • Pros
• Doesn’t pixelate
• Extensive customizations
• Behave & render correctly
• Browser will only need to load the chosen SVG rather than the entire
sprite
• XLINK:HREF is awesome
• Updating new icons is super easy (Grunt)
• Cons
• XLINK:HREF doesn’t work on IE.
SVG icons
54
55. • Pros
• Doesn’t pixelate
• Extensive customizations
• Behave & render correctly
• Browser will only need to load the chosen SVG rather than the entire
sprite
• XLINK:HREF is awesome
• Updating new icons is super easy (Grunt)
• Cons
• XLINK:HREF doesn’t work on IE.
SVG icons
55
56. • Pros
• Doesn’t pixelate
• Extensive customizations
• Behave & render correctly
• Browser will only need to load the chosen SVG rather than the entire
sprite
• XLINK:HREF is awesome
• Updating new icons is super easy (Grunt)
• Cons
• XLINK:HREF doesn’t work on IE.
SVG icons
56
64. • Nicer, cleaner and maintainable CSS codebase
• Better for development
• Better for prototyping new products
• Engineers can now do simple layout adjustments
without asking a designer for help
• This acts as our UI style guide as well -> easier to
onboard new hires
64
Self introduction
Apologize for being a designer
Ask who’s in the venue write CSS daily?
How did I get involved in this talk? Company party.
What is bad CSS? I will try to show you bad CSS with the following images and examples.
Oh Peter…I think this is quite related to many of us. Here’s an example
Search for this on Github, there’s almost 300,000 cases like this…
I don’t think the distance from the Moon to the Earth is higher than this
Holy shit. I’m in hell.
Because all grids were created equal.
Let me try with 99%. Hmm that works. How about 99.75%? Wow, still works, let’s try 99.76%. Oops that didn’t work. Let’s compromise on 99.753%.
I’m speechless. Fuck the spec, I’m writing my own shit.
To sum up what’s bad CSS, here’s a nice joke from Thomas Fuchs
So what are some of the problems we faced at Anduin?
Wrapping of elements in a giant/custom class for a specific view/page. Let’s say we have a view called pizza-shop. We’d create a file name pizza-shop. The first class that wraps everything is .pizza-shop.
Now. In this shop we have coke that needs styling. So we add .coke
Let’s say along the line of product development, we have a new sandwich shop. And it also offers coke. And all cokes are the same. Unless you have some Chinese cokes. Which you shouldn’t have, seriously. That shit is poison.
Now, the bad and lazy way of doing this is copy what’s in .coke for pizza-shop over to sandwich-shop. Hoping to pass the code reviewer, he turned out to be lazy and sympathize with you. He’ll let you off the hook this time. But this is a problem because…
We used to declare variables at the beginning of the files. Some values aren’t even in variables.
Use SCSS they say, its nesting feature is awesome they say. And we were like, hell yea! Which ended up with something like this…
…and the outputted CSS looks like this…
laugh now, cry later.
We turned on SCSS linter. And I was the new guy so I had to do the cleaning up job. And this picture was exactly what happened to me…
I won’t get into as this is more on the design side of things.
When something didn’t layer right, we would try z-index: 2. Oh that didn’t work, let’s try 3, then 4, then “n” until it actually looks alright
We needed some rules to prevent this from happening. All of these problems resulted in something that I’m eager to present to you today…
Introducing Anduin Component Library or ACL. Let me show you what is it
…The URL was anduin.design for those who wants to check it out by themselves. But please do that at the end of the talk please hehe
Remember the .coke example? Now .coke itself is a component and its styles can be reuse everywhere that needs a coke.
We have a section on ACL site to show all the variables.
Clever.
I’m not even going to mention BEM, those ugly hyphens and underscores…
You can see them in Icons section on the site. I’m going to talk a bit about this though.
We started with an icon font we made ourselves, but then switched to SVG icons later that year. Here’s why.
Show margin and padding
We’re working hard on the next version of ACL and here are what to expect.
Palantir’s BlueprintJS is a kick ass component library that was released a few months back. They’ve done a great job and we want ACL to be like that, even better.
again, this is a more design-centric topic, won’t discuss here.
Make ACL’s utils more modular. Engineers can use these classes in HTML easily. This means less CSS will be written -> less headache.
ACL1.0 was a project from Design team. We’re hoping that this time, some engineers will also contribute on this, especially in providing these stateful components.
An example of this could be, an upload component should work the same way across all products. Before it looks the same but might not work the same.
Once again here’s the link to the site. And this also concludes my talk today. Thank you.