simurai's site
Something I’ve been wanting for a long time, define different regions like a footer section, or side bar and not have to deal with all the contextual styling hassle. A.k.a. “Now that this button is used on a dark background, the button needs to change its colors too. Where should the styles live?”. Here an old post about struggling with contextual styling . So then the other day I was doing some…
Double-hue syntax themes for Atom . DuoTone themes use only 2 hues (7 shades in total). It tones down less important parts (like punctuation and brackets) and highlights only the important ones. This leads to a more calm color scheme, but still lets you find the stuff you’re looking for. A big thanks goes to @braver who did most of the initial language support . Color variations And here some more…
The cascade in CSS is a curse and blessing at the same time. It usually works quite well, but there are issues that let people get all worked up and ask the question Do We Even Need CSS Anymore . I can somewhat relate to that - but I also think it’s not the cascade alone and also about fighting specificity. Not running into issues with specificity is hard. Almost as hard as pronouncing that word.…
Using CSS components is somewhat straightforward. We add the markup and give it the component’s class name and all is good. Where it gets trickier is when we try to nest components. And when they need to be tweaked based on the context. Where should the styles be defined? It’s a question I’ve been asking myself a few times and what this article is trying to explore. Just to clarify before we…
This is my (living) collection of front-end links. It’s not complete by all means, in fact, there isn’t any of the obvious ones, like Can I use or so. Just some links that I need occasionally but can’t remember their names, so I saved them here for quick access. Also, they’re somewhat randomly ordered. Note to self: Edit source Docs HTML reference DevDocs Native HTML Elements jQuery -> JS Default…
A lot of photo apps allow you to add filters before sharing. The typical UI for picking a filter is a row of little thumbnails that can be horizontally scrolled . I’m sure you’ve used it many times. It looks something like this: The problem A filter picker like that is easy to understand and works pretty well. But in my case, there is something that has been bugging me a bit. Here is how I use it:…
So let’s say we have a “bar” with some items inside. Like a header or footer. Let’s also say we want those items to be spaced evenly, meaning they have the same gap everywhere. Shouldn’t be a big problem. Let’s take a look: 1. Margin We can’t just add margin: 2rem to the elements since there is no margin collapsing on the horizontal axis. And it also doesn’t work when using Flexbox. Leaving a…
At this year’s CSSConf in Melbourne (AU) I gave a talk called “Styling with STRINGS”. The talk is about how we can use Flexbox , currentColor and __EM__s inside components to quickly style entire Web Apps straight in the browser. In case of tl:dw here some of the main points: Layout When creating mobile “App” layouts, where not the whole page is scrollable, but instead only certain parts. And you…
I haven’t redesigned my site for years, can’t even remember exactly. Also, haven’t been posting for a while. So as a New Year’s resolution I redid my site using Jekyll and am hosting it as a GitHub page .
At some point, while working on the MontageJS framework, the question came up what CSS naming convention we should start using. After a long discussion we settled on using the BEM methodology , but changed the syntax a bit. To keep this post short, I won’t go into detail why using BEM is a good idea, but rather explain why we chose a different syntax. Here some examples: .digit-Progress /*…