Tag CSS
Tag CSS RSS 2.0 FeedLoading Tailwind CSS color palette into Inkscape
I am working on a small project that uses Tailwind CSS. Normally, I always start programming UI things in HTML and then wonder why it's not as clear and clean as I imagined. Most of my work actually always takes place in the backend. In order to proceed with this project in a more structured way, I wanted to create a few user interface layouts before I start programming.
I think the tool of choice for professionals is Figma. However, I thought to myself, with Inkscape I can certainly implement this for my purposes. When I wanted to assign a color to the first elements, I found it very complicated to take the Hex triplet from Customizing Colors and assign them again each time. I would like to show you how to do this more easily.
Responsive embedded D3 SVG
The most D3 examples that I can find are not responsive embedded SVG. I guess the main reason for that is not to confuse the reader of a tutorial with stuff outside of D3. With the help of How to Scale SVG from Amelia Bellamy-Royds I would like to show on a minimal D3 example how to make the resulting SVG responsive.
CSS conflict between Bootstrap 4 and Prism
Bootstrap
4.0.0-alpha.5 is styling the class .tag and this leads to a CSS conflict with the
Prism syntax highlighter. Here my fix to solve this conflict.
4.0.0-alpha.6.Upgrade from Bootstrap version 3 to 4
Bootstrap
4.0.0 seems to be released soon. My small blog is mostly based on plain Bootstrap with a few color changes. I will
try to upgrade from Bootstrap 3.3.6 to version v4.0.0-alpha.5. This post will just
document the changes that I have noticed while upgrading.
Greenprint - A Prism syntax highlighting theme
I have started the development of my own Prism theme. I was mostly inspired by the awesome Prism theme of Mozilla Developer Network. I thought it would be difficult, but in general it is just defining some colors. The theme is also used by blog.
CSS blur overlay
Unfortunately it is not possible to create a real blur overlay with CSS for all browsers at the moment. Only webkit
has the backdrop-filter. But all other browsers mostly
support a blur filter. This will not really work like a overlay, more like a filter that will be propagated
bottom-up. In other words, the filter works only for a hole element or not. It's impossible to have something like a
div overlay element that blurs only a part of an image like the backdrop-filter.
CSS background transitions with image sprites
You will start thinking about image sprites, if you see that your website has too many requests just because of some
background images. An image sprite can combine many single requests from a browser to the server into one request.
We just have to combine our background images into one single image and use the CSS property
background-position. It's just getting complicated if you have a transition on the background.
Bootstrap responsive embed aspect ratio
Bootstrap responsive embed can be very helpful to show responsive PDF files or videos. But it supports only the aspect ration 16by9 and 4by3. But what about other aspect rations? For example 210by297 would be interesting to embed a A4 paper.
CSS conflict between WordPress Twenty Fifteen and embedded Github Gists
5 minutes ago I have written a post with a Github Gist. You can embed Gists like this in your posts
<script src="https://gist.github.com/GordonLesti/8822532.js"></script>But the gist has looked like this
