On the look out for available templates on the interwebs for deployment of a static site on Netlify build with Sculpin and Grunt I stumbled on some intriguing templates but none with that exact combination. There are templates available for different static site builders and build tools on Netlify’s dedicated repository of templates, like a lot with Hugo, typically integrated in a Gulp workflow.
read articleUnicase fonts are a bit special; they provide uppercase glyphs for lowercase characters, which means lowercase glyphs are rendered with glyphs which look just like uppercase glyphs. One should be careful using these fonts, but they have their place. If you want to create the same effect with any other font then there is the CSS property-value pair …
read articleTweaking a method for the lazy loading of images made me think the result could be described as progressively enhancing images. By replacing – with javaScript – a small inline SVG data URI with only embedded text inside on the src-tag with the url of the external image stored in a data-attribute.
read articleMaybe early days, but coming to a browser near you some day: alpha transparency in 8 digits hex notation; currently supported in Chrome Canary and Firefox Nightly. Some thoughts here on how and why this could be useful.
read articleCommon practice with showing a serie of logos in an attractive way in a webpage, is to present gray scaled – or monochrome versions, to neutralize the (potentially clashing) distracting colors from the images. One way of doing this could be to manipulate the full-color images in photo-editing software and save copies in gray scaled versions. An even quicker way would be to use css– or svg-filters.
read articleSomewhat suprised to see how scarces the available information is, around the interwebs and in the docs, on the subject of creating colorschemes for Sublime Text, for such a popular text-editor. Here are some notes that may come handy when doing this yourself. Down at the bottom of this post one will find links to other resources.
read articleLet’s say one is writing a tutorial with code-examples showing code-snippets from the command-line, _and_ code-snippets from javascript files. One could use screenshots from the commandline with, for example, a dark theme and javascript snippets in plain text within a pre tag syntax-highlighted with a light theme, in order to differentiate between the two in a clear manner.
For the last couple of years, whenever I was in the mood for it and found the time, I build colorschemes for syntax highlighting. The idea, that triggered this kind of an academic exercise in colorscheming, was to build a serie of colorschemes that would comprise the whole color gamut, each with it’s own base-color.
read articleIn the heyday of strict modernism, when Xerox PARC invented the air vent menu in the early seventies, it was the doctrine of “form follows function” that ruled the art – and design–world. From architecture to applied graphical user interfaces; nothing could escape the modernist inquisition.
read articleThe advantages of having a static site-generator integrated in one and the same build-tool (that you may already be using) is huge: Assemble itself is a Grunt- (also Yeoman and Node, and soon to be Gulp-) plugin. At the same time, Assemble assumes very little about “what it is that you are trying to do”; making it fun to use (if you are also the kind of person that tends to want to make things their own …).
read articleAnimating the height of an element with only CSS is possible with the max-height property, giving the begin value a max-height of zero and (let's say) the 'hovered' value some high number “that will always be higher then the real height of the highest animated element”. The outcome of the results can vary quite a bit, depending on the differences between all these values: …
In order to avoid breaking up a css-shape from the surrounding wrapping text to another column, (… which is far from pretty), when using CSS-Shapes (to make text flow around an image or an object) within a multi-column layout: one can use the property break-inside with the value avoid-column on the wrapping element: