Smashing Newsletter: Issue #307

Editorial

Do you remember the very first time you wrote a CSS media query? What about your first CSS clearfix? Undoubtedly, CSS has become incredibly powerful over the years; not only did we see new CSS features widely adopted in modern browsers, but CSS tools have improved significantly, too.

In today’s newsletter issue, we highlight some of the less-known but useful CSS tools and resources that might come in handy for your projects. From fluid typography with clamp() to line-height calculator and CSS data charts, to general guidelines and resources for writing better CSS.

Also, don’t forget about our upcoming online event Smashing Meets, the CSSummer edition, with talks by Miriam Suzanne on CSS and CSS container queries.

Here’s a kind thank you to all of the wonderful people behind the scenes contributing to CSS and figuring out the techniques and building out the tools. You are our heros, and thank you for your incredible efforts!

— Vitaly (@smashingmag)

1. CSS clamp() Generator

Thanks to clamp(), we can set a font size that grows automatically with the viewport but doesn’t go below or above the minimum and maximum font size that we define. To help us find the perfect CSS values (e.g. for your fluid heading) and control how it scales across different viewports, Erik André Jakobsen built the Fluid Typography tool.

You enter the minimum and maximum font size as well as the minimum and maximum viewport width, and the tool calculates not only the clamp() rule for you but also shows you an example of how the heading will behave.

Another helpful generator to help you figure out the clamp() rule for your project comes from Maxime Roudier. It works similarly to Erik’s tool but also lets you select a font family and a range that you adjust with a slider instead of entering concrete minimum and maximum values. (cm)

2. Line Height Calculator

If you’re building a type scale based on a baseline grid, there’s a tricky question to be answered: What’s the right line height for every text size on your scale? Fran Pérez’s Good Line-Height calculator does the math for you.

To calculate the line-height, you need to enter three parameters: font size, multiplier, and grid row height. Font size is the key to ensure your text sits nicely on the baseline grid, the multiplier gives you control over the distance between lines, and grid row height defines the height of each row in your baseline grid. (cm)

3. Pure CSS Data Charts

Do you need a simple chart to display data but a heavy JavaScript library feels like overkill? Then Chart.css might be for you. The open-source CSS framework uses CSS utility classes to style HTML elements as charts. No JavaScript required.

Twelve different kinds of charts are supported, from area charts and bar charts to multi-dataset charts, stacked columns, and charts with 3D tilt effects. The charts are responsive, accessible, and, with the entire library weighing in at only 72 KB (6 KB gzipped) and no dependencies required, lightweight and performant. (cm)

4. Upcoming Smashing Online Events

Direct from the Smashing family, we are very proud and honored to invite you to our upcoming online event — Smashing Meets — the CSSummer edition. The event will take place online, on July 8th, with sessions by Miriam Suzanne and Ahmad Shadeed on what’s happening in CSS — with a particular focus on CSS container queries. We’d love to see you there, as it will be good fun, of course!

And if you’d like to dive deeper, we couldn’t be more excited for Stephanie’s Level-Up With Modern CSS workshop. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming front-end & design workshops.

Creating & Maintaining Successful Design Systems Dev
with Brad Frost. June 29 – July 13.
Level-Up With Modern CSS Dev
with Stephanie Eckles. July 8–22.
Designing Websites That Convert UX
with Paul Boag. July 22–30.
The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19.
Getting Web Forms Right UX
with Vitaly Friedman. August 18–20.
Jump to all online workshops →

5. Auditing Different CSS Sources

How do you usually test if your front-end components look fine across browsers? Do you have a dedicated test HTML file that includes all HTML elements you’re using to see all the styling at a glance? Austin Gill created a little tool that takes a similar approach: Style Check. The benefit: You won’t need to set up a test HTML file yourself, the tool does it for you.

Upload your .css file to Style Check to audit your styles. You can also select a library or reset (Bedrocss, Bootstrap, Eric Meyer’s CSS Reset, and Normalize.css are available), or enter inline styles. The elements range from headings and paragraphs to media, lists, and tables, buttons, forms, as well as other kinds of input, and details such as sub- and superscript, code, quotes, and much more. A handy little helper. (cm)

6. Image Maps Generator

Image maps let you create clickable areas on an image. If you’d like to create an image map but don’t want to fiddle with coordinates to define the clickable regions, imagemaps.net is here to help.

The site has a UI to make the process slightly more straightforward. Once you’ve uploaded your image, you can use the Pen, Rectangle, and Polygon tools to draw your clickable regions. You can then name each region, assign a link to it, and adjust its color, height and width. A click on the “Export” button provides you with the HTML map and React code that you can copy and paste into your project.

And as we all have to make image maps responsive, we could create image maps with SVG shapes, and then make responsive images with SVG responsive. (cm)

7. HTML/CSS Best Practices

Ensuring that websites and applications are usable and accessible for everyone is the responsibility of every developer. However, what if somebody asks you about a set of general CSS good practices, all bundled in one document? Where would you point them to? Joy Heron has collected valuable HTML and CSS guidelines that she learned over the years and that will help you, too, to create responsive, accessible experiences.

For people starting out learning HTML and CSS, Shay Howe has released a comprehensive guide to HTML/CSS. To provide you with a solid base you can build upon, it outlines the fundamentals and works through all common elements of front-end design and development. A guide with more advanced lessons teaches modern front-end development for designers looking to round out their front-end skills.

Also, speaking of modern techniques:

Stephanie Eckles publishes a fantastic resource on modern CSS solutions for old CSS problems — from keeping the footer at the bottom to future-proofing your styles.
Josh W. Comeau has launched a video course on CSS For JavaScript Developers.
For some more CSS wisdom you might want to keep an eye on Ahmad Shadeed’s articles and books. He regularly publishes CSS tutorials that are bound to take your skills to the next level.

8. Shining The Spotlight On…

This week, we’d like to give a huge shout out to:

UX Design Weekly
Staying on top of what’s happening in the community can be hard. The UX Design Weekly newsletter has your back with a hand-picked list of the best user experience design articles, resources, portfolios, and more every week.
RWD Weekly Newsletter
A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links. Justin spends hours curating the best content, interview industry leaders and send it to you every Friday.

We love supporting wonderful community efforts, and we’re always happy to share articles and resources from, so please do feel free to reach out to us anytime. Community matters. 🧡

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next week!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

June 29, 2021 Smashing Newsletter: Issue #307

Previous Issues