simurai

本頁 10 篇

• Contextual styling with custom properties

  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 experiments with using custom properties for Atom’s UI. Turns out, using custom properties might make

  2018/4/1 08:00http://simurai.com/blog/2018/04/01/contextual-styling

• DuoTone themes

  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 color variations created by other theme authors.

  2016/1/1 08:00http://simurai.com/projects/2016/01/01/duotone-themes

• Back to the :roots

  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. In this post I’ll try to show a few ways how you can make the cascade be your friend and maybe reduce

  2015/9/9 08:00http://simurai.com/blog/2015/09/09/back-to-the-roots

• Nesting Components

  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 start, with “CSS components”, I mean the small building blocks that get used to assemble a website or app

  2015/5/11 08:00http://simurai.com/blog/2015/05/11/nesting-components

• FrontLinks

  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 Font Family Shadow DOM The list Form Pseudo Elements Device sizes SVG PocketGuide CSS CSS reference

  2014/10/1 08:00http://simurai.com/blog/2014/10/01/front-links

• Filtering (photo) filters

  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: I start with the first thumbnail and then just keep tapping one after the other. If there is a filte

  2014/7/20 08:00http://simurai.com/blog/2014/07/20/filtering-filters

• Spacing elements

  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 double sized gap in between. Wishing there is something like margin: 2rem collapse; where you can enable

  2014/5/25 08:00http://simurai.com/blog/2014/05/25/spacing-elements

• Styling with STRINGS

  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 have anchored areas like header/footer and a main area that should fill out the available space, then

  2014/5/4 08:00http://simurai.com/blog/2014/05/04/cssconf

• Moving to Jekyll

  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.

  2014/2/2 08:00http://simurai.com/news/2014/02/02/jekyll

• A BEM syntax with UX in mind

  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 /* org-Component */ .digit-Progress-bar /* org-Component-childElement */ .digit-Progress--small /* org-Componen

  2013/10/24 08:00http://simurai.com/blog/2013/10/24/BEM-syntax-with-ux-in-mind