A rather geeky/technical weblog, est. 2001, by Bramus
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 …
Continue reading “Combining position: sticky; with overflow: scroll;“
Worth a peek, to see how it’s built. I like how the .cells__number cells are locked to the first column, independent of their order in the source code: grid-column: 1 / span 1; CSS Grid: Excel Spreadsheet →
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 …
Continue reading “Multilingual Sites: Styling translated text”
Great work by Heydon Pickering, in which he lets a flexbox layout respond to the size of its container, and not the viewport Sometimes you want your items to wrap in a very particular way. For instance, when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. …
shape-outside ExperimentsI like these pens by Kristopher Van Sant using shape-outside to wrap text in a shape. Take this heart for example: CSS Shapes Experiments → 🤓 Back in 2006 (!) I created a small site/tool named “The Box Office” to fake that. It took the line-height and floated a truckload of boxes to one side …
A lesson in webdev history by Jason Hoffman: The clearfix, for those unaware, is a CSS hack that solves a persistent bug that occurs when two floated elements are stacked next to each other. When elements are aligned this way, the parent container ends up with a height of 0, and it can easily wreak …
Continue reading “Clearfix: A Lesson in Web Development Evolution”
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 …
Continue reading “BIO: Combining the powers of BEM, OOCSS and ITCSS for Improving CSS”
With CSS Grid being available, Max Böck set out to find himself a layout challenge: I went over to dribbble in search of layout ideas that are pushing the envelope a bit. The kind of design that would make frontend developers like me frown at first sight. He settled on the “Digital Walls” shot (pictured …
animate-css-gridIn 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 …
Continue reading “Rearrange / Animate CSS Grid Layouts with animate-css-grid“
I enjoyed reading this piece by Keith J. Grant on three key characteristics of CSS that set it apart from conventional programming languages. I want to look at three key characteristics of CSS that set it apart from conventional programming languages: it’s resilient; it’s declarative; and it’s contextual. Understanding these aspects of the language, I …