Go Pro Sign Up Login
0 days 0 hrs 0 min 0 sec

Summer Sale

50% off Level Up Pro until you unsubscribe.
Get access to ALL 128 courses on Level Up Tutorials

This is your last chance to get Level Up Pro for $145/year.

or Learn More
Moon Moon

Buy Now and unlock this series

$

39

.99

$

24

.99

yours forever

Become a Pro and unlock everything

$

24

.99

per month

Building Design Utilities

In this video, we’ll be diving into some more utilities and learning how to set up a system that is going to be helpful. I’ll show you how to simplify CSS and how to add different utilities that you can reuse in your projects later.

Downloads

Become a pro to download code and videos

Comments

User avatar

Mendy

almost 3 years ago [edited]

I found that in order not to pass the empty object to the functions transition / absolute, the object can have a default value which will be an empty object.

transition.js

export default ({ property = 'all', length = '0.3s', ease = 'ease' } = {}) => `
   transition: ${property} ${length} ${ease}
`;

Cards.js

export const Card = styled.div`
   background: white;
   border-radius: 5px;
   padding: 15px;
   color: ${black};
   ${elevation[4]}
   ${transition()}
   &:hover {
      ${elevation[5]}
   }
`;

I hope it can help.

User avatar

Zack

about 3 years ago [edited]

@George thanks! Was stuck on that too.

Can't seem to get my transition to work. On hover only causes the shadow to update immediately. Any thoughts?

Thanks.

George

over 3 years ago [edited]

@Cody Use styled(Card) instead of Card.extend

Cody

over 3 years ago

I'm getting this error and I can't fix it:

TypeError: Cards__WEBPACK_IMPORTED_MODULE_10_.Card.extend is not a function

Want to join the conversation?

Become a Pro member today!