CSS has math and comparison functions like min(), max(), and minmax(). You have probably seen the issue that 3 columns layout looks strange at some viewport sizes where there isn’t enough room for content. Let’s try to automate our grid layout with the magic of CSS: This CSS creates a grid layout with a dynamic …
Years and years we have used padding hack for responsive videos and iframes. But now we can use aspect-ratio property. The aspect-ratio property allows you to set the aspect ratio of an element directly. Here’s an example code to set an aspect ratio of 16:9 for an iframe using the aspect-ratio property: In the above …
Yeah yeah, naming CSS custom properties (CSS variables) or Sass variables is hard. But even that is not the full picture. In ideal world they are shared with design tools like Figma or Sketch. developers, UX, and visual designers can quickly understand what they mean. adding or removing variables isn’t too painful. Changing the values …
I’ve been developing with Windows WSL2 system several months now, and I only have had couple of issues. One of them is that I’ve been forced to enter passphrase every time when I use SSH or pull from Git for example. So annoying. Keychain for rescue I tried all the tutorials that I could find …
I have had weird SSL certificate issue couple of times in WSL2 when I try to fetch posts in my Eleventy & WordPress setup. First time I took me 4 hours to figure this out, this time 2 hours. Now it’s time to add a note for future me! For some reason WSL2 system time …
I don’t do lists. Not shopping lists, to-do lists. I do not do lists. But here I am listing top 10 songs of all time! And oh boy it’s hard, almost impossible. I could name 10000 songs. I still want to give it a shot because music is so crucial part of my life. Let’s …
This is overview article how WordPress and Eleventy works together. I’m writing this article in WordPress block editor as usual but front-end is now served by Eleventy. In other words back-end is still WordPress. front-end is static using Eleventy. site (foxland.fi) is hosted in Netlify. Code can be found in Github: Foxland Eleventy site. Foxland …
I had fun time talking about maintainable CSS architecture in the Gutenberg era in WordCamp London and in WordCamp EU. Especially in #WCEU I had a change to talk about CSS with lot’s of people. Thank you all for your questions and challenging the thinking behind my talk ideas. In this post I’ll go through …
All my themes and plugins are now free. At the moment I feel that’s a permanent decision but you’ll never know. I want to thank all who have supported my journey. Either by purchasing, helping, or sharing ideas. I’ll do my best to answer some of the questions you might have. Why free? I don’t …
I wrote another article in Envato Tuts+ site: Accessibility Tips For WordPress Theme Developers. Same tips apply to any platform though. Why semantic HTML matters. How to structure your pages. How to navigate pages using assistive technology. Remember focus styles. And some more. Most of the resources can be found in accessibility handbook. That’s where …