Smashing Newsletter #203: SmashingConf SF, Contextual Styling, and Goldmine Of Snippets

Let’s break out. No more generic designs, no smelly code bases. Outstanding and fast experiences — that’s what counts.Issue #203 • Tue, April 10, 2018 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, Everybody likes talking about success. However, we learn most when failing, and trying again, over and over. That’s why for the upcoming [SmashingConf San Francisco]( we’ll focus on failures and lessons learned from real-life projects — redesigning and rebuilding Slack, visual installations for Olympic Ceremonies, dealing with progressive web apps, CSS Grid in production, CSS Custom Properties and many others. Two days, one track, April 17-18. [To the schedule →]( [SmashingConf San Francisco 2018]( Taking place in the magnificient Palace of Fine Arts, with [plenty of practical workshops]( and a mix of focused, practical talks. With Addy Osmani, Mina Markham, Michael Riethmuller, Kate Dawkins, Aaron Draplin, and [many others](. We care about [diversity]( and [inclusivity]( at our events. SmashingConfs are a safe, friendly place, and we don’t tolerate any disrespect or misbehavior. [Go get your ticket](. We’re already looking forward to seeing you in San Francisco… live! ;-) Let’s bring more diversity to the web, — Vitaly ([@smashingmag]( --------------------------------------------------------------- Table of Contents 1. [Contextual Styling Made Easy](#a1) 2. [Freebie: A New Take On A Classic](#a2) 3. [A Look Inside display: contents](#a3) 4. [A Gold Mine Of CSS Snippets](#a4) 5. [Getting Color Management Right](#a5) 6. [Optical Adjustments For A More Harmonious Design](#a6) 7. [Does Your Site Deserve Recognition?](#a7) 8. [Upcoming in Smashing Membership](#a8) 9. [Upcoming Smashing Workshops With Vitaly Friedman](#a9) 10. [New on Smashing Job Board](#a10) 11. [Most Popular Articles on Smashing](#a11) --------------------------------------------------------------- #1. Contextual Styling Made Easy Imagine you want to have multiple themes on the same page, e.g. a light main area and a dark hero and footer section. Styling them contextually is usually quite a hassle, but custom properties can make the undertaking at least a bit easier, [as Simurai explains](. [Contextual Styling]( How to do it? Well, first, you need to define a default theme with different variables. Then you can create components using the variables, and, finally, have them picked up with a simple attribute. Once you’ve done that, you can start to define more theme regions and add them to your markup. The components will stay context-unaware and, thus, you can use them in multiple themes — even on the same page. A promising solution for colors, sizes, fonts, or anything else you’d like to define as variables. (cm) --------------------------------------------------------------- #2. Freebie: A New Take On A Classic Back in 1971, Andrzej Heidrich (creator of the Polish banknotes), designed the cursive style “Bona” typeface. Inspired by the Italian renaissance antiqua, it was a real beauty with its classical proportions and subtle contrast — one that only existed as a metal type set, though. More than 45 years later, the young designer Mateusz Machalski decided to awake it from its slumber and get the typeface ready for our digital times: It was the birth of [Bona Nova](. [Bona Nova]( Bona Nova is more than a digitized version of the classic. It expanded the original character set with small caps, alternates, and OpenType features. It also introduced two entirely new versions: regular and bold. Distributed under the Open Font License, you can download and use Bona Nova for free. (cm) --------------------------------------------------------------- #3. A Look Inside display: contents When designing for the web, we usually think in rectangular boxes: the actual box, consisting of border, padding, and margin areas, plus the content area which hosts the content of the box. The new CSS display property now lets us control how this box and its children are drawn to the page — and whether an element in the markup will generate a box at all. [How display: contents; works]( As [Ire Aderinokun explains]( the newly specced contents value will draw the contents of the box as normal when applied to display, but the surrounding box will be omitted entirely. The feature isn’t widely supported yet (only in Chrome, Firefox 65+ and Safari 11.1+), and, thus, it should still be considered a progressive enhancement and only be used with an appropriate fallback. (cm) --------------------------------------------------------------- Our sponsor: Download Four Free Tools For Developers Take the complexity out of developing and deploying native apps. 3 million developers worldwide already use Embarcadero’s [tools]( to code cross-platform applications that are fast to design, fast to deploy, and are highly performant. [Get Your Free Object Pascal eBook]( - C++ Builder → Includes a streamlined IDE, code editor, integrated debugger, two-way visual designers, and hundreds of visual components. - Delphi → A great way to start building Windows apps. - C++ Compiler → The core of Embarcadero’s award-winning C++Builder product line. - REST Debugger → Explore, understand, and integrate RESTful web services with Delphi and C++Builder apps. [Get started today]( with their four free developer tools — no credit card required. --------------------------------------------------------------- #4. A Gold Mine Of CSS Snippets Do you have a favorite CSS snippet you use again and again? Michael Scharnagl [asked the same question on Twitter]( recently, and, well, with almost 800 replies and more than 2,300 likes, it hit a nerve. [CSS Snippets]( To prevent all the useful little snippets that emerged in the conversation from living an existence only in a Twitter thread, Michael [collected the ones that got mentioned most often]( in one place. An overview of useful snippets, covering everything from responsive media and box sizing, to Grid, aspect ratio, and even HTML for email. (cm) --------------------------------------------------------------- #5. Getting Color Management Right Color management is essential, but are the settings you have in place really the best ones for your assets and the platforms you’re designing for? After all, you need to be able to rely on what you see on your screen. Not only is it crucial when it comes to choosing colors, but also for assessing contrast and legibility. [Color management]( To help you improve your color management, the team at bjango summarized [everything you need to know about it](. You’ll learn to choose the best color space for your needs and when you should assign a color profile vs. when it’s better to convert to one. As a bonus, the article also takes a look at popular design programs and how to get the most out of their color management options. (cm) --------------------------------------------------------------- #6. Optical Adjustments For A More Harmonious Design A text block that doesn’t look centered in its box, a shadow appearing darker than it actually is, a button looking slightly unaligned. No matter how hard you tried to make things look right, your eyes (or those of your site’s visitors) often tell you a different story. As [Anton Lovchikov explains]( the reason why things might look “a bit off” often lies in our brains and how we perceive objects in real life. So what can you do against it? Easy! Fool the viewer’s brain back. [Optical adjustments]( Anton collected examples of where the technical settings and our visual perception drift apart. The content inside a modal can be perfectly centered, for example, but since we’re living in a world in which gravity is king, the content might appear lower than it actually is because our brain applies its real-world expectation that an object will necessarily fall down to the design. So, to align it optically, you need to counter-compensate for these expectations and lift it up a bit. Be sure to check out [Anton’s article]( for more valuable insights like this one. (cm) --------------------------------------------------------------- Our sponsor: Online Masters in Information Design and Strategy [Ad]( Learn to drive effective digital communication. --------------------------------------------------------------- #7. Does Your Site Deserve Recognition? Hoping to get an award? Recommended as a resource? Used as a case study? If you want your site to get recognition, certain things will be expected. [Does My Site Deserve Recognition]( provides a baseline of what can be considered a good example so you can either polish up your own site or assess if other sites are worth being recognized or awarded something. [Does My Site Deserve Recognition?]( The guide is a ten-point checklist that addresses anything from accessibility and code validation to browser compatibility and page weight. Links to further reading material and helpful tools are included, too. One for the bookmarks. (cm) --------------------------------------------------------------- #8. Upcoming In Smashing Membership We have a [Smashing Membership]( that helps us keep the site alive and go ad-free. You can make a difference as well, and get valuable content from it, too. Coming up next: - Conference videos 🎥 from SmashingConf San Francisco 2018 — Apr 24 - Smashing TV 📺 “[Checkout UX Findings]( with Christian Holst — Apr 26 - Smashing Book 6 📖 Chapter Sneak Peek on “Making Design Systems Work In The Real World” by Laura Elizabeth — Apr 30 - New coupons and discounts 💰 — Apr 30 - Smashing TV 📺 “[Accessibility Audit Live]( with Marcy Sutton — May 10 We really appreciate the kind support of our members! You should [become one of us]( too. ;-) --------------------------------------------------------------- #9. Upcoming Workshops With Vitaly Friedman 🇺🇸 San Francisco, [SmashingConf SF]( April 16–19 🇵🇱 Gdansk, [Infoshare]( May 22–23 🇨🇦 Toronto, [SmashingConf]( June 25–28 🇩🇪 Freiburg, [SmashingConf]( Sept. 10-11 [New Front-End Adventures in Responsive Design Workshop]( Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy! --------------------------------------------------------------- #10. New On Smashing Job Board - [Web Designer]( at usnews.com (Washington, DC) “U.S. News & World Report has an immediate opening for a Web Designer. This position requires an excellent eye for design, coupled with a keen ability to understand user needs, behaviors, and motivations.” - [Full-Stack Developer]( at Mightybytes (Chicago, IL) “In this role, you will collaborate with UX designers, developers, content strategists, and product managers to create digital solutions for real-world problems faced by our primarily mission-driven client base.” - [Wordpress Designer]( at West 54 Media (Scottsdale, AZ) “We are seeking a talented, incredibly creative, highly proficient and energetic in-house Wordpress Website Designer to join our team. We are small, but mighty marketing and PR Agency located in Old Town Scottsdale.” --------------------------------------------------------------- #11. Popular Articles This Month - [UX In Contact Forms: Essentials To Turn Leads Into Conversions]( There’s always room for improvement. Start making a change today by improving your contact forms — those crucial elements before users make a purchase or subscribe to a newsletter. - [Understanding Logical Properties And Values]( CSS Logical Properties and Values aren’t quite ready to be used yet, however learning about them can help you to understand CSS Layout, and the interaction with Writing Modes. - [Lazy Loading JavaScript Modules With ConditionerJS]( Linking JavaScript functionality to the DOM can be a repetitive and tedious task. In this article, Rik Schennink explains how ConditionerJS can help make websites more flexible and user-oriented. The authors are: Cosima Mielke (cm), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](