Latest updates, tutorials, tips and tricks, and the occasional rant.

• Pro Tips on Using Colors in CSS

  A fast-moving dive into the newest CSS color tools that are transforming how we design for the web. Learn how to build richer palettes, keep accessibility on point, and streamline your entire workflow. Packed with code samples and hands-on demos, this guide gives you exactly what you need and none of the fluff.

• Modern Ways to Center Elements Vertically and Horizontally with CSS

  A concise reference of all the CSS technics to center elements both vertically and horizontally, with code examples.

• CSS Animation: Fill Modes

  A common problem when using CSS keyframes animations is that property values temporarily change during the animation but revert to their original state once the animation ends.

• CSS Animation: Properties Cheat Sheet

  CSS keyframe animation properties cheat sheet, including concise descriptions, typical values, and typical order in shorthand form.

• CSS Viewport Units Cheat Sheet (and Why 100vh Is Broken)

  CSS viewport units are essential for building responsive layouts, but with mobile browsers’ dynamic UI, using them efficiently can get tricky.

• The easiest way to test your local dev site on your phone

  How to test your local Astro dev site on your phone using VS Code Ports or Astro Tunnel for fast testing and client reviews.

• mCSS v.0.9

  After a couple months of hard work, mCSS is out! I’m releasing it as v.0.9 to make sure I can incorporate all the feedback I get from the community before the official 1.0 launch.

• mCSS structure and organization

  An overview of how and why mCSS file structure is organized the way it is. And a quick overview of how the selector’s properties are organized within CSS files.

• What is mCSS?

  mCSS is full featured but light, opinionated but flexible, a pleasure to use but scalable. And you don't need to learn some weird pseudo CSS to use it. It's actual CSS…

• What is BEM?

  BEM, which stands for Block, Element, Modifier, is a popular CSS naming convention that provides a clear and structured way to name your classes, making them more meaningful and easier for teams to understand, especially in larger projects.

• What is ITCSS?

  ITCSS (Inverted Triangle CSS) is a powerful methodology developed by Harry Roberts to help front-end developers organize their CSS in a scalable and maintainable way. It addresses common issues like specificity wars and cascading conflicts, making your codebase cleaner and easier to manage.