Creating a sticky footer is one of the most common web development tasks you can easily solve with flexbox. Without a sticky footer, if you don't have enough content on the page, the footer "jumps" up to the middle of the screen, which can completely ruin the user experience. Before flexbox, developers used negative margins to force the footer down to the bottom of the page. Luckily, we don't need such a hack anymore! In this article, we will show you an easy technique that allows you to create a sticky footer...
Enabling dark mode in CSS allows website visitors to switch to an eye-friendly and resource-saving design whenever they want. There are a couple of UX patterns you can use to add a dark theme to your site. In this tutorial, we will show you how to add a simple jQuery toggle to the top of the page so that users can easily switch dark mode on and off. Our demo will be responsive as well, so it will look good on all device sizes, from smartphones to desktops to large screens. Here is how the light mode will finally look...
Variable fonts extend the OpenType font specification with dynamic capabilities. They supply developers with typefaces that come with unlimited font variations. With variable fonts, you don't have to load a separate font file for each style variation such as italic or bold types. All font variations are included in one single file. You are not tied to pre-defined typographical styles, either. For example, most static fonts require you to use the font-weight: 800; rule for bold fonts. Variable...
Flexbox is a CSS layout module that makes the creation of fully flexible user interfaces possible. It offers an easy-to-use alternative to floats and a couple of jQuery plugins such as image gallery libraries as well. Flexbox is an ideal choice for several typical CSS tasks and fits especially well with one-dimensional layouts. In this article, we will look into how to use flexbox to create a responsive image gallery that looks well at every viewport size. 1. Create the HTML ... First, let's create the...
Look, people keep using JavaScript when they just don’t need to. Some might argue that it’s okay for JS to be a requirement for any given website nowadays, but does it really have to be? If your site has little-to-no app features, do you really have to use JavaScript for all of your fancy schmancy effects? Not always, no. There are already hundreds of examples of pure CSS implementations of common JavaScript effects. Chain some of them together, and you can get some pretty advanced animations and other...
So you’re getting started with CSS, and you’re having a little trouble keeping it organized. Well, CSS has an inherent organization method that is right in the name: The Cascade. Whatever you write first will impact everything that comes after it; and it can all be overridden where needed. That, of course, is predicated on the idea that you’re building a small, static HTML site in 1998-to-early-2000s. Those were the days. Get off my lawn. Don’t get me wrong. The Cascade is as important as ever,...
During the recent years, CSS variables have sparked a lot of debate. On one hand, there are those who have been asking for them to be included and finding various workarounds to add a more programmatic approach to CSS. On the other side of the coin are those who argue that CSS variables have no place in a language that is supposed to handle the presentation of elements. However, with the release of Chrome 49 and Firefox 43, it’s clear that CSS variables are now available in the form of custom properties and...
A few simple transitions can make a huge difference. In this article we’ll learn how we can use transitions to bring our content to life, as well as plan and build our hover effects to perform smoothly and look great. Transitions vs Animations ... Transitions are a great way to smooth the changes from one state to another, and back again, in the browser. They seem like a simpler alternative to the keyframes and animation approach, but they are useful in very different ways. For example, a transition isn’t...