Zdravo,
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)
From our sponsor
The "Now What?" Podcast: Hear How Crypto Is Unlocking New Opportunities
Now What? is a new podcast series presented by Wix, featuring in-depth conversations with the world's leading creatives. Listen to the latest episode, where Co-Founder and VP Engineering at BuyCoins, Ire Aderinokun, shares how cryptocurrency is unlocking economic potential and presenting new opportunities for designers and developers worldwide.
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!
Front-end and design can sometimes feel like you're riding some pretty wild waves! We've got your back with personal and inclusive events.
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.
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)
From our sponsor
Build Web Experiences That Drive Business Growth
CMS Hub enables seamless integration with CRM data for advanced personalization, automation, and dynamic content. Develop locally with the tools and frameworks you prefer, then deploy to HubSpot via the CLI, where marketers can create and edit content with visual design tools. Get started with a free developer test account →
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:
From our sponsor
Build In-Demand Skills In Northwestern's Online MS In Information Design And Strategy
Earn your master's degree online.
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. 🧡
9. New On Smashing Job Board
10. Recent Smashing Articles
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: