Front-End, UI / UX Engineering
User experience and user interface design are key components of the Revelry product development process. While UI / UX design is an ever-expansive (and ever-evolving) category, we rely on design thinking best practices and a unique Lean Agile process as we tackle all aspects of our front-end development work. Equally important: Our design engineers remain curious…always learning, questioning, and pushing into new territory.
Here, our team of front-end design engineers share some of their thoughts, ideas, and observations. Sign up for our monthly newsletter for more.
Using SCSS to Dynamically Change CSS Font Color Based on Background
Blaze’s heart was so happy the day she discovered the ability to change font color based on the lightness or darkness of the background. She shares with you the magic of SCSS in this detailed post.
Design and Development Collaboration: Best Practices, Tools and Guides
The design and development teams at Revelry collaborate on nearly every project. We sync with our internal team to go over project documentation and details, meet with our innovation partners, and have discussions about process and implementation.
Cross-browser Testing: Best Practices and Useful Resources
A great way to save hours of time is to always keep cross-browser best practices in mind throughout the process of developing a new site.
Using Null to Write Better Sass Mixins
Use null values in your Sass mixin to erase the style properties you don’t need.
Multi-line Ellipsis Using Pure CSS As a Workaround
Two weeks ago the engineers were given a challenge to write a method that cut off a block of text leaving an excerpt trailed by an ellipsis. As soon as the engineers were given the challenge question, I began to scribble down the front-end version.
Farewell Prototyping Software. Hello Designing In-Browser.
Upon first starting to work at Revelry, Gerard told me, “Eventually we’ll have you designing in the browser and you won’t need to mock everything up in Illustrator, Photoshop or Sketch.” To be quite honest, this terrified the living you know what out of me…
Ai vs Ps: Improve Your Workflow
About a year ago I made the switch from mocking up my designs in Photoshop to using Illustrator instead. After listening to UI designer Jeremy Miller of Radolo talk on this topic, I walked away with one thing: “Learn to Love Illustrator.” And that I did.
Sassy Ampersands Are… Beefy
Ampersands can handle situations like reverse nesting, extending class and id names, and even adjacent sibling selection.
Quick Color with Sass
With powerful tools like Foundation and Bootstrap, along with Sass, designing as you code feels much more natural than trying to replicate a static mockup in the browser. One issue I’ve had, however, is finding the right colors without having to go back to Photoshop. Luckily, Sass has some pretty amazing color functions that can automate your color choosing process.