Image for post
Image for post
Photo by rawpixel.com from Pexels

Are you a designer constantly telling your front-end developer to add padding or pixels and are baffled as to why the design doesn’t match the comp? 🤔 Or are you a front-end developer who’s frustrated with all the pixel pushing? 😳

Collaboration between designers and front-end developers is key for a streamline product that’s consistent across all boards. …


Image for post
Image for post

Are you seeking to build a responsive grid without calculating breakpoints and having to write multiple lines of code? Well you’ve found the right blog! This is a tutorial on how to properly apply CSS Grid Layout across all browsers. There’s plenty of code examples along the way to hopefully empower you to have confidence in building out your own grid!

Remember the good ol’ days when Flexbox came out! Everyone was so excited that they didn’t need to use floats, positioning or inline displays anymore. Well almost the same excitement if not even more joy was expressed when CSS Grid Layout came out. Unlike Flexbox, which was only a 1-dimensional layout model, CSS Grid is a 2-dimensional model that can make both rows and columns dynamic and responsive. …


Image for post
Image for post

CSS transitions and transforms are a powerful way to enhance and delight user experiences. No added library like GSAP or Velocity.js are necessary. Neither is JavaScript required. CSS3 animations include properties that are already built into CSS and are widely supported across all browsers. Animations are a great way to provide visual feedback, delightful moments and memorable interactions. Remember, animations should enhance the user experience and not be distracting. Animations should be consistent with subtle and simple movements.

Transitions

First, I will cover transitions since transitions act as the foundation of animations because they specify the duration of an element changing its state smoothly over time. Without a transition this state change would be abrupt and take effect immediately. …

About

Kirsten Swanson

A creative, adventurous, and curious Front-End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store