… I knew I wanted to separate entries with decorations of some sort, as a way of breaking up the stream of text. Fortunately, Hamonshū provided ample material. A little work in Acorn and I had five candidate illustrations ready to go.
Eric Meyer
Pseudo-Randomly Adding Illustrations with CSS
Such an elegant way to add personality to text-heavy websites!
Which is better? As with all techniques, it depends on the project 🙂 But we can all agree it’s amazing to have these modern CSS layout methods!
Very thorough and easy to follow article by Pete LePage and Rachel Andrew on how to create websites that respond to the needs of the users and capabilities of the devices they’re using.
Among topics covered are: sizing content to the viewport, using CSS media queries for responsiveness, choosing breakpoints, and using Chrome DevTools to view media query breakpoints.
From Cassie Evans.
See the Pen To-do list by Cassie Evans (@cassie-codes) on CodePen.
Demonstration of CSS-only grid with scrolling body and frozen header. It uses grid role for testing/demonstration purposes, despite currently having no interaction.
Two implementation details are worth noting: Edge does not support ARIA grid/table rows on semantic table elements, so all elements in this example are divs. Second, role="rowgroup" is not supported, so it has not been used.
See the Pen Scrolling grid by Sarah Higley (@smhigley) on CodePen.
No images here. Just pure CSS.
See the Pen Pure CSS Still Life – Water and Lemons by Ben Evans (@ivorjetski) on CodePen.
CSS Grid has been ready to use in production for quite a while now, and Rachel Andrews has a list of websites that do just that here.
If you have a website that uses CSS Grid you can add it to this list too.
As designers, we often use imagery that resonates with our audience. Yet, often we also end up with stock photos and generic icons that come across as mere decoration. Or we bypass imagery altogether. But custom images are a powerful design tool. They can tell a story and convey a distinct personality. Custom illustrations can be especially impactful. They can make our audience feel personally connected to an app or website, while being an integral part of the design.
Blair Culbreth
Make ‘Em Shine: How To Use Illustrations To Elicit Emotions
Take advantage of the clip-path property and CSS Shapes to develop more creative layouts. Watch a video or follow a step-by-step tutorial.
These interactive examples will show you practical ways to use flexbox for building UI components. They start out simple and get more complex near the end. But before you use these patterns in your own code, heed the warning from the author, CJ Cenizal:
I don’t recommend copy-pasting these examples directly into production code. I’m only trying to demonstrate different ways of using flexbox through these examples, so they may not incorporate some accessibility best practices (such as using semantic HTML5 elements and the role attribute). Before using this code in production you should make sure it meets your accessibility needs.