Home » NewsBlog » CSS

“View Source” in DevTools

2018-08-30T03:05:27+00:00August 30th, 2018|Categories: News, Tutorials|Tags: |

When the conversation about the value of "View Source" rolls around, the #1 response I hear is along these lines: No way, Jose! I use View Source all the time! It's very useful when you want to look at the raw HTML, not the DOM. Yes, that is useful, and yes, there is a difference. [...]

Super-Powered Grid Components with CSS Custom Properties

2018-08-29T03:04:39+00:00August 29th, 2018|Categories: News, Tutorials|Tags: |

A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes [...]

A Tale of Two Buttons

2018-08-28T03:04:48+00:00August 28th, 2018|Categories: News, Tutorials|Tags: |

I enjoy front-end developer thought progression articles like this one by James Nash. Say you have a button which needs to work in "normal" conditions (light backgrounds) and one with reverse-colors for going on dark backgrounds. Do you have a modifier class on the button itself? How about on the container? How can inheritance and [...]

Using CSS Clip Path to Create Interactive Effects, Part II

2018-08-25T03:04:57+00:00August 25th, 2018|Categories: News, Tutorials|Tags: |

This is a follow up to my previous post looking into clip paths. Last time around, we dug into the fundamentals of clipping and how to get started. We looked at some ideas to exemplify what we can do with clipping. We’re going to take things a step further in this post and look at [...]

::before vs :before

2018-08-24T03:05:07+00:00August 24th, 2018|Categories: News, Tutorials|Tags: |

Note the double-colon ::before versus the single-colon :before. Which one is correct? Technically, the correct answer is ::before. But that doesn't mean you should automatically use it. The situation is that: double-colon selectors are pseudo-elements. single-colon selectors are pseudo-selectors. ::before is definitely a pseudo-element, so it should use the double colon. The distinction between a [...]

A Basic WooCommerce Setup to Sell T-Shirts

2018-08-24T03:04:50+00:00August 24th, 2018|Categories: News, Tutorials|Tags: |

WooCommerce is a powerful eCommerce solution for WordPress sites. If you're like me, and like working with WordPress and have WordPress-powered sites already, WooCommerce is a no-brainer for helping you sell things online on those sites. But even if you don't already have a WordPress site, WooCommerce is so good I think it would make [...]

CSS Logical Properties

2018-08-22T03:01:34+00:00August 22nd, 2018|Categories: News, Tutorials|Tags: |

A property like margin-left seems fairly logical, but as Manuel Rego Casasnovas says: Imagine that you have some right-to-left (RTL) content on your website your left might be probably the physical right, so if you are usually setting margin-left: 100px for some elements, you might want to replace that with margin-right: 100px. Direction, writing mode, [...]

ABeamer: a frame-by-frame animation framework

2018-08-22T03:01:19+00:00August 22nd, 2018|Categories: News, Tutorials|Tags: |

In a recent post, Zach Saucier demonstrated the awesome things that the DOM allows us to do, thanks to the element. Taking a snapshot of an element and manipulating it to create an exploding animation is pretty slick and a perfect example of how far complex animations have come in the last few years. ABeamer [...]