My 8 Tips & Tricks in UI Development

Let’s speed things up — more

Puggin’ & Sassin’

Pug and Sass are without a doubt a power duo when it comes to UI development of BEM and Atomic Design. Pug, formerly known as Jade, is a templating engine for your HTML. Its CSS counterpart is Sass — a CSS extension language.

You no longer have to type opening and closing tags <>, curly braces { } , and semicolons ; Why would you if you can avoid it in order to save time? Use these two if you’re like me who wants to keep things neat and modular as much as possible.

Project Folder Structure

Want to master the UX of code maintenance? Start with a well-thought out file organization. Establishing a standard folder structure (and naming convention) across all projects improves team coordination and code scalability. Should there be changes in the design, finding which file to change isn’t such a pain in the ass. Spare your developers from the headache.

Read my Frontend development guide here for thorough details.

Style Guides

  • Colors
  • Typography
  • Button and states
  • Transitions

Designing our user interface usually starts with a style guide. As the name suggests, a style guide is a reference to how elements should look like across all pages.

Why should UI development be any different then?

UI Development must also start with the creation of the style guide. To create one, take advantage of variables ($), mixins (=), and extends (%).

Calc

Step up your unit game, use calc to make sure your element sizes are on point during browser resize. Don’t you know you can use operators in Sasa? Experiment and try to replace some media queries.

Modifiers

A fan of DRY (Don’t Repeat Yo-self)? Modifiers are great for elements with states in slightly different styles. Most of these elements can be found in your form. To easily identify a modifier, use hyphen (-) followed by a class name in a verb or adjective form.

Mixins

How do you like your coffee?

Cold brew, with 2 pumps of chocolate, 1 pump of vanilla, replace milk with soy, on the rocks, upside down.

Imagine naming that drink ‘Justine’s Coffee’ that you can use every time you visit any Starbucks store.

Mixins is my most favorite technique in UI Development. This allows me to store CSS properties in a variable that I can modify and reuse any time I need to. Mixins can have arguments making it insanely flexible. I use it mainly for flexbox and autoprefixes.

Extends act similar to Mixins too but not entirely the same. I like how this article compares the two. Like I said, I like using arguments so I lean more on using mixins.

Breakpoints

Responsiveness is a pet peeve amongst designers and creative developers. If there’s one thing that we most care about other than the annoying extra 1px to the left, it would be the responsiveness of our design when translated to the actual product. Bootstrap’s helper classes are helpful, but limited. When it comes to customizability, media query is your best friend. Using Sass makes this process even better since you approach every component as it should be, a component.

Emmet

Emmet is a gem.

UI Development tools are always increasing and improving. I’m excited to share more tips and tricks this year as technology evolves!

You can also read Symph’s Frontend development guide here.

👏 Round of applause if you find this list useful. 👏
Like what you read? Give Justine Win a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.