Combining position: sticky; with overflow: scroll;

Figure: position: sticky; and overflow: scroll;, a quirky combination … but it can be fixed! Dannie Vinther: Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within […]

Multilingual Sites: Styling translated text

Ire Aderinokun on why you should use the :lang pseudo-class over the lang attribute selector (e.g. [lang]) for language-specific styles: The problem with having language-specific styles based on the [lang] attribute selector is that the selector isn’t actually aware of the language of the element. It’s just like any other “dumb” attribute selector. This can […]

BIO: Combining the powers of BEM, OOCSS and ITCSS for Improving CSS

Ryan Yu: There are many great techniques out there to improve the way we write CSS, and from my experience, I found the following three techniques that make up the BIO acronym work very well together BEM ITCSS OOCSS A lot of developers/engineers already know those famous techniques but I would like to go through […]

Animate CSS Grid Layouts with animate-css-grid

In a new(ish) web-project I’m working on, I went all-in on CSS Grid. The website contains a page where one can filter the list of elements shown. To animate this filtering I used animate-css-grid, as other libraries typically used for this – e.g. Isotope – don’t play nice with CSS Grid. Installation per NPM/Yarn: yarn […]