I’ve decided to add some randomness to this website! You may noticed that the two main colors change on every page reload - there’s a fixed number of “themes” available and they change at random.
To accomplish this I used the following JavaScript.
(function(window, document, undefined) { let theme = window.localStorage.getItem("kgde_theme"); console.log(theme); if (theme) { var [colorMain, colorSecondary] = JSON.parse(theme).colors; document.body.style = `--color-main:${colorMain};--color-secondary:${colorSecondary}`; } else { // [dark-color, light-color] // Color combinations taken from https://botsin.
Using CSS calc function reasonable and with fallbacks
Published on
calc is a great CSS function to calculate values, e.g. margins or widths. What makes it especially great is that it can combine different values, for example calc(100% - 4rem - 1px) is valid and works in modern browsers - in simpler words: Calc works with different units like em, %, px, etc.
The problem with calc is that if it doesn’t work you may get a unexpected result. Take the following code for example:
You may have noticed that some things changed on this website. I completly re-wrote the Front-End and created a new theme with a focus on accessibility and well-structured content. On the web, Accessibility is enabled by default; All you need is a good HTML structure and your website is almost ready to go! A second important part of accessibility is color and contrast as well as font sizing. I decided to let users choose their own color scheme, font-size, and dark or light mode - all done with CSS Custom Properties (aka CSS variables).
I’ve spent the past week developing some features for our own website at work. We’re using WordPress and I almost always enjoy working with WordPress beside Magento projects, it’s way easier to keep an overview and with a good overview of data flow and available data it’s easier to measure and find performance bottleneck. In the following post I want to examine my workflow and the way I refactored our code base to increase the speed and overall performance of our site.
While there’s a lot of talking about CSS writing styles, organization styles and if it’s maybe better or not to avoid pre-processors or frameworks there’s one very powerful thing that gets pretty much no attention at all: Conditional CSS, i.e. pieces of CSS that serve one specific task the easiest and most known is .active given to, well, active elements. I’d like to talk a bit about conditional CSS that I’ve been using in production and that I think can improve the overall logic of CSS.
As soon as you start to really dig into web development it feels like things would change daily - at least I feel that way. But there’s one thing that I’d like everyone to do in 2014: At least basic responsive web development to ensure your site - at least - looks good and is usable on whatever screen it will be displayed. There’s nothing I hate more than scrolling websites around on my phone when I want to read an article (to be honest, I mostly leave the site and never come back).
For a recent client Project I had to create Product Flags that are displayed at the top of each product. The Flags should have different colors and different values (which also have different lengths). The values are applied via the data Attribute and the colors are also controlled via a data Attribute. The “Problem” with this task was that it’s not only a few different length, it’s a multi-language system and therefore can end up in a lot of different width of the product flags - a “fixed” solution, like applying a max-width of let’s say 20em, isn’t the best solution for this so I ended up creating a flexible solution.
Today I thought about a project I had in mind for some time, it has to do with ratings of different contents and the first thing I thought about was: What’s the easiest or best way to create a rating form with custom buttons (stars, hearts, whatever).
A few years ago I had to do this once and I remember doing it with an image and background-position but as of today I really love pseudo elements and “Look-Ma-No-Image!
If you’re a Front-End Developer you may have already heard about Pre-Processors such as Sass, LESS or Stylus. It’s fair to say that they’re all good and which one you use is up to you or your team. I prefer Sass with the SCSS Syntax (= keeps semicolons and brackets).
Even though Pre-Processors are easy to use and setup some people are still confused: Do I have to run them on a server?
I just stumbled upon a very handy CSS Property: position:sticky. As far as I found out it’s only working in Chrome and Chromium with the experimental Webkit Features Flag enabled (see at chrome://flags/#enable-experimental-webkit-features).
position:sticky is a pretty handy feature that allows you to stick an element to the top of the page (or wherever you want) until the parent element is moved out of the screen.
Basic Markup To get an idea of how position:sticky works I made some basic markup.